StageActionBox

caution

This component is intended to be used as a direct child of the Stage component.
Using it as a such may result in unexpected behaviours.

StageActionBox is used to display a call to action box with a button.

Import

React
Angular
Vue.js

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

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

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

<dhl-stage-action-box></dhl-stage-action-box>

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

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

Code

React
Angular
Vue.js

<DhlStageActionBox
  headlinePriority="h2"    
  icon={VolumeHigh}
  link={{
  "ariaLabel": "Download now",
  "dataTestid": "actionboxLink-cy",
  "href": "http://www.example.com",
  "target": "_blank",
  "children": "Download now"
}}
>
  Content
  <span slot="headline">
    slot headline content
  </span>
  <span slot="subline">
    slot subline content
  </span>
  <span slot="stageLink">
    slot stageLink content
  </span>
</DhlStageActionBox>

<dhl-stage-action-box
  headlinePriority="h2"
  icon="assets/duil/icons/volume-high.svg"
  link='{
  "ariaLabel": "Download now",
  "dataTestid": "actionboxLink-cy",
  "href": "http://www.example.com",
  "target": "_blank",
  "children": "Download now"
}'>
  Content
  <span slot="headline">
    slot headline content
  </span>
  <span slot="subline">
    slot subline content
  </span>
  <span slot="stageLink">
    slot stageLink content
  </span>
</dhl-stage-action-box>

<dhl-stage-action-box
  headlinePriority="h2"
  :icon="VolumeHigh"
  :link.prop='{
  "ariaLabel": "Download now",
  "dataTestid": "actionboxLink-cy",
  "href": "http://www.example.com",
  "target": "_blank",
  "children": "Download now"
}'
>
  Content
  <span slot="headline">
    slot headline content
  </span>
  <span slot="subline">
    slot subline content
  </span>
  <span slot="stageLink">
    slot stageLink content
  </span>
</dhl-stage-action-box>

Interactive Demo (in the context of `Stage`)

Migrating from DUIL 1.0

headline prop changed to use named slot headline
subline prop changed to use named slot subline
icon prop now expects an icon relative or data path
Link content is rendered in named slot stageLink

Readme

Properties

Property	Attribute	Description	Type	Default
`headlinePriority`	`headline-priority`	optional headline priority	`"h1" \\| "h2" \\| "h3" \\| "h4" \\| "h5" \\| "h6" \\| "p"`	`DHL_HEADLINE.TAG.P`
`icon`	`icon`	optional icon value, see dhl-icon component for more details.	`string`	`undefined`
`link`	--	optional call to action configuration - see dhl-link component for detailed prop documentation	`DhlLink & { ariaLabel: string; }`	`undefined`

Slots

Slot	Description
`"headline"`	it must hold text content to be used as headline. Its content is wrapped around a dhl-headline component
`"stageLink"`	it must hold text content to be used as a text for a dhl-link component. Its content is wrapped around a dhl-link component. If the prop `link` is not set, this slot is not rendered into the component.
`"subline"`	it must hold text content to be used as sub-headline. Its content is wrapped around a dhl-text component

Dependencies

Depends on

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo (in the context of Stage)​

Migrating from DUIL 1.0​

Readme​

Properties​

Slots​

Dependencies​

Depends on​

Graph​