Page

A standardised page layout including waymarkers and page-level actions.

Overview

The Page component and its various sub-components provide a standardised page layout including waymarkers such as a back link and breadcrumbs, page-level actions, and a clear h1 which is essential for accessibility.

Anatomy

Back button
Breadcrumbs
Page title
Page-level action
Page content

Basic usage


Edit live code
<Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.BackLink href="/" />
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
      <Page.Actions>
        <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
      </Page.Actions>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page><Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.BackLink href="/" />
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
      <Page.Actions>
        <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
      </Page.Actions>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page>

Variants

Max Width

By default the page has a max width of 1600px, but this can be disabled by passing maxWidth="none" to the Page component.

Only use maxWidth="none" when your page needs the full width of the page (i.e. more than 1600px width), this may be because you have wide tables, multiple columns, or your page is a dashboard.

Note that due to the below 1600px max width of the Nebula docs site content it's not really possible to preview this functionality here.

<Page maxWidth="none">
  ...
</Page><Page maxWidth="none">
  ...
</Page>

Page actions

Use a page-level action when there is a clear action that is relevant for the whole page, for instance on the "Transactions" page this might be "Add transaction". If your page-level action is a primary button, try to avoid using any other primary buttons on the page.

Use a primary button when the action is likely to be the reason the user has visited the page (like adding a transaction) and a secondary button when it is more optional (like changing billing preferences).


Edit live code
// Example only - always use within the Page component.
<Page.HeaderSection>
  <div />
  <Page.Actions>
    <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
    <SecondaryCTAButton>Change preferences</SecondaryCTAButton>
  </Page.Actions>
</Page.HeaderSection>// Example only - always use within the Page component.
<Page.HeaderSection>
  <div />
  <Page.Actions>
    <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
    <SecondaryCTAButton>Change preferences</SecondaryCTAButton>
  </Page.Actions>
</Page.HeaderSection>

Without page actions


Edit live code
<Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.BackLink href="/" />
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page><Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.BackLink href="/" />
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page>

Waymarkers

The page component uses breadcrumbs and the back button as "waymarkers" to give users context on where they are.

Breadcrumbs can show how pages are nested or which domain the current page belongs to.

The back button gives users a quick way to go to the previous page. This may be helpful if the user likely needs to go back to a "hub" page. Do not use it for multi-step forms (except for the first step), where behaviour may be unpredictable.


Edit live code
// Example only - always use within the Page component.
<Page.Waymarkers>
  <Page.BackLink href="/" />
  <Page.Breadcrumbs breadcrumbs={[
    'Payments and refund',
    'Transactions history'
  ]} />
</Page.Waymarkers>// Example only - always use within the Page component.
<Page.Waymarkers>
  <Page.BackLink href="/" />
  <Page.Breadcrumbs breadcrumbs={[
    'Payments and refund',
    'Transactions history'
  ]} />
</Page.Waymarkers>

Without back link


Edit live code
<Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
      <Page.Actions>
        <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
      </Page.Actions>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page><Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
      <Page.Actions>
        <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
      </Page.Actions>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page>

Without waymarkers


Edit live code
<Page>
  <Page.Header>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
      <Page.Actions>
        <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
      </Page.Actions>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page><Page>
  <Page.Header>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
      <Page.Actions>
        <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
      </Page.Actions>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page>

Properties

Page

Name	Values	Default
maxWidth	standardnone	standard
...	JSX.IntrinsicElements["div"]

Page.Header

Name	Values	Default
...	JSX.IntrinsicElements["div"]

Page.Waymarkers

Name	Values	Default
...	JSX.IntrinsicElements["div"]

Page.BackLink

Name	Values	Default
...	JSX.IntrinsicElements["a"]

Page.Breadcrumbs

Name	Values	Default
breadcrumbs (required)	String[]
...	JSX.IntrinsicElements["ol"]

Page.HeaderSection

Name	Values	Default
...	JSX.IntrinsicElements["div"]

Page.Title

Name	Values	Default
...	JSX.IntrinsicElements["h1"]

Page.Actions

Name	Values	Default
...	JSX.IntrinsicElements["div"]

Page.Content

Name	Values	Default
...	JSX.IntrinsicElements["div"]