Skip to main content

Card

The card component comprises a number of smaller components:

  • <Card>: the main wrapping component
  • <CardContent>: represents the text body of the card
  • <CardTitle>: the main title of the card
  • <CardSubtitle>: secondary title for the card
  • <CardImage>: main image to show on the card (not used for a background image)
  • <CardLink>/<CardButton>: add interactivity to the cards

These components can be assembled in a variety of ways to serve different purposes.

Examples

Card

View standalone

Most cards will need the padded prop which causes extra space to be shown around the card and the rounded borders to be used.

Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card padded>
    <CardSubtitle>
      Case #1
    </CardSubtitle>
    <CardTitle as="h3">
      4-year-old with fever and a rash
    </CardTitle>
    <CardLink
      endIcon={<DownloadIcon />}
      href="/"
    >
      Download PDF
    </CardLink>
  </Card>
</Box>

Background Colour

View standalone

A number of background colours can be used on cards. No colour has any specific meaning and can be used decoratively in any desired context. Images can also be added to cards using the <CardImage> component.

Research leaders

Understand societal impact research

Help you improve your articles before submission
Research leaders

Understand societal impact research

Help you improve your articles before submission
Research leaders

Understand societal impact research

Help you improve your articles before submission
Research leaders

Understand societal impact research

Help you improve your articles before submission
Research leaders

Understand societal impact research

Help you improve your articles before submission
Research leaders

Understand societal impact research

Help you improve your articles before submission
Code
<Flex
  gap="16px"
  wrap
>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      backgroundColor="orange"
      padded
    >
      <CardSubtitle>
        Research leaders
      </CardSubtitle>
      <CardTitle as="h3">
        Understand societal impact research
      </CardTitle>
      <CardContent>
        Help you improve your articles before submission
      </CardContent>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      backgroundColor="blue"
      padded
    >
      <CardSubtitle>
        Research leaders
      </CardSubtitle>
      <CardTitle as="h3">
        Understand societal impact research
      </CardTitle>
      <CardContent>
        Help you improve your articles before submission
      </CardContent>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      backgroundColor="purple"
      padded
    >
      <CardSubtitle>
        Research leaders
      </CardSubtitle>
      <CardTitle as="h3">
        Understand societal impact research
      </CardTitle>
      <CardContent>
        Help you improve your articles before submission
      </CardContent>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      backgroundColor="green"
      padded
    >
      <CardSubtitle>
        Research leaders
      </CardSubtitle>
      <CardTitle as="h3">
        Understand societal impact research
      </CardTitle>
      <CardContent>
        Help you improve your articles before submission
      </CardContent>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      backgroundColor="yellow"
      padded
    >
      <CardSubtitle>
        Research leaders
      </CardSubtitle>
      <CardTitle as="h3">
        Understand societal impact research
      </CardTitle>
      <CardContent>
        Help you improve your articles before submission
      </CardContent>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      backgroundColor="brown"
      padded
    >
      <CardSubtitle>
        Research leaders
      </CardSubtitle>
      <CardTitle as="h3">
        Understand societal impact research
      </CardTitle>
      <CardContent>
        Help you improve your articles before submission
      </CardContent>
    </Card>
  </Box>
</Flex>

Sub-components

View standalone

Card sub-components can be assembled in any order to solve a variety of problems. This card uses a rounded image and no background.

Woman gets a sticker on her arm
Whitepaper

Delivering electronic data capture for a clinical trial in breast cancer research

Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card>
    <CardImage
      alt="Woman gets a sticker on her arm"
      height={280}
      icon={<PlayIcon />}
      rounded
      src="/design-system/docs/images/example-image.jpg"
      width={380}
    />
    <CardSubtitle>
      Whitepaper
    </CardSubtitle>
    <CardTitle as="h3">
      Delivering electronic data capture for a clinical trial in breast cancer research
    </CardTitle>
  </Card>
</Box>

Stack

View standalone

Cards can also appear as a "stack" of multiple cards to indicate a range of content within.

Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card
    backgroundColor="blue"
    padded
    stack
  >
    <CardSubtitle>
      Topics
    </CardSubtitle>
    <CardTitle
      as="h3"
      href="/"
    >
      Time management: managing your workload
    </CardTitle>
    <CardImage
      alt=""
      height={432}
      label="12 items"
      src="/design-system/docs/images/example-card.png"
      width={324}
    />
  </Card>
</Box>

Links

View standalone

Links can either be added using the <CardLink> and <CardButton> components or by specifying a href on the <CardTitle>.

ClinicalKey

Helps students and clinicians find the right answers
Explore
Conference

Cell Symposia

Metabolites in signaling and disease | March 2 at 18:00 CET
Register now
Code
<Flex
  alignItems="flex-start"
  gap="16px"
  wrap
>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card padded>
      <CardSubtitle>
        Research leaders
      </CardSubtitle>
      <CardTitle
        as="h3"
        href="/"
      >
        Understand societal impact research
      </CardTitle>
      <CardContent>
        Help you improve your articles before submission
      </CardContent>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 380px'
    }}
  >
    <Card padded>
      <CardTitle as="h3">
        <ProductName
          as="span"
          name="ClinicalKey"
        />
      </CardTitle>
      <CardContent>
        Helps students and clinicians find the right answers
      </CardContent>
      <CardLink href="/">
        Explore
      </CardLink>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 380px'
    }}
  >
    <Card
      backgroundColor="green"
      padded
    >
      <CardSubtitle>
        Conference
      </CardSubtitle>
      <CardTitle as="h3">
        Cell Symposia
      </CardTitle>
      <CardContent>
        Metabolites in signaling and disease | March 2 at 18:00 CET
      </CardContent>
      <CardButton href="/">
        Register now
      </CardButton>
      <CardImage
        alt=""
        height={432}
        src="/design-system/docs/images/example-card.png"
        width={324}
      />
    </Card>
  </Box>
</Flex>

Block Links

View standalone

<CardTitle> additionally accepts the block prop which will make the whole card clickable.

Code
<Flex
  alignItems="flex-start"
  gap="16px"
  wrap
>
  <Box
    style={{
      flex: '0 0 380px'
    }}
  >
    <Card
      backgroundColor="blue"
      padded
      stack
    >
      <CardSubtitle>
        Topics
      </CardSubtitle>
      <CardTitle
        as="h3"
        block
        href="/"
      >
        Time management: managing your workload
      </CardTitle>
      <CardImage
        alt=""
        height={432}
        label="12 items"
        src="/design-system/docs/images/example-card.png"
        width={324}
      />
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 380px'
    }}
  >
    <Card>
      <CardImage
        alt="Woman gets a sticker on her arm"
        height={280}
        icon={<PlayIcon />}
        rounded
        src="/design-system/docs/images/example-image.jpg"
        width={380}
      />
      <CardSubtitle>
        Whitepaper
      </CardSubtitle>
      <CardTitle
        as="h3"
        block
        href="/"
      >
        Delivering electronic data capture for a clinical trial in breast cancer research
      </CardTitle>
    </Card>
  </Box>
</Flex>

Landscape Orientation

View standalone

The "landscape" orientation can be used to give more space within a card. This is often combined with a background image for more visual card content.

Product

Mendeley

Helps students and clinicians to find the right answers
Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card
    orientation="landscape"
    padded
  >
    <CardSubtitle>
      Product
    </CardSubtitle>
    <CardTitle
      as="h3"
      href="/"
    >
      Mendeley
    </CardTitle>
    <CardContent>
      Helps students and clinicians to find the right answers
    </CardContent>
    <CardImage
      alt=""
      height={432}
      src="/design-system/docs/images/example-card.png"
      width={324}
    />
  </Card>
</Box>

Image Position

View standalone

The image position can be used to add the image to the right or left.

Product

Mendeley

Helps students and clinicians to find the right answers
Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card
    imagePosition="left"
    orientation="landscape"
    padded
  >
    <CardImage
      alt=""
      height={432}
      src="/design-system/docs/images/example-card.png"
      width={324}
    />
    <CardSubtitle>
      Product
    </CardSubtitle>
    <CardTitle
      as="h3"
      href="/"
    >
      Mendeley
    </CardTitle>
    <CardContent>
      Helps students and clinicians to find the right answers
    </CardContent>
  </Card>
</Box>

Image Position left with button

View standalone

An image positioned to the left with a button.

Product

Mendeley

Helps students and clinicians to find the right answers
Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card
    imagePosition="left"
    orientation="landscape"
    padded
  >
    <CardImage
      alt=""
      height={432}
      src="/design-system/docs/images/example-card.png"
      width={324}
    />
    <CardSubtitle>
      Product
    </CardSubtitle>
    <CardTitle
      as="h3"
      href="/"
    >
      Mendeley
    </CardTitle>
    <CardContent>
      Helps students and clinicians to find the right answers
    </CardContent>
    <CardButton>
      Click Me
    </CardButton>
  </Card>
</Box>

Image Position with jounal cover

View standalone

The image position can be used to add the image to the right or left.

Product

Mendeley

Meta
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor posuere, commodo felis ut, maximus diam. Proin elementum dolor risus, non vestibulum purus imperdiet vel. Donec velit velit, aliquam vitae ligula quis, lacinia sagittis nibh.',
Code
<Card
  imageColumnWidth="120px"
  imagePosition="left"
  orientation="landscape"
>
  <CardImage
    alt=""
    atoms={{
      alignItems: 'flex-start'
    }}
    height={250}
    src="/design-system/docs/images/download-book-cover.png"
    width={180}
  />
  <CardSubtitle>
    Product
  </CardSubtitle>
  <CardTitle
    as="h3"
    href="/"
  >
    Mendeley
  </CardTitle>
  <CardSubtitle>
    Meta
  </CardSubtitle>
  <CardContent>
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor posuere, commodo felis ut, maximus diam. Proin elementum dolor risus, non vestibulum purus imperdiet vel. Donec velit velit, aliquam vitae ligula quis, lacinia sagittis nibh.',
  </CardContent>
</Card>

Background Images

View standalone

Background images can be provided for more visual cards. When a background image is provided an aspect ratio will be applied to the card based on the orientation.

Conference

Cell Symposia

Metabolites in signaling and disease | March 2 at 18:00 CET
Register now
Conference

Cell Symposia

Metabolites in signaling and disease | March 2 at 18:00 CET
Register now
Code
<Flex
  alignItems="flex-start"
  gap="16px"
  wrap
>
  <Box
    style={{
      maxInlineSize: '280px'
    }}
  >
    <Card
      backgroundImage={{
        height: 397,
        src: '/design-system/docs/images/example-card-background.jpg',
        width: 280
      }}
      padded
    >
      <CardSubtitle>
        Conference
      </CardSubtitle>
      <CardTitle as="h3">
        Cell Symposia
      </CardTitle>
      <CardContent>
        Metabolites in signaling and disease | March 2 at 18:00 CET
      </CardContent>
      <CardButton href="/">
        Register now
      </CardButton>
    </Card>
  </Box>
  <Box
    style={{
      maxInlineSize: '580px'
    }}
  >
    <Card
      backgroundImage={{
        height: 397,
        src: '/design-system/docs/images/example-card-background.jpg',
        width: 280
      }}
      orientation="landscape"
      padded
    >
      <CardSubtitle>
        Conference
      </CardSubtitle>
      <CardTitle as="h3">
        Cell Symposia
      </CardTitle>
      <CardContent>
        Metabolites in signaling and disease | March 2 at 18:00 CET
      </CardContent>
      <CardButton href="/">
        Register now
      </CardButton>
    </Card>
  </Box>
</Flex>

Themes

View standalone

Themes from the <Box> component can also be specified on cards for usage in different contexts. Note that background colours can only be used with the light theme.

Nurse

Empowering nurses with trusted resources for clinical answers
Explore

Nurse

Empowering nurses with trusted resources for clinical answers
Explore

Nurse

Empowering nurses with trusted resources for clinical answers
Explore
Code
<Flex
  gap="16px"
  wrap
>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      padded
      theme="light"
    >
      <CardTitle
        as="h3"
        startAttachment={<Icon content={<NursesIcon />} />}
      >
        Nurse
      </CardTitle>
      <CardContent>
        Empowering nurses with trusted resources for clinical answers
      </CardContent>
      <CardLink href="/">
        Explore
      </CardLink>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      padded
      theme="dark"
    >
      <CardTitle
        as="h3"
        startAttachment={<Icon content={<NursesIcon />} />}
      >
        Nurse
      </CardTitle>
      <CardContent>
        Empowering nurses with trusted resources for clinical answers
      </CardContent>
      <CardLink href="/">
        Explore
      </CardLink>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      padded
      theme="brand"
    >
      <CardTitle
        as="h3"
        startAttachment={<Icon content={<NursesIcon />} />}
      >
        Nurse
      </CardTitle>
      <CardContent>
        Empowering nurses with trusted resources for clinical answers
      </CardContent>
      <CardLink href="/">
        Explore
      </CardLink>
    </Card>
  </Box>
</Flex>

CardSubtitle with children

View standalone

Can pass children into CardSubtitle

Subtitle 1

Subtitle 2

4-year-old with fever and a rash

Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card padded>
    <CardSubtitle>
      <Text>
        Subtitle 1
      </Text>
      <Text>
        Subtitle 2
      </Text>
    </CardSubtitle>
    <CardTitle as="h3">
      4-year-old with fever and a rash
    </CardTitle>
  </Card>
</Box>

Card title with truncation

View standalone

Card titles can be given the optional truncateLines prop which will truncate the text if needed to the given number of lines, and append an ellipsies to the end

Truncation with 4 lines

Elsevier Health launches ClinicalKey AI, the most advanced Gen AI-powered clinical decision support tool for clinicians

Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card padded>
    <CardSubtitle>
      Truncation with 4 lines
    </CardSubtitle>
    <CardTitle
      as="h3"
      truncateLines={4}
    >
      Elsevier Health launches ClinicalKey AI, the most advanced Gen AI-powered clinical decision support tool for clinicians
    </CardTitle>
  </Card>
</Box>

Props

Card

padded

boolean

Applies padding to all edges of the card.

Default: false

orientation

"portrait" | "landscape"

Changes the orientation of the content within the card. Only applies if image is provided.

Default: "portrait"

stack

boolean

Card appears as a stack of cards to indicate more content if set to true.

Default: false

theme

"dark" | "light" | "brand"

Any theme from `<Box>` can be specified here. This can only be specified if `backgroundImage` is not since the dark theme must be used with a background image to ensure text contrast. @see {@link Box }

Default: "light"

imagePosition

"left" | "right"

Default: "right"

imageColumnWidth

string

backgroundColor

"blue" | "brown" | "green" | "orange" | "purple" | "yellow"

Sets the card background colour. Only available when the theme is `light`.

backgroundImage

Omit<ImageProps, "atoms" | "className" | "alt">

Sets an image to show in the card background. `theme` is not available when this option is provided to ensure text colour contrast is retained.

CardTitle

as

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

Renders as another element if specified, defaults as heading with heading level provided by `level` prop

inputRef

Ref<HTMLElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509

startAttachment

ReactNode

href

string

block

boolean

If `block` is set to "true" the whole card will become clickable.

Default: false

truncateLines

2 | 1 | 3 | 4 | 5 | 6

CardSubtitle

fontVariantNumeric

"lining" | "oldStyle"

whiteSpace

"normal" | "nowrap" | "pre-wrap"

Configures how white space of content is handled

weight

"strong"

Renders the element as 'strong' if `weight="strong"` is passed.

as

"span"

Renders as another element if specified.

inputRef

Ref<HTMLElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509

align

ConditionalStyleWithResponsiveArray<Values<("inherit" | "center" | "end" | "start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Sets the horizontal alignment of the content inside the component.

decoration

ConditionalStyle<Values<("none" | "line-through" | "underline")[], { defaultClass: string; conditions: { idle: string; hover: string; focus: string; disabled: string; }; }>>

CardImage

height

number

width

number

loader

ImageLoader

quality

number

Quality passed to the loader

rounded

boolean

Corner style

Default: false

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

aspectRatio

AspectRatio

objectFit

"none" | "contain" | "fill" | "cover" | "scale-down"

Default: "contain"

label

ReactNode

icon

ReactNode

CardContent
CardLink

inline

boolean

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

external

boolean

Indicates that the link goes to an external site

centerIcons

boolean

visuallyHiddenContent

ReactNode

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

CardButton

block

boolean

If set to `false` component renders with `width : auto`, otherwise `width : full`.

icon

ReactNode

loading

boolean

If set to `true`, disables the button and shows a `Spinner` component in place of the child content.

variant

"text" | "icon" | "textSecondary"

iconPosition

"end" | "start"