Skip to main content

Page header

BETA
A page header defines the top of the page content and is a consistent way to show page context, key actions and secondary navigation.

Component demo

Interactive example

Latte recipe

BETA
A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.
<ic-page-headerheading="Latte recipe"
subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. "
reverseOrder>
<ic-chipslot="heading-adornment"label="BETA"size="large"/>
<ic-buttonslot="actions"variant="primary">
Create coffee
</ic-button>
<ic-buttonslot="actions"variant="tertiary">
Filter coffee
</ic-button>
<ic-stepperslot="stepper">
<ic-stepstepTitle="Warm kettle"stepType="completed"/>
<ic-step
stepTitle="Warm milk"
stepSubtitle="Optional"
stepType="completed"
/>
<ic-stepstepTitle="Pour milk"stepType="current"/>
</ic-stepper>
<ic-text-field
slot="input"
placeholder="Search for ingredients…"
label="Input"
hideLabel
/>
</ic-page-header>

Page header details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property aligned
Attribute aligned

The alignment of the page header.

type: "center" | "full-width" | "left"
"left"
Property border
Attribute border

Iftrue , a border will be displayed along the bottom of the page header.

type: boolean
true
Property heading
Attribute heading

The title to render on the page header.

type: string
Property reverseOrder
Attribute reverse-order

Iftrue , the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.

type: boolean
false
Property size
Attribute size

The size of the page header component.

type: "default" | "small"
"default"
Property small
Attribute small
This prop should not be used anymore. Set prop `size` to "small" instead.
Deprecated
false
Property sticky
Attribute sticky

Iftrue , the page header will be sticky at all breakpoints.

type: boolean
false
Property stickyDesktopOnly
Attribute sticky-desktop-only

Iftrue , the page header will only be sticky for viewport widths of 992px and above.

type: boolean
false
Property subheading
Attribute subheading

The subtitle to render on the page header.

type: string
Property aligned
Attribute aligned

The alignment of the page header.

type: "center" | "full-width" | "left"
Default: "left"
Property border
Attribute border

Iftrue , a border will be displayed along the bottom of the page header.

type: boolean
Default: true
Property heading
Attribute heading

The title to render on the page header.

type: string
Property reverseOrder
Attribute reverse-order

Iftrue , the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.

type: boolean
Default: false
Property size
Attribute size

The size of the page header component.

type: "default" | "small"
Default: "default"
Property small
Attribute small
This prop should not be used anymore. Set prop `size` to "small" instead.
Deprecated
Default: false
Property sticky
Attribute sticky

Iftrue , the page header will be sticky at all breakpoints.

type: boolean
Default: false
Property stickyDesktopOnly
Attribute sticky-desktop-only

Iftrue , the page header will only be sticky for viewport widths of 992px and above.

type: boolean
Default: false
Property subheading
Attribute subheading

The subtitle to render on the page header.

type: string

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot actions
Content will be rendered in the action area, adjacent to the title area.
Slot breadcrumbs
Content will be rendered in the breadcrumb area, above the title and action areas.
Slot heading
Content will be rendered in the title area, in place of the heading.
Slot heading-adornment
Content will be rendered in the title area, adjacent to the heading.
Slot input
Content will be rendered in the input area, below the title area and adjacent to the action area.
Slot stepper
Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.
Slot subheading
Content will be rendered in the title area, in place of the subheading.
Slot tabs
Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.
Slot actions
Content will be rendered in the action area, adjacent to the title area.
Slot breadcrumbs
Content will be rendered in the breadcrumb area, above the title and action areas.
Slot heading
Content will be rendered in the title area, in place of the heading.
Slot heading-adornment
Content will be rendered in the title area, adjacent to the heading.
Slot input
Content will be rendered in the input area, below the title area and adjacent to the action area.
Slot stepper
Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.
Slot subheading
Content will be rendered in the title area, in place of the subheading.
Slot tabs
Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.

CSS Custom Properties

Name Description
--ic-z-index-page-header z-index of page-header
--ic-z-index-page-header z-index of page-header

Variants

Size small

Interactive example

Latte recipe

A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.
<ic-page-headersize="small"heading="Latte recipe"subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam."></ic-page-header>

With breadcrumb navigation

Interactive example

Latte recipe

BETA
A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.
<ic-page-headerheading="Latte recipe"subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.">
<ic-chipslot="heading-adornment"label="BETA"size="large"></ic-chip>
<ic-breadcrumb-groupslot="breadcrumbs">
<ic-breadcrumbcurrent="true"page-title="Drinks"href="#"></ic-breadcrumb>
<ic-breadcrumb
page-title="Coffees"
href="#"
>
</ic-breadcrumb>
<ic-breadcrumbpage-title="Latte"href="#"></ic-breadcrumb>
</ic-breadcrumb-group>
</ic-page-header>

With actions, input and stepper

Interactive example

Latte recipe

BETA
A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.
<ic-page-headerheading="Latte recipe"subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam."reverse-order="true">
<ic-chipslot="heading-adornment"label="BETA"size="large"></ic-chip>
<ic-buttonslot="actions"variant="primary">Create coffee</ic-button>
<ic-buttonslot="actions"variant="tertiary">Filter coffee</ic-button>
<ic-stepperslot="stepper">
<ic-stepstep-title="Warm kettle"step-type="completed"></ic-step>
<ic-stepstep-title="Warm milk"step-subtitle="Optional"step-type="completed"></ic-step>
<ic-stepstep-title="Pour milk"step-type="current"></ic-step>
</ic-stepper>
<ic-text-fieldslot="input"placeholder="Search for ingredients…"label="Input"hide-label="true"/>
</ic-page-header>