Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Page header

Guidance Code Accessibility

Component demo

Interactive example

Create coffee Filter coffee
Web component React
StackBlitz
Show full code 
<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-stepheading="Warm kettle"type="completed"></ic-step>
<ic-step
heading="Warm milk"
subheading="Optional"
type="completed"
></ic-step>
<ic-stepheading="Pour milk"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" | undefined
"left"
Property border
Attribute border

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

type: boolean - boolean | undefined
true
Property heading
Attribute heading

The title to render on the page header.

type: string - string | undefined
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 - boolean | undefined
false
Property size
Attribute size

The size of the page header component.

type: IcSizesNoLarge - "medium" | "small" | undefined
"medium"
Property sticky
Attribute sticky

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

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

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

type: boolean - boolean | undefined
false
Property subheading
Attribute subheading

The subtitle to render on the page header.

type: string - string | undefined
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property aligned
Attribute aligned

The alignment of the page header.

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

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

type: boolean - boolean | undefined
Default: true
Property heading
Attribute heading

The title to render on the page header.

type: string - string | undefined
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 - boolean | undefined
Default: false
Property size
Attribute size

The size of the page header component.

type: IcSizesNoLarge - "medium" | "small" | undefined
Default: "medium"
Property sticky
Attribute sticky

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

type: boolean - boolean | undefined
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 - boolean | undefined
Default: false
Property subheading
Attribute subheading

The subtitle to render on the page header.

type: string - string | undefined
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"

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
StackBlitz
Show full code 
<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
StackBlitz
Show full code 
<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

Create coffee Filter coffee
Web component React
StackBlitz
Show full code 
<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-stepheading="Warm kettle"type="completed"></ic-step>
<ic-stepheading="Warm milk"subheading="Optional"type="completed"></ic-step>
<ic-stepheading="Pour milk"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 navigation items

Interactive example

Create coffee Filter coffee