Skip to main content

SnippetCard

A fully clickable card component with a ContentTag at the top, two fixed-height content sections, and a decorative arrow icon that responds to hover/focus states. Defaults to headline variant when no children are provided, and light variant when children are provided.

Examples

Snippet Card

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Press Release"
    title="Snippet Card Example"
  />
</Box>

Snippet Card with children

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Press Release"
    title="Snippet Card Example"
  >
    <SnippetCardText>
      This is child content.
    </SnippetCardText>
  </SnippetCard>
</Box>

Snippet Card with title and meta info

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Event"
    metaItems={[
      {
        icon: <CalendarIcon />,
        text: 'March 6, 2023'
      },
      {
        icon: <ClockIcon />,
        text: '5 min read'
      },
      {
        icon: <LocationIcon />,
        text: 'London'
      }
    ]}
    title="Explore Progress towards Gender Equality in Research & Innovation – 2024 Review"
  />
</Box>

Snippet Card light variant

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Press Release"
    title="Snippet Card Example"
    variant="light"
  />
</Box>

Snippet Card dark variant

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Topic"
    title="Snippet Card Example"
    variant="dark"
  />
</Box>

Snippet Card headline variant

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Press Release"
    metaItems={[
      {
        icon: <CalendarIcon />,
        text: 'March 6, 2023'
      },
      {
        icon: <ClockIcon />,
        text: '5 min read'
      },
      {
        icon: <LocationIcon />,
        text: 'London'
      }
    ]}
    title="Explore Progress towards Gender Equality in Research & Innovation – 2024 Review"
    variant="headline"
  />
</Box>

Snippet Card with long truncated title and child content

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Press Release"
    title="Snippet Card Example with a super mega colossal humongously long title name that should be truncated after four lines"
  >
    <SnippetCardImage
      alt=""
      src="/design-system/docs/images/example-image.jpg"
    />
  </SnippetCard>
</Box>

Snippet Card with long truncated title, meta info and child content

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Press Release"
    metaItems={[
      {
        icon: <CalendarIcon />,
        text: 'March 6, 2023'
      },
      {
        icon: <ClockIcon />,
        text: '5 min read'
      },
      {
        icon: <LocationIcon />,
        text: 'London'
      }
    ]}
    title="Snippet Card Example with a super long title name that should be truncated after three lines"
  >
    <SnippetCardImage
      alt=""
      src="/design-system/docs/images/example-image.jpg"
    />
  </SnippetCard>
</Box>

Snippet Card with image and video icon

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Video"
    metaItems={[
      {
        icon: <CalendarIcon />,
        text: 'March 6, 2023'
      },
      {
        icon: <ClockIcon />,
        text: '5 min read'
      },
      {
        icon: <LocationIcon />,
        text: 'London'
      }
    ]}
    title="Explore Progress towards Gender Equality in Research & Innovation – 2024 Review"
  >
    <SnippetCardImage
      alt="Video thumbnail"
      mediaIcon={<PlayIcon />}
      src="/design-system/docs/images/example-image.jpg"
    />
  </SnippetCard>
</Box>

Snippet Card with image and podcast icon

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Podcast"
    title="Health Podcast"
  >
    <SnippetCardImage
      alt="Podcast cover"
      mediaIcon={<PodcastIcon />}
      src="/design-system/docs/images/example-image.jpg"
    />
  </SnippetCard>
</Box>

Snippet Card using SnippetCardText component

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    href="#"
    label="Report"
    title="Explore Progress towards Gender Equality in Research & Innovation – 2024 Review"
  >
    <SnippetCardText>
      Browse a collection of resources designed to support research, healthcare and scientific discovery. From articles and reports to case studies, tools, and key topics, filter by subject, role, or product to quickly find whats most relevant to your work and learning. Whether you are an academic, clinician, or industry professional, discover content tailored to your needs.
    </SnippetCardText>
  </SnippetCard>
</Box>

Snippet Card with external link

External links work with all content types including text and images.

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    external
    href="#"
    label="Connect"
    title="Researchers have their say on what research integrity means in the age of AI"
  >
    <SnippetCardImage
      alt=""
      src="/design-system/docs/images/example-image.jpg"
    />
  </SnippetCard>
</Box>

Props

SnippetCard

label

string

title

string

variant

SnippetCardVariants

metaItems

{ icon: ReactNode; text: string; }[]

Default: "[]"

external

boolean

Default: false

SnippetCardImage

loader

ImageLoader

quality

number

Quality passed to the loader

rounded

boolean

Corner style

fetchpriority

"auto" | "high" | "low"

> Provides a hint of the relative priority to use when fetching the image. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-fetchpriority

hideOnError

boolean

mediaIcon

ReactNode

width

number

Default: 257

height

number

Default: 160

SnippetCardText