Skip to main content

Card

The Card component is a flexible and extensible container used to display content.

Import

// with @dhl-official/react-library:
import { DhlCard } from "@dhl-official/react-library"
// with @dhl-official/ui-libraries/react-library:
import { DhlCard } from "@dhl-official/ui-libraries/react-library"

Code​

<DhlCard>
  <img
    slot="image"
    src={img320x200}
    width="100%"
    style={{ display: "block" }}
    alt="A 320x200 sample yellow image"
  />    
  <DhlHeadline slot="header" designLevel="4" noMargin>
    Header
  </DhlHeadline>
  <DhlText>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur.
  </DhlText>
  <div slot="footer">
    <DhlButton>Button</DhlButton>
  </div>
</DhlCard>

Interactive Demo​

Variants​

Basic Card​

A Card component without a header or footer slot supplied.

<DhlCard>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  parturient montes, nascetur.
</DhlCard>
lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

To apply correct stylings, ensure that the header and footer slots are supplied.

<DhlCard>
  <DhlHeadline slot="header" designLevel="4" noMargin>
    Header
  </DhlHeadline>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  parturient montes, nascetur.
  <div slot="footer">
    <DhlButton>Button</DhlButton>
  </div>
</DhlCard>
headerlorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur.
button

Card with an image in body​

<DhlCard>
  <DhlHeadline slot="header" designLevel="4" noMargin>
    Header
  </DhlHeadline>
  <img
    src={img320x200}
    width="100%"
    style={{ display: "block" }}
    alt="A 320x200 sample yellow image"
  />    
  <DhlText>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur.
  </DhlText>
  <div slot="footer">
    <DhlButton>Button</DhlButton>
  </div>
</DhlCard>
headera 320x200 sample yellow imagelorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur.
button

Card with an image overlay​

<DhlCard imgOverlay={true}>
  <img
    slot="image"
    src={img320x200}
    width="100%"
    style={{ display: "block" }}
    alt="A 320x200 sample yellow image"
  />    
  <DhlHeadline slot="header" designLevel="4" noMargin>
    Header
  </DhlHeadline>
  <DhlText>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur.
  </DhlText>
  <div slot="footer">
    <DhlButton>Button</DhlButton>
  </div>
</DhlCard>
a 320x200 sample yellow imageheaderlorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur.
button

Accessibility​

If you use aria-label on Card, please also provide a useful role via dataRole.

Migrating from DUIL 1.0​

  • Compound components e.g. Card.Header are now defined through slots (see docs)
  • Add dataTestid

Readme​

Properties​

PropertyAttributeDescriptionTypeDefault
dataAriaDescribedbydata-aria-describedbyAn optional prop defining the list of reference IDs (separated by spaces), recommended when you want to an error message on your field.stringundefined
dataAriaLabeldata-aria-labelAn optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.stringundefined
dataClassNamedata-class-nameAn optional class name prop for the component.stringundefined
dataIddata-idAn optional prop. Gives a valid HTML ID attribute value for the component.stringdhl-card-${getRandomString()}
dataRoledata-roleAn optional prop defining the role attribute of the component.stringundefined
dataTestiddata-testidAn optional prop. The test id attached to the component as a data-testid attribute.stringundefined
imgOverlayimg-overlayAn optional prop to be set when an image within the card should overlay the card.booleanfalse
tagtagAn optional tag prop for the Card component - use this prop when grouping cards for accessibility & semantic html."div" \| "li"DHL_CARD.TAG.DIV

Slots​

SlotDescription
"footer"used for elements intended to be positioned as the DhlCard footer
"header"used for elements intended to be positioned as the DhlCard header
"image"used to supply <img> elements for display within the DhlCard
"unnamed"unnamed children slot for DhlCard content

Dependencies​

Used by​

Graph​

Built by DHL User Interface Library Team!