Page

Overview

The Page component serves as a high-level layout component that organizes the content of a page, including optional elements such as a Header, Message, and ActionBar. It ensures consistent spacing, background management, and placement of key UI elements.

When to use:

  • To provide a container for the entire page structure, including header, content, messages, and action buttons.
  • To maintain consistency in page layout and background customization.

Implementation

To use Page import the component from the package:

Code example

import { Page } from '@bigcommerce/big-design-patterns';

Page is a high-level layout component that organizes the content of a page.

Edit the code below to see your changes live!

<Page
  header={
    <Header description="Page description (optional)" title="Basic page" />
  }
>
  <Panel header="Main contents">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </Text>
  </Panel>
</Page>

Props

Prop name
Type
Default
Description
headerHeader

Pass in an optional Header component for displaying the page title and description.

messageMessageProps

An optional Message component for displaying alerts or notifications.

backgroundBackground

The background settings for the page, determining background color or image.

actionBarActionBar

Pass in an optional ActionBar component for displaying action buttons at the bottom.

Props ending with * are required

Do's and Don'ts

Do
Use the Page component as a container for your entire page structure, including header, content, messages, and action buttons.
Utilize the 'background' prop to customize the page's background, aligning it with the overall design.
Don't
Don’t pass non-Header or non-ActionBar components to the 'header' or 'actionBar' props.
Avoid using the Page component for small sections of content; it’s meant to wrap the entire page.