Skip to contentSkip to navigationSkip to topbar
Figma
Star

Page Header

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

Version 0.0.0
Github

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,
} 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'

element

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

Type
string
Default
'PAGE_HEADER_PREFIX'

as

The HTML element to render.

Type
AsTags

element

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

Type
string
Default
'PAGE_HEADER_HEADING'

variant

Style variant to apply to the heading, affects the visual appearance of the heading.

Type
HeadingVariants
Default
'heading10' for default size, 'heading20' for compact size

element

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

Type
string
Default
'PAGE_HEADER_PARAGRAPH'

id

Type
never

marginBottom

Overrides the default marginBottom of space70 to space0.

Type
"space0"
Default
'space70'

element

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

Type
string
Default
'PAGE_HEADER_META'

element

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

Type
string
Default
'PAGE_HEADER_ACTIONS'

PageHeaderInPageNavigation

PageHeaderInPageNavigation page anchor

element

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

Type
string
Default
'PAGE_HEADER_IN_PAGE_NAVIGATION'