Skip to main content
Skip to page content

Component demo

Interactive example

Web component React 
<ic-page-header
heading="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-step
step-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-field
slot="input"
placeholder="Search for ingredients…"
label="Input"
hide-label="true"
></ic-text-field>
</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: IcAlignment - "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: IcSizesNoLarge - "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: IcAlignment - "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: IcSizesNoLarge - "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

Web component React 
<ic-page-header
size="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

Web component React 
<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

Web component React 
<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>

With actions, input and tabs

Interactive example

Web component React 
<ic-page-header
heading="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-text-fieldslot="input"placeholder="Search for ingredients…"label="Input"hide-label="true"></ic-text-field>
<ic-navigation-item
slot="tabs"
label="Method"
href="#"
selected="true"
>
</ic-navigation-item>
<ic-navigation-item
slot="tabs"
label="Ingredients"
href="#"
>
</ic-navigation-item>
</ic-page-header>

With React Router

Interactive example

React 
<MemoryRouterinitialEntries={["/"]}>
<IcPageHeader
heading="Latte recipe"
subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam."
reverseOrder
>
<IcChipslot="heading-adornment"label="BETA"size="large"/>
<IcButtonslot="actions"variant="primary"
>Create coffee
<SlottedSVG
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
fill="currentColor"
/>
</SlottedSVG>
</IcButton>
<IcButtonslot="actions"variant="tertiary">Filter coffee</IcButton>
<IcNavigationItemslot="tabs"selected>
<NavLinkslot="navigation-item"to="/">Method</NavLink>
</IcNavigationItem>
<IcNavigationItemslot="tabs">
<NavLinkslot="navigation-item"to="/favourites">Ingredients</NavLink>
</IcNavigationItem>
<IcTextField
slot="input"
placeholder="Search for ingredients…"
label="Input"
hideLabel
class={classes.textField}
/>
</IcPageHeader>
<IcSectionContainer>
<Routes>
<Routepath="/"element={<IcTypography>This page is about our Latte making methods</IcTypography>}/>
<Routepath="/favourites"element={<IcTypography>This page is about the ingredients used in our Latte</IcTypography>}/>
</Routes>
</IcSectionContainer>
</MemoryRouter>

With Slots

Interactive example

Web component React 
<ic-page-header>
<ic-typographyvariant="h1"slot="heading">Latte recipe</ic-typography>
<ic-typographyslot="subheading">A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.</ic-typography>
<ic-chipslot="heading-adornment"label="BETA"size="large"></ic-chip>
<ic-breadcrumb-groupslot="breadcrumbs">
<ic-breadcrumbcurrent="true"page-title="Drinks"href="#"></ic-breadcrumb>
<ic-breadcrumbpage-title="Coffees"href="#"></ic-breadcrumb>
<ic-breadcrumbpage-title="Latte"href="#"></ic-breadcrumb>
</ic-breadcrumb-group>
<ic-text-fieldslot="input"placeholder="Search for ingredients…"label="Input"hide-label="true"/>
</ic-page-header>
Last reviewed 31 May 2024 .
Navigated to Page header - Intelligence Community Design System