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!

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.