PageHeader

a layout component to display page title, subtitle, parent, and page-level actions

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string
"a user friendly label for screen readers"

actions

Any page-level actions.

element
<Box direction="row">
    <Button label="Delete" />
    <Button label="Edit" primary />
</Box>

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

string
"start"
"center"
"end"
"stretch"

children

Any content to be rendered directly beneath the PageHeader.

element
<NameValueList>
    <NameValuePair name="Created On">
        Jan 10, 2022
    </NameValuePair>
    <NameValuePair name="Last Edited">
        August 12, 2022
    </NameValuePair>
</NameValueList>

gridArea

The name of the area to place this inside a parent Grid.

string
"a parent grid area name"

gridProps

Any valid Grid prop.

object
{}

margin

The amount of margin around the component.

string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}
        

parent

Contextual navigation or information about where the current page is located within an application.

element
<Anchor label="Parent Page" icon={<FormPrevious />} />

subtitle

Additional description about a page's purpose. When provided as a string, it will be rendered as a paragraph.

string
"This page provides documentation for PageHeader."
element
<Box>This is a custom subtitle for the page.</Box>

title

The title of the page. When provided as a string, it will be rendered as an h1.

string
"PageHeader Documentation"
element
<Heading size="xxlarge">PageHeader Documentation</Heading>

React/DOM Properties

At its core, the PageHeader component is a regular <header> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for header elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

pageHeader.actions

Any valid Box props for the actions container.

object
{ align: 'end' }

pageHeader.parent

Any valid Box props for the parent container.

object
{ align: 'start' }

pageHeader.subtitle

Any valid Paragraph props for the subtitle.

object
{
  margin: 'none'
}

pageHeader.title

Any valid Heading props for the title.

object
{
  fill: true,
  margin: 'none',
}

pageHeader.small

Any valid Grid props for the PageHeader layout at small breakpoint. The 'areas' can be customized to change where the contents render.

object

small: {
    areas: [
      ['parent', 'parent'],
      ['title', 'actions'],
      ['subtitle', 'actions'],
    ],
    columns: [['small', 'flex'], 'auto'],
    rows: ['auto', 'auto', 'auto'],
    gap: { row: 'xsmall', column: 'large' },
},

pageHeader.medium

Any valid Grid props for the PageHeader layout at medium breakpoint. The 'areas' can be customized to change where the contents render.

object

medium: {
    areas: [
      ['parent', 'parent'],
      ['title', 'actions'],
      ['subtitle', 'actions'],
    ],
    columns: [['medium', 'flex'], 'auto'],
    rows: ['auto', 'auto', 'auto'],
    gap: { row: 'xsmall', column: 'medium' },
},

pageHeader.large

Any valid Grid props for the PageHeader layout at large breakpoint. The 'areas' can be customized to change where the contents render.

object

large: {
    areas: [
      ['parent', 'parent'],
      ['title', 'actions'],
      ['subtitle', 'actions'],
    ],
    columns: [['medium', 'flex'], 'auto'],
    rows: ['auto', 'auto', 'auto'],
    gap: { row: 'xsmall', column: 'large' },
},