Headline

Headline is used for titling major sections of the interface. They help better organize the information for our users providing useful labels for each possible section.

Import

React

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

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

Angular

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

<dhl-headline></dhl-headline>

Vue.js

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

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

Usage

Change the headline tag and size

You can use the props

• tag to change the tag in the DOM
• designLevel to change the font size and line heights

Guidelines

Nest headings by their rank (or level). The most important heading has rank 1 (h1), the least important heading rank 6 (h6). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher-ranked section.

Skipping heading ranks can be confusing and should be avoided where possible: Ensure that an h2 is not followed directly by an h4, for example. It is ok to skip ranks when closing subsections, for instance, an h2 beginning a new section can follow an h4 as it closes the previous section.

Learn more about headings

• Do position the headline above the content
• Do not skip the headline ranks
• Do not combine variant="black" and fontStretch="normal"

Code

React

<DhlHeadline tag="h3">Example Text</DhlHeadline>

Angular

<dhl-headline tag="h3" color="red">Example Text</dhl-headline>

Vue.js

<dhl-headline tag="h3">Example Text</dhl-headline>

Interactive Demo

Migrating from DUIL 1.0

• Rename fontStretch to stretch

Readme

Properties

Property	Attribute	Description	Type	Default
color	color	An optional prop, used to set the color of the component.	"black" \| "default" \| "red" \| "white"	DHL_HEADLINE.COLOR.DEFAULT
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-headline-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
designLevel	design-level	An optional prop. Defines which font sizes and line heights are used.	1 \| 2 \| 3 \| 4 \| 5	DHL_HEADLINE.DESIGN_LEVEL[1]
inlined	inlined	An optional prop. If inlined, it will set the headline to inline-block otherwise it will set to block and 100% width.	boolean	false
noMargin	no-margin	An optional prop. Removes the margin from the bottom of the component.	boolean	false
stretch	stretch	An optional prop used to set the font-stretch property of the component.	"condensed" \| "normal"	DHL_HEADLINE.STRETCH.CONDENSED
tag	tag	An optional prop. Defines which headline tag to use. (h1-h6). For a special case in which the element should not appear semantically as a headline, but should still get rendered in the same layout, it can additionally be rendered as a <p> tag.	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"	DHL_HEADLINE.TAG.H1
textAlign	text-align	An optional prop. If set, it aligns the text to the desired side, if not set, the setting is inherited from the parent.	"center" \| "left" \| "right"	DHL_HEADLINE.TEXT_ALIGN.LEFT
textTransform	text-transform	An optional prop. Defines the text transform, e.g. to capitalize the content.	"capitalize" \| "lowercase" \| "none" \| "uppercase"	DHL_HEADLINE.TEXT_TRANSFORM.NONE
variant	variant	An optional prop. Defines the headlines' font-weight.	"black" \| "light"	DHL_HEADLINE.VARIANT.BLACK

Dependencies

Used by

• dhl-copy-text
• dhl-global-validation
• dhl-illustrated-validation
• dhl-page-headline
• dhl-panel
• dhl-stage
• dhl-stage-action-box
• dhl-stage-tiles

Graph

---

Built by DHL User Interface Library Team!