title: "DataStoryCard" slug: "/packages/datastory-card" category: "cards" componentNames:

• "DataStoryCard"

DataStoryCard

To see DataStoryCard in action, check out the data story listing pattern, topic pattern or featured topic pattern.

import DataStoryCard from "@ds-kit/datastory-card"

Simple examples

A basic examples of a DataStoryCard with size: sm, md, lg can look like this:

<>
  <DataStoryCard
    size="sm"
    seo={{
      description: "Hur skulle riksdagen se ut om en viss väljargrupp röstade",
      image: {
        id: "DatoCmsAsset-417467",
        url:
          "https://www.datocms-assets.com/5436/1554104598-hyporikstag-cover.png",
      },
      title: "Hypotetisk riksdag",
      twitterCard: "summary",
    }}
  />
  <DataStoryCard
    size="md"
    seo={{
      description: "Hur skulle riksdagen se ut om en viss väljargrupp röstade",
      image: {
        id: "DatoCmsAsset-417467",
        url:
          "https://www.datocms-assets.com/5436/1554104598-hyporikstag-cover.png",
      },
      title: "Hypotetisk riksdag",
      twitterCard: "summary",
    }}
  />
  <DataStoryCard
    size="lg"
    seo={{
      description: "Hur skulle riksdagen se ut om en viss väljargrupp röstade",
      image: {
        id: "DatoCmsAsset-417467",
        url:
          "https://www.datocms-assets.com/5436/1554104598-hyporikstag-cover.png",
      },
      title: "Hypotetisk riksdag",
      twitterCard: "summary",
    }}
  />
</>