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>

header

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.

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>

header

a 320x200 sample yellow image

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.

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 image

header

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.

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.string`dhl-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
highlightStatehighlight-stateAn optional prop to highlight card state.Variants.error | Variants.successundefined
imgOverlayimg-overlayAn optional prop to be set when an image within the card should overlay the card.booleanfalse
menuButtonColorVariantmenu-button-color-variantAn optional prop to set color variant for menu button.Variants.dark | Variants.lightDHL_CARD.MENU_BUTTON_COLOR_VARIANT.DARK
showMenuButtonshow-menu-buttonAn optional prop to display menu button. Content for the menu should be passed under the <slot="menu" />.booleanfalse
sizesizeAn optional size prop for the component."md" | "sm"DHL_CARD.SIZE.MD
tabindextabindexAn optional prop to control the focusability of the card. Set to 0 to make the card keyboard-focusable, -1 to make it programmatically focusable, or leave undefined (default) to make it non-focusable. Only set this when the card itself is interactive (e.g., clickable).numberundefined
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
"menu"used for elements intended to be positioned as the DhlCard menu
"unnamed"unnamed children slot for DhlCard content

Dependencies​

Used by​

Depends on​

Graph​

Built by DHL User Interface Library Team!