Skip to main content

InfoCard

Deprecated

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

Examples

InfoCard

View standalone

Quick Check

Senior physicians use ClinicalKey now to quickly validate a decision they make before talking to a patient lorem ipsum placeholder

Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <InfoCard
    description="Senior physicians use ClinicalKey now to quickly validate a decision they make before talking to a patient lorem ipsum placeholder"
    image={{
      alt: '',
      height: 380,
      sizes: '(min-width: 768px) 380px, 380px',
      src: '/design-system/docs/images/example-info-card.png',
      width: 380
    }}
    title="Quick Check"
    titleLevel="h2"
  />
</Box>

Inverse variant

View standalone

Quick Check

Senior physicians use ClinicalKey now to quickly validate a decision they make before talking to a patient lorem ipsum placeholder

Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <InfoCard
    description="Senior physicians use ClinicalKey now to quickly validate a decision they make before talking to a patient lorem ipsum placeholder"
    image={{
      alt: '',
      height: 380,
      sizes: '(min-width: 768px) 380px, 380px',
      src: '/design-system/docs/images/example-info-card.png',
      width: 380
    }}
    title="Quick Check"
    titleLevel="h2"
    variant="inverse"
  />
</Box>

Props

className

string

description

string

The card description, shown beneath the title and the image.

image

InfoCardImageProps

title

string

The main title of the card, shown beneath the image.

titleLevel

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

variant

"default" | "inverse"