Stage

The Stage component is used to quickly scaffold brand-compliant web pages with support for background images and organised content.
The component can be combined with a set of other components to create different variants and layouts:

• stage action box
• stage intro
• stage numbers
• stage tiles

Import

React

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

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

Angular

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

<dhl-stage></dhl-stage>

Vue.js

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

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

Code

React

<DhlStage 
  imageAlt="Alt text"
  pictureSources={[
  {
    srcSet: 'https://via.placeholder.com/1024',
    media: '(min-width: 1024px)'
  },
  {
    srcSet: 'https://via.placeholder.com/768',
    media: '(min-width: 768px)'
  }
  ]}
>
  Stage content
</DhlStage>

Angular

<dhl-stage 
  imageAlt="Alt text"
  [pictureSources]="[
    {
      srcSet: 'https://via.placeholder.com/1024',
      media: '(min-width: 1024px)'
    },
    {
      srcSet: 'https://via.placeholder.com/768',
      media: '(min-width: 768px)'
    }
  ]"
>
  Stage content
</dhl-stage>

Vue.js

<dhl-stage
  imageAlt="Alt text" 
  pictureSources={[
  {
    srcSet: 'https://via.placeholder.com/1024',
    media: '(min-width: 1024px)'
  },
  {
    srcSet: 'https://via.placeholder.com/768',
    media: '(min-width: 768px)'
  }
  ]}
>
  Stage content
</dhl-stage>

Interactive Demo

Copy Center

Copy Left

Migrating from DUIL 1.0

• Stage.Actionbox changed to dhl-stage-action-box
• Stage.Intro changed to dhl-stage-intro
• Stage.Numbers changed to dhl-stage-numbers
• Stage.Tiles changed to dhl-stage-tiles
• Remove Stage.AddShipmentLink
• Remove Stage.TrackingBar, use dhl-tracking-bar with margin: var(--dui-size-space-8x) 0;
• stageLink content is rendered in named slot link
• stageCopyText only supports string
• upperHeadlineText only supports string
• mainHeadlineText only supports string
• When rendering numbers variant, the DhlStageNumbers have to be rendered twice, once as direct children and in named slot numbers to achieve responsiveness for larger screens

Readme

Properties

Property	Attribute	Description	Type	Default
contentAlignment	content-alignment	An optional prop used for the core content elements of the stage For specific variants, the content alignment must be chosen as follows: - Actionbox: left - Intro: center - Numbers: center	Orientation.center \| Orientation.left \| Orientation.right	DHL_STAGE.CONTENT_ALIGNMENT.CENTER
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-stage-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
imageAlt	image-alt	A REQUIRED prop used to provide the component default image alternative text value. The default image alt attribute value is set to the HTML img tag child of an HTML picture tag	string	undefined
imageSrc	image-src	An optional prop used to provide the component default image source value. The default image src attribute value is set to the HTML img tag child of an HTML picture tag	string	undefined
mainHeadlineColor	main-headline-color	An optional prop used to set the color of the component main headline.	"black" \| "default" \| "red" \| "white"	DHL_STAGE.MAIN_HEADLINE_COLOR.DEFAULT
mainHeadlinePriority	main-headline-priority	An optional prop used to set the priority of the component main headline	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"	DHL_STAGE.MAIN_HEADLINE_PRIORITY.H2
mainHeadlineText	main-headline-text	An optional prop used to provide copy text situated below the component main headline	string	undefined
pictureSources (required)	--	A REQUIRED prop used to provide the component's html source tag attributes srcset and media values.	{ media: string; srcSet: string; }[]	undefined
stageCopyText	stage-copy-text	An optional prop used to provide copy text	string	undefined
stageLink	--	An optional prop used to setup the dhl-link component. The dhl-link variant prop is hardcoded to primary.	{ ariaLabel?: string; dataTestid?: string; dataTracking?: string; href: string; clickEvent?: (e: MouseEvent) => null; rel?: string; target?: string; }	undefined
stageVariant	stage-variant	An optional prop used to set the component's variant.	"actionBox" \| "copy" \| "intro" \| "numbers" \| "tilesFull" \| "tilesHalf" \| "tracking"	DHL_STAGE.STAGE_VARIANT.COPY
upperHeadlineColor	upper-headline-color	optional prop used to set the color of the component upper headline	"black" \| "default" \| "red" \| "white"	DHL_STAGE.UPPER_HEADLINE_COLOR.DEFAULT
upperHeadlinePriority	upper-headline-priority	An optional prop used to set the priority of the component upper headline	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"	DHL_STAGE.UPPER_HEADLINE_PRIORITY.H1
upperHeadlineText	upper-headline-text	An optional prop used to provide copy text situated below the component upper headline	string	undefined

Dependencies

Depends on

• dhl-grid-container
• dhl-grid-cell
• dhl-headline
• dhl-text
• dhl-link

Graph

---

Built by DHL User Interface Library Team!