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>

Snippet Card with text link (non-clickable card)

When a SnippetCardLink is included, the card itself is not clickable and instead shows an inline link.

Topic

Title of the topic card

Lorem ipsum dolor sit amet consectetur. Augue gravida pretium mauris accumsan. Egestas elit gravida eget quis mauris libero turpis.

Edit link text
Code
<Box
  style={{
    maxInlineSize: '305px'
  }}
>
  <SnippetCard
    label="Topic"
    title="Title of the topic card"
  >
    <SnippetCardText>
      Lorem ipsum dolor sit amet consectetur. Augue gravida pretium mauris accumsan. Egestas elit gravida eget quis mauris libero turpis.
    </SnippetCardText>
    <SnippetCardLink href="#">
      Edit link text
    </SnippetCardLink>
    <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
SnippetCardLink

external

boolean

Indicates that the link goes to an external site

size

TextSize

inline

boolean

Indicates if link is used in line with other text content.

centerIcons

boolean

visuallyHiddenContent

string

If there is any visually hidden content, it should go here rather than in children

startIcon

ReactNode

The startIcon property allows an icon to be passed which is displayed before the link text.

endIcon

ReactNode

The endIcon property allows an icon to be passed which is displayed after the link text.

rightAlignEndIcon

boolean

The rightAlignEndIcon property allows an icon to be passed which is displayed right aligned after the link text.