Stage

The Stage component is used to quickly scaffold brand-compliant web pages with support for background images and organised content.

Import

React

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

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

Code

React

<DhlStage dataId="stage" mainHeadlineText="main headline text">
  Stage content
</DhlStage>

Angular

<dhl-stage dataId="pageHeadline" mainHeadlineText="main headline text">
  Stage content
</dhl-stage>

Vue.js

<DhlStage dataId="pageHeadline" mainHeadlineText="main headline text">
  Stage content
</DhlStage>

Interactive Demo

Copy Center

Copy Left

Copy Intro

Readme

dhl-stage-tiles

Properties

Property	Attribute	Description	Type	Default
stageVariant	--	An optional prop used to set the variant of Tiles in a Stage context	never	undefined
tilesData	--	A optional prop used to set the values and data for a Tile. Please note: This component is intended to be used with 1-3 teasers to align with the intended visual layout and maintain stylistic consistency	DhlStageTilesDataType[]	[]

Dependencies

Depends on

• dhl-grid-container
• dhl-grid-cell
• dhl-headline

Graph

---

The DUIL - Built with love...