Box

The Box component is the primary wrapper for grouping content. It uses a synchronized semantic scale and a strict 4px/8px grid for visual rhythm and pixel-perfect rendering. Backgrounds, padding, and corner radius are all driven by design tokens.

Import

React

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

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

Angular

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

<dhl-box></dhl-box>

Vue.js

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

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

Code

React

<DhlBox variant="primary" padding="standard" radius="standard">
  <DhlHeadline designLevel="4" noMargin>Box heading</DhlHeadline>
  <DhlText>Box content</DhlText>
</DhlBox>

Angular

<dhl-box variant="primary" padding="standard" radius="standard">
  <dhl-headline design-level="4" no-margin>Box heading</dhl-headline>
  <dhl-text>Box content</dhl-text>
</dhl-box>

Vue.js

<dhl-box variant="primary" padding="standard" radius="standard">
  <dhl-headline design-level="4" :no-margin="true">Box heading</dhl-headline>
  <dhl-text>Box content</dhl-text>
</dhl-box>

Layering

Every page begins with --dui-colors-background-base as the canvas. The box's variant prop selects the surface that sits on that canvas:

variant	Background token	Use
primary	--dui-colors-background-primary	Main boxes sitting on the page base
secondary	--dui-colors-background-secondary	Nested boxes / internal grouping
tertiary	--dui-colors-background-tertiary	Deeper nested grouping
brand	--dui-colors-background-functional-post-yellow	Brand-specific highlight surface

Spacing tokens

padding	Token	Value
extra-roomy	--dui-box-padding-extra-roomy	40px
roomy	--dui-box-padding-roomy	32px
relaxed	--dui-box-padding-relaxed	24px
standard	--dui-box-padding-standard	16px
compact	--dui-box-padding-compact	12px
tight	--dui-box-padding-tight	8px
extra-tight	--dui-box-padding-extra-tight	4px
none	--dui-box-padding-none	0px

Radius tokens

radius	Token	Value
display	--dui-box-radius-display	32px
hero	--dui-box-radius-hero	24px
standard	--dui-box-radius-standard	16px
compact	--dui-box-radius-compact	12px
tight	--dui-box-radius-tight	8px

Concentric nesting

When boxes are nested, choose the inner radius so the inner corner stays concentric with the outer corner:

inner_radius = outer_radius − inner_padding

For example, an outer box with radius="hero" (24px) and padding="tight" (8px) wrapping an inner box produces a concentric corner when the inner radius="standard" (16px), since 16 = 24 − 8.

React

<DhlBox variant="secondary" padding="tight" radius="hero">
  <DhlBox variant="primary" padding="standard" radius="standard">
      <DhlText>Inner content</DhlText>
  </DhlBox>
</DhlBox>

Angular

<dhl-box variant="secondary" padding="tight" radius="hero">
  <dhl-box variant="primary" padding="standard" radius="standard">
      <dhl-text>Inner content</dhl-text>
  </dhl-box>
</dhl-box>

Vue.js

<dhl-box variant="secondary" padding="tight" radius="hero">
  <dhl-box variant="primary" padding="standard" radius="standard">
      <dhl-text>Inner content</dhl-text>
  </dhl-box>
</dhl-box>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
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-box-${getRandomString()}`
dataRole	data-role	An optional prop defining the role attribute of the component.	string	undefined
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
padding	padding	An optional prop defining the inner padding of the box using the 4px/8px grid spacing tokens.	"compact" | "extra-roomy" | "extra-tight" | "none" | "relaxed" | "roomy" | "standard" | "tight"	DHL_BOX.PADDING.STANDARD
radius	radius	An optional prop defining the corner radius of the box.	"compact" | "display" | "hero" | "standard" | "tight"	DHL_BOX.RADIUS.STANDARD
tag	tag	An optional prop defining the rendered semantic HTML tag.	"article" | "aside" | "div" | "section"	DHL_BOX.TAG.DIV
variant	variant	An optional prop defining the background variant of the box. primary sits on the page base, secondary/tertiary are for nested or internal grouping, and brand uses the post-yellow functional highlight.	"brand" | "primary" | "secondary" | "tertiary"	DHL_BOX.VARIANT.PRIMARY

Slots

Slot	Description
"unnamed"	unnamed children slot for DhlBox content

---

Built by DHL User Interface Library Team!