diff --git a/.changeset/orange-melons-protect.md b/.changeset/orange-melons-protect.md
new file mode 100644
index 000000000..ecf89c950
--- /dev/null
+++ b/.changeset/orange-melons-protect.md
@@ -0,0 +1,5 @@
+---
+'@bigcommerce/docs': patch
+---
+
+Added Page pattern component documentation
diff --git a/packages/docs/PropTables/PagePropTable.tsx b/packages/docs/PropTables/PagePropTable.tsx
new file mode 100644
index 000000000..adfbfd46c
--- /dev/null
+++ b/packages/docs/PropTables/PagePropTable.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { Code, NextLink, Prop, PropTable, PropTableWrapper } from '../components';
+
+const pageProps: Prop[] = [
+ {
+ name: 'header',
+ types: Header,
+ description: (
+ <>
+ Pass in an optional Header component for displaying the
+ page title and description.
+ >
+ ),
+ },
+ {
+ name: 'message',
+ types: MessageProps,
+ description: (
+ <>
+ An optional Message component for displaying alerts or notifications.
+ >
+ ),
+ },
+ {
+ name: 'background',
+ types: (
+ Background
+ ),
+ description: 'The background settings for the page, determining background color or image.',
+ },
+ {
+ name: 'actionBar',
+ types: ActionBar,
+ description: (
+ <>
+ Pass in an optional ActionBar component for
+ displaying action buttons at the bottom.
+ >
+ ),
+ },
+];
+
+export const PagePropsTable: React.FC = (props) => (
+
+);
+
+const backgroundProps: Prop[] = [
+ {
+ name: 'src',
+ types: 'string',
+ description: 'The URL of the background image.',
+ required: true,
+ },
+ {
+ name: 'backgroundSize',
+ types: ['auto', 'length', 'cover', 'contain', 'initial', 'inherit'],
+ defaultValue: 'contain',
+ description: (
+ <>
+ Defines the size of the background image. Same as the{' '}
+ background-size CSS property.
+ >
+ ),
+ },
+ {
+ name: 'backgroundPosition',
+ types: [
+ 'left top',
+ 'left center',
+ 'left bottom',
+ 'right top',
+ 'right center',
+ 'right bottom',
+ 'center top',
+ 'center center',
+ 'center bottom',
+ 'x% y%',
+ 'x-pos y-pos',
+ 'initial',
+ 'inherit',
+ ],
+ defaultValue: 'top right',
+ description: (
+ <>
+ Sets the position of the background image. Same as the{' '}
+ background-position CSS property.
+ >
+ ),
+ },
+ {
+ name: 'backgroundRepeat',
+ defaultValue: 'no-repeat',
+ types: ['repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'initial', 'inherit'],
+ description: (
+ <>
+ Specifies if/how the background image repeats. Same as the{' '}
+ background-repeat CSS property.
+ >
+ ),
+ },
+];
+
+export const BackgroundPropsTable: React.FC = (props) => (
+
+);
diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx
index 884dc6b9a..ef13bec41 100644
--- a/packages/docs/components/SideNav/SideNav.tsx
+++ b/packages/docs/components/SideNav/SideNav.tsx
@@ -105,6 +105,7 @@ export const SideNav: React.FC = () => {
Action BarHeader
+ Page
diff --git a/packages/docs/pages/page.tsx b/packages/docs/pages/page.tsx
new file mode 100644
index 000000000..3db14cb0e
--- /dev/null
+++ b/packages/docs/pages/page.tsx
@@ -0,0 +1,334 @@
+import { H1, Panel, Text } from '@bigcommerce/big-design';
+import { AddIcon, ArrowDropDownIcon } from '@bigcommerce/big-design-icons';
+import { ActionBar, Header, Page } from '@bigcommerce/big-design-patterns';
+import React, { Fragment } from 'react';
+
+import {
+ Code,
+ CodePreview,
+ CodeSnippet,
+ ContentRoutingTabs,
+ GuidelinesTable,
+ List,
+} from '../components';
+import { BackgroundPropsTable, PagePropsTable } from '../PropTables/PagePropTable';
+
+const HeaderPage = () => {
+ return (
+ <>
+
Page
+
+
+
+ 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.
+
+
+
+
+
+
+
+ To use Page import the component from the package:
+
+ {`import { Page } from '@bigcommerce/big-design-patterns';`}
+
+ (
+
+
+ Page is a high-level layout component that organizes the
+ content of a page.
+
+
+ {/* jsx-to-string:start */}
+
+ }
+ >
+
+
+ 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.
+
+
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'message',
+ title: 'Status messasges',
+ render: () => (
+
+
+ The Message prop allows you to deliver status information
+ relevant to the context shown on the page and relates to the information
+ displayed below it.
+
+
+ {/* jsx-to-string:start */}
+ }
+ message={{
+ header: 'Status message title',
+ type: 'success',
+ messages: [
+ {
+ text: 'This is a success message.',
+ link: {
+ href: 'https://www.bigcommerce.com',
+ target: '_blank',
+ text: 'Learn more',
+ },
+ },
+ ],
+ }}
+ >
+
+
+ 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.
+
+
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'header-actions',
+ title: 'Header actions',
+ render: () => (
+
+
+ The Header component allows you to add actions to the
+ header, such as buttons or dropdowns.
+
+
+ {/* jsx-to-string:start */}
+ ,
+ },
+ {
+ items: [
+ { content: 'Option 1', onItemClick: (item) => item },
+ { content: 'Option 2', onItemClick: (item) => item },
+ ],
+ toggle: {
+ text: 'Secondary',
+ variant: 'secondary',
+ iconRight: ,
+ },
+ },
+ {
+ text: 'Tertiary',
+ variant: 'subtle',
+ },
+ ]}
+ description="Page description (optional)"
+ title="Header with actions"
+ />
+ }
+ >
+
+
+ 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.
+
+
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'action-bar',
+ title: 'Action Bar',
+ render: () => (
+
+
+ Use to provide quick and consistent access to key actions at the bottom of a
+ page. Be aware that pages may only have one primary action button, which would
+ be placed in the action bar.
+
+
+ {/* jsx-to-string:start */}
+
+ }
+ header={
+ ,
+ },
+ ]}
+ description="Page description (optional)"
+ title="Page with action bar"
+ />
+ }
+ >
+
+
+ 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.
+
+
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'background-images',
+ title: 'Background images',
+ render: () => (
+
+
+ On featured pages, you may want to add a background image to the page to provide
+ context or visual interest. The Page component allows you
+ to add a background image with custom positioning and size.
+
+
+ {/* jsx-to-string:start */}
+
+ }
+ >
+
+
+ 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.
+
+
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ ]}
+ />
+
+
+
+ ,
+ },
+ {
+ id: 'background-props',
+ title: 'Background',
+ render: () => ,
+ },
+ ]}
+ />
+
+
+
+
+
+ >
+ );
+};
+
+export default HeaderPage;
diff --git a/packages/docs/public/page-background.svg b/packages/docs/public/page-background.svg
new file mode 100644
index 000000000..158793cc8
--- /dev/null
+++ b/packages/docs/public/page-background.svg
@@ -0,0 +1 @@
+
\ No newline at end of file