NICE Design System home

Page Header

Give a clear introduction and explain the content of a page.

Welcome to the page

When to use

Use the page header component to give a clear introduction to a page and explain the content of a page.

When not use

Don't use multiple page headers on one page or place a page header at the top of a smaller container like a panel, body copy, or accordion.

How to use

Use underneath the breadcrumb inside a container and above the main content. Use a clear, short title and a concise intro to the page's contents.

Page header variants

Heading

Welcome to the page

React
HTML

_10
<PageHeader heading="Welcome to the page" />

Pre-heading

Here's a pre-headingWelcome to the page

React
HTML

_10
<PageHeader heading="Welcome to the page" preheading="Here's a pre-heading" />

Lead

Welcome to the page

This is the lead

React
HTML

_10
<PageHeader heading="Welcome to the page" lead="This is the lead" />

Metadata

Welcome to the page

  • Item 1
  • Item 2
React
HTML

_10
<PageHeader heading="Welcome to the page" metadata={["Item 1", "Item 2"]} />

Call-to-action

Welcome to the page

React
HTML

_10
<PageHeader
_10
heading="Welcome to the page"
_10
cta={<Button>Do something</Button>}
_10
/>

Header with description

Header with description

I am a description
React
HTML

_10
<PageHeader
_10
heading="Header with description"
_10
description="I am a description"
_10
/>

Header with breadcrumbs

Header with breadcrumbs

React
HTML

_10
<PageHeader
_10
heading="Header with breadcrumbs"
_10
breadcrumbs={addBreadcrumbsComponentHere}
_10
/>

Full width light variant

I am a full width light header!

React
HTML

_10
<PageHeader
_10
heading="I am a full width light header!"
_10
variant="fullWidthLight"
_10
/>

Full width dark variant

I am a full width dark header!

React
HTML

_10
<PageHeader
_10
heading="I am a full width dark header!"
_10
variant="fullWidthDark"
_10
/>

Header with second section

There's a second section here!

React
HTML

_10
<PageHeader
_10
heading="There's a second section here!"
_10
variant="fullWidthLight"
_10
secondSection={secondSectionComponent}
_10
/>

Accessibility

Component meets WCAG AA guidelines for accessibility on:

  • Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
  • UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
  • Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research and evidence

No research done on the component at this time

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.