Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

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

Usage

Usage page anchor
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>
  );
};

Props

Props page anchor
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'

PageHeaderSetting

PageHeaderSetting page anchor

element

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

Type
string
Default
'PAGE_HEADER_SETTING'

PageHeaderDetails

PageHeaderDetails page anchor

element

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

Type
string
Default
'PAGE_HEADER_DETAILS'

PageHeaderKeyword

PageHeaderKeyword page anchor

element

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

Type
string
Default
'PAGE_HEADER_KEYWORD'

PageHeaderPrefix

PageHeaderPrefix page anchor

element

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

Type
string
Default
'PAGE_HEADER_PREFIX'

PageHeaderHeading

PageHeaderHeading page anchor

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

PageHeaderParagraph

PageHeaderParagraph page anchor

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'

PageHeaderMeta

PageHeaderMeta page anchor

element

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

Type
string
Default
'PAGE_HEADER_META'

PageHeaderActions

PageHeaderActions page anchor

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'

PageHeaderSeparator

PageHeaderSeparator page anchor

element

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

Type
string
Default
'PAGE_HEADER_SEPARATOR'