Skip to main content

ContentCard

Deprecated

Deprecated: Use the new `<Card>` component instead.

Provides layout for a ContentCard. It consists of an image, subtitle and a title.

Examples

Basic ContentCard

View standalone
Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <ContentCard
    href="/"
    image={{
      alt: 'Woman gets a sticker on her arm',
      src: '/design-system/docs/images/example-image.jpg'
    }}
    subtitle="Article"
    title="Understanding how metrics can support real-world decisions"
    titleLevel="h5"
  />
</Box>

Webinar ContentCard

View standalone
Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <ContentCard
    href="/"
    icon={<PlayIcon />}
    image={{
      alt: 'Masked woman with sticker on arm',
      src: '/design-system/docs/images/example-image.jpg'
    }}
    subtitle="Webinar"
    title="Understanding how metrics can support real-world decisions"
    titleLevel="h5"
  />
</Box>

Props

title

string

The subtitle property sets the value of the title property of the card.

subtitle

string

The subtitle property sets the value of the title property of the card.

titleLevel

"h2" | "h3" | "h4" | "h5"

The titleLevel property sets the heading level of the title.

image

ContentCardImageProps

The image property sets the value of the image and the alt text.

className

string

The className property sets the value of the class attribute of the element.

icon

ReactNode

href

string