PageHeadline

DhlPageHeadline's are 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 { DhlPageHeadline } from "@dhl-official/react-library"

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

Angular

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

<dhl-page-headline></dhl-page-headline>

Vue.js

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

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

Code

React

<DhlPageHeadline>
  Page headline content
  <span slot="subHeadline">Page sub headline content</span>
</DhlPageHeadline>

Angular

<dhl-page-headline>
  Page headline content
  <span slot="subHeadline">Page sub headline content</span>
</dhl-page-headline>

Vue.js

<dhl-page-headline>
  Page headline content
  <span slot="subHeadline">Page sub headline content</span>
</dhl-page-headline>

Usage

Default PageHeadline

• By default PageHeadlines are left aligned

Change the PageHeadline alignment

• You can use the prop textAlign to change the alignment of the Headlines
• By default headlines are left aligned

Transform the PageHeadline text

• You can use the props mainHeadlineTextTransform & subHeadlineTextTransform to transform the text of the headlines
• By default, headlines are in upper case

Change the PageHeadline tag

• You can use the props mainHeadlineTag and subHeadlineTag to change the tag in the DOM
• By default main headline tag is h1 and sub headline tag is h2

Note: You can only change the tags but not its presentational size

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

Migrating from DUIL 1.0

• Remove mainHeadlineContent, the content to be passed as children of the component
• Remove subHeadlineContent, the content to be passed as children to the named slot subHeadline
• Add hasSubHeadline to mention if the sub heading content is passed
• Remove marginBottom

Readme

Properties

Property	Attribute	Description	Type	Default
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-page-headline-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
hasSubHeadline	has-sub-headline	This is an optional prop. To mention if it has content for sub headline	boolean	false
mainHeadlineColor	main-headline-color	An optional prop used to set the color of the component main headline.	"black" \| "default" \| "red" \| "white"	DHL_PAGE_HEADLINE.MAIN_HEADLINE_COLOR.RED
mainHeadlineTag	main-headline-tag	This is 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_PAGE_HEADLINE.MAIN_HEADLINE_TAG.H1
mainHeadlineTextTransform	main-headline-text-transform	This is an optional prop. Text-transform state of the main headline	"capitalize" \| "lowercase" \| "none" \| "uppercase"	DHL_PAGE_HEADLINE.MAIN_HEADLINE_TEXT_TRANSFORM.UPPERCASE
subHeadlineColor	sub-headline-color	This is an optional prop. Color of the main headline color.	"black" \| "default" \| "red" \| "white"	DHL_PAGE_HEADLINE.SUBHEADLINE_COLOR.RED
subHeadlineTag	sub-headline-tag	An optional prop used to set the heading tag of the subHeadline.	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"	DHL_PAGE_HEADLINE.SUBHEADLINE_TAG.H2
subHeadlineTextTransform	sub-headline-text-transform	This is an optional prop. Text-transform state of the sub headline	"capitalize" \| "lowercase" \| "none" \| "uppercase"	DHL_PAGE_HEADLINE.SUBHEADLINE_TEXT_TRANSFORM.UPPERCASE
textAlign	text-align	An optional prop. If set, it aligns the text to the desired side.	"center" \| "left" \| "right"	undefined

Slots

Slot	Description
"subHeadline"	used to supply subHeadline text
"unnamed"	unnamed children used to supply Headline text

Dependencies

Depends on

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

Graph

---

Built by DHL User Interface Library Team!