Page

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

Overview

When to use

All standard application pages, including dashboards, informational pages, and task flows

When not to use

Marketing pages
Landing pages
Modals - use the Modal component instead

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 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’.

Guidelines:

Only use page actions where they are relevant to the entire page
Include no more than one primary action and one secondary action per 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)
If your page action is a primary button, avoid using any other primary buttons on the page
If the main route for the user is a button at the bottom of the page, for instance to submit a form, do not use any page actions


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.

Guidelines:

Always include breadcrumbs when the page has a parent page
Always use breadcrumbs if a page does not appear in the main navigation, as this helps the user to understand where they are
Do not use the back button 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>

Content

Writing page titles

Every page should have a title - a clear H1 on every page is essential for accessibility.

A good page title should:

Clearly describe the current page and its purpose
Use sentence case
Avoid redundant or unnecessary words
Not include punctuation like full stops or exclamation marks
For pages that display information, use nouns that describe the information, e.g. ‘Payment arrangements’
For pages where the user is completing a task, use a verb and noun phrase, e.g. ‘Make a payment’

Do:

View your payment arrangements
New payment flow
Add new meter reading

Don't:

Payment arrangements
Make a payment
Add new

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"]