Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Page Header

Version 1.0.0GithubStorybook

Page Header is a layout component that wraps all top-level components on a page.

Installation

Installation page anchor
yarn add @twilio-paste/page-header - or - yarn add @twilio-paste/core
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderDetails,
  PageHeaderHeading,
  PageHeaderInPageNavigation,
  PageHeaderKeyword,
  PageHeaderMeta,
  PageHeaderParagraph,
  PageHeaderPrefix,
  PageHeaderSetting,
  PageHeaderSeparator,
} from '@twilio-paste/core/page-header';

const MyPageHeader = () => {
  return (
    <PageHeader size="default">
      <PageHeaderSetting>
        <Breadcrumb>
          <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
          <BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
        </Breadcrumb>
      </PageHeaderSetting>
      <PageHeaderDetails>
        <PageHeaderKeyword>Wizard title</PageHeaderKeyword>
        <PageHeaderPrefix>
          <Avatar size="sizeIcon90" name="Avatar Name" />
        </PageHeaderPrefix>
        <PageHeaderHeading>Page title</PageHeaderHeading>
        <PageHeaderActions>
          <ButtonGroup>
            <Button variant="secondary">Action</Button>
            <Button variant="secondary">Action</Button>
          </ButtonGroup>
        </PageHeaderActions>
        <PageHeaderMeta>
          <Badge variant="success" as="span">
            Badge
          </Badge>
          Meta
          <Anchor href="#">Meta</Anchor>
        </PageHeaderMeta>
        <PageHeaderParagraph>Paragraph text</PageHeaderParagraph>
      </PageHeaderDetails>
      <PageHeaderInPageNavigation>
        <InPageNavigation aria-label="get started">
          <InPageNavigationItem href="#" currentPage>
            Label
          </InPageNavigationItem>
          <InPageNavigationItem href="#">Label</InPageNavigationItem>
          <InPageNavigationItem href="#">Label</InPageNavigationItem>
        </InPageNavigation>
      </PageHeaderInPageNavigation>
    </PageHeader>
  );
};
PageHeader page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PAGE_HEADER'

size

Size of the Page Header

Type
"default" | "compact"
Default
'default'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PAGE_HEADER_SETTING'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PAGE_HEADER_DETAILS'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PAGE_HEADER_KEYWORD'