Page

The Page is a wrapper for the main content of a page.

Features

Wrapper for the content for each page.

Includes configurations for an optional sidebar.

Version:v2.0.0

The Page is a wrapper for the main content of a page. It includes location of an optional Sidebar. See the Page layout foundations for more information on different layout options and styles.

#Import

import { Page } from '@wpmedia/ads-layout'

#Usage

Caution

Page is intended to be used in combination with a Frame.

interface PageProps

Props	Description
`bg` (optional)	`undefined \| string = white` Page background color. See Background colors for available background color tokens.
`p` (optional)	`keyof DimensionValue = $large` Padding size.
`sidebar` (optional)	`ReactElement<SidebarProps>` Sidebar to render in correct location on page.

<Box
  css={{
    p: 0,
    margin: '-1rem',
  }}
>
  <Frame navConfig={{}}>
    <Page bg="$gray200">Body</Page>
  </Frame>
</Box>

const navConfig = {
  appname: 'Arc UI',
  homeLink: { href: '/' },
  links: [
    {
      name: 'Components',
      href: '/',
      text: {
        en: 'Components',
      },
    },
  ],
}

;<Frame navConfig={navConfig}>
  <Page sidebar={<Sidebar bg="$gray900">Sidebar</Sidebar>}>
    Body w/ Sidebar
  </Page>
</Frame>