ContentCard

The ContentCard is a non-interactive layout container card that can hold interactive elements such as buttons and links. It supports optional primary and secondary action buttons.

Import

React

// with @dhl-official/react-library:
import { DhlContentCard } from "@dhl-official/react-library"

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

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-content-card></dhl-content-card>

Vue.js

// with @dhl-official/vue-library:
import { DhlContentCard } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlContentCard } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlContentCard
  primaryActionLabel="Main Action"
  secondaryActionLabel="Secondary Action"
>
  <DhlText slot="header">Card Header</DhlText>
  <DhlText>Card content goes here.</DhlText>
</DhlContentCard>

Angular

<dhl-content-card
  primary-action-label="Main Action"
  secondary-action-label="Secondary Action"
>
  <dhl-text slot="header">Card Header</dhl-text>
  <dhl-text>Card content goes here.</dhl-text>
</dhl-content-card>

Vue.js

<dhl-content-card
  primary-action-label="Main Action"
  secondary-action-label="Secondary Action"
>
  <dhl-text slot="header">Card Header</dhl-text>
  <dhl-text>Card content goes here.</dhl-text>
</dhl-content-card>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
dataAriaLabel	data-aria-label	An 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.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	`dhl-content-card-${getRandomString()}`
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
dataTracking	data-tracking	An optional data tracking prop for the component.	string	undefined
primaryActionLabel	primary-action-label	An optional label for the primary action button. When provided, renders an outline-black button.	string	undefined
secondaryActionLabel	secondary-action-label	An optional label for the secondary action button. When provided, renders a text variant button.	string	undefined
showBorder	show-border	An optional prop to show component border.	boolean	true
textAlign	text-align	An optional prop to set the text alignment of the card content.	"center" | "left"	DHL_CONTENT_CARD.TEXT_ALIGN.LEFT

Events

Event	Description	Type
primaryAction	Fires when the primary action button is clicked.	CustomEvent<MouseEvent>
secondaryAction	Fires when the secondary action button is clicked.	CustomEvent<MouseEvent>

Slots

Slot	Description
"footer"	used for elements intended to be positioned as the DhlContentCard footer
"header"	used for elements intended to be positioned as the DhlContentCard header
"image"	used to supply image elements for display within the DhlContentCard
"unnamed"	unnamed children slot for DhlContentCard content

Dependencies

Depends on

• dhl-card
• dhl-button

Graph

---

Built by DHL User Interface Library Team!