ActionCard

The ActionCard is an interactive card component where the entire surface acts as a single hit area. It is reachable via Tab key and triggerable via Enter/Space. It should not contain nested interactive elements.

Import

React

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

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

Angular

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

<dhl-action-card></dhl-action-card>

Vue.js

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

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

Code

React

<DhlActionCard
  dataAriaLabel="Action card"
  onCardClick={() => console.log('clicked')}
>
  <DhlText slot="header">Card Header</DhlText>
  <DhlText>Card content goes here.</DhlText>
</DhlActionCard>

Angular

<dhl-action-card
  data-aria-label="Action card"
  (cardClick)="onClick($event)"
>
  <dhl-text slot="header">Card Header</dhl-text>
  <dhl-text>Card content goes here.</dhl-text>
</dhl-action-card>

Vue.js

<dhl-action-card
  data-aria-label="Action card"
  @cardClick="onClick"
>
  <dhl-text slot="header">Card Header</dhl-text>
  <dhl-text>Card content goes here.</dhl-text>
</dhl-action-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-action-card-${getRandomString()}`
dataRole	data-role	An optional prop defining the semantic role of the card. Use "link" when the card navigates to another page, "button" when it triggers an action.	"button" | "link"	DHL_ACTION_CARD.ROLE.BUTTON
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
href	href	An optional href prop. When provided, the card acts as a link. This automatically sets the role to "link".	string	undefined
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
target	target	An optional target prop for the link. Only applicable when href is provided.	string	undefined
textAlign	text-align	An optional prop to set the text alignment of the card content.	"center" | "left"	DHL_ACTION_CARD.TEXT_ALIGN.LEFT

Events

Event	Description	Type
cardClick	Fires when the card is clicked.	CustomEvent<MouseEvent>

Slots

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

Dependencies

Depends on

• dhl-card

Graph

---

Built by DHL User Interface Library Team!