Skip to main content

StageTiles

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 tilesHalf, or tilesFull.
The StageTiles component is not meant to be used as a standalone component. Using it as a such may result in unexpected behaviours.

StageTiles component is used to display a list of tiles, which can be used to link to other content.

Import

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

Code​

<DhlStageTiles tilesData={[
  {
    "image": {
      "alt": "Image alt text0",
      "src": "/assets/images/Stage_Image_Small_Square-4b3c148b6c07c21f831e08339a668763.jpg"
    },
    "headlineColor": "white",
    "link": {
      "ariaLabel": "ariaLabel0",
      "dataTestid": "tileLink-0-cy",
      "href": "http://www.example.com/0"
    },
    "mainHeadlineTag": "h2",
    "mainHeadlineText": "mainHeadlineText 0",
    "pseudoLinkText": "ariaLabel0",
    "pseudoLinkVariant": "white",
    "upperHeadlineTag": "p",
    "upperHeadlineText": "upperHeadlineText 0"
  },
  {
    "image": {
      "alt": "Image alt text1",
      "src": "/assets/images/Stage_Image_Small-fb21844ba2f592623e05e741ccbf5cba.jpg"
    },
    "headlineColor": "white",
    "link": {
      "ariaLabel": "ariaLabel1",
      "dataTestid": "tileLink-1-cy",
      "href": "http://www.example.com/1"
    },
    "mainHeadlineTag": "h2",
    "mainHeadlineText": "mainHeadlineText 1",
    "pseudoLinkText": "ariaLabel1",
    "pseudoLinkVariant": "white",
    "upperHeadlineTag": "p",
    "upperHeadlineText": "upperHeadlineText 1"
  },
  {
    "image": {
      "alt": "Image alt text2",
      "src": "/assets/images/Stage_Image@0,5x-0ba523f1c7eff7fab8e753af2c811a17.jpg"
    },
    "headlineColor": "white",
    "link": {
      "ariaLabel": "ariaLabel2",
      "dataTestid": "tileLink-2-cy",
      "href": "http://www.example.com/2"
    },
    "mainHeadlineTag": "h2",
    "mainHeadlineText": "mainHeadlineText 2",
    "pseudoLinkText": "ariaLabel2",
    "pseudoLinkVariant": "white",
    "upperHeadlineTag": "p",
    "upperHeadlineText": "upperHeadlineText 2"
  }
]} />

Interactive Demo​

Tiles Half Variant​

Tiles Full Variant​

Migrating from DUIL 1.0​

  • mainHeadlineText now only supports string
  • pseudoLinkText now only supports string
  • upperHeadlineText now only supports string

Readme​

Properties​

PropertyAttributeDescriptionTypeDefault
stageVariantstage-variantAn optional prop used to set the variant of tiles in a dhl-stage component."tilesFull" \| "tilesHalf"DHL_STAGE_TILES.STAGE_VARIANT.TILES_FULL
tilesData--An 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 consistencyDhlStageTilesDataType[][]

Dependencies​

Depends on​

Graph​

Built by DHL User Interface Library Team!