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
    date="March 6, 2023"
    duration="5 min read"
    href="#"
    label="Event"
    location="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
    date="March 6, 2023"
    duration="5 min read"
    href="#"
    label="Press Release"
    location="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
    date="March 6, 2023"
    duration="5 min read"
    href="#"
    label="Press Release"
    location="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
    date="March 6, 2023"
    duration="5 min read"
    href="#"
    label="Video"
    location="London"
    title="Explore Progress towards Gender Equality in Research & Innovation – 2024 Review"
  >
    <SnippetCardImage
      alt="Video thumbnail"
      mediaIcon="video"
      src="/design-system/docs/images/example-image.jpg"
    />
  </SnippetCard>
</Box>

Snippet Card with image and podcast icon

Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    date="March 6, 2023"
    duration="5 min read"
    href="#"
    label="Podcast"
    location="London"
    title="Explore Progress towards Gender Equality in Research & Innovation – 2024 Review"
  >
    <SnippetCardImage
      alt="Podcast cover"
      mediaIcon="podcast"
      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>

Props

SnippetCard

label

string

title

string

href

string

variant

"dark" | "light" | "headline"

date

string

duration

string

location

string

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

mediaIcon

"video" | "podcast"

width

number

Default: 257

height

number

Default: 160

SnippetCardText