Page usage guidelines

Usage guidelines API Resources

The page component provides the structure for a single view within an application. It sets a consistent maximum width and horizontal margins for its content areas.

When to use

As the container for the primary content of each page, typically inside an app shell.
To apply a consistent page width and responsive margins across views.

When not to use

Structuring content within a page. Use stack or other layout components instead.
More than once per view. A page represents the main content of the application.

import {
  AppHeader,
  AppShell,
  Button,
  Text,
  UNSTABLE_Page as Page,
  UNSTABLE_PageContent as PageContent,
  UNSTABLE_PageHeader as PageHeader,
  AppShellBody,
} from '@cimpress-ui/react';

export default function Demo() {
  return (
    <AppShell>
      <AppHeader title="My app" titleLink={{ href: '#', target: '_self' }} />
      <AppShellBody>
        <Page>
          <PageHeader
            title="Orders"
            description="View and manage all customer orders."
            actions={<Button variant="primary">Create order</Button>}
          />
          <PageContent>
            <Text as="p">Hello, world!</Text>
          </PageContent>
        </Page>
      </AppShellBody>
    </AppShell>
  );
}

Place a page header at the top of the page, followed by the page content. The page header and page content share the page’s width, so they stay aligned.

With a different width

Preview
Code

import {
  AppHeader,
  AppShell,
  Text,
  UNSTABLE_Page as Page,
  UNSTABLE_PageContent as PageContent,
  UNSTABLE_PageHeader as PageHeader,
  AppShellBody,
} from '@cimpress-ui/react';

export default function Demo() {
  return (
    <AppShell>
      <AppHeader title="My app" titleLink={{ href: '#', target: '_self' }} />
      <AppShellBody>
        <Page width="small">
          <PageHeader title="Account settings" description="Update your profile and preferences." />
          <PageContent>
            <Text as="p">Hello, world!</Text>
          </PageContent>
        </Page>
      </AppShellBody>
    </AppShell>
  );
}

Set the width to the narrowest option that comfortably supports the content. The default is medium. See choose a page width for guidance on each option.