StageNumbers

caution

This component is intended to be used as a direct child of the Stage component.
The Stage component must be set with its stageVariant prop set to numbers.
The StageNumbers component is not meant to be used as a standalone component. Using it as a such may result in unexpected behaviours.

StageNumbers component is used to display a list of numbers with a description.

Import

React

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

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

Angular

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

<dhl-stage-numbers></dhl-stage-numbers>

Vue.js

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

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

Code

React

<DhlStageNumbers numbersData={[
  {
    "number": "50%",
    "text": "Increase our carbon efficiency"
  },
  {
    "number": "70%",
    "text": "Reduce local air pollution emissions"
  },
  {
    "number": "50%",
    "text": "Sales incorporate Green Solutions"
  },
  {
    "number": "80%",
    "text": "Employees as GoGreen specialists"
  }
]} />

Angular

<dhl-stage-numbers numbersData='[
  {
    "number": "50%",
    "text": "Increase our carbon efficiency"
  },
  {
    "number": "70%",
    "text": "Reduce local air pollution emissions"
  },
  {
    "number": "50%",
    "text": "Sales incorporate Green Solutions"
  },
  {
    "number": "80%",
    "text": "Employees as GoGreen specialists"
  }
]' />

Vue.js

<dhl-stage-numbers numbersData='[
  {
    "number": "50%",
    "text": "Increase our carbon efficiency"
  },
  {
    "number": "70%",
    "text": "Reduce local air pollution emissions"
  },
  {
    "number": "50%",
    "text": "Sales incorporate Green Solutions"
  },
  {
    "number": "80%",
    "text": "Employees as GoGreen specialists"
  }
]' />

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
numbersData	--	An REQUIRED prop to pass the data to be rendered	{ number: string; text: string; }[]	undefined

Dependencies

Depends on

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

Graph

---

Built by DHL User Interface Library Team!