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