PageLayout

Alpha

View source View storybook

On this page

Examples
Props
Status

import {PageLayout} from '@primer/react'

Examples

See storybook for fullscreen examples.

Default

<PageLayout>
  <PageLayout.Header>
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

<PageLayout>
  <PageLayout.Header>
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

With dividers

<PageLayout>
  <PageLayout.Header divider="line">
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane divider="line">
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer divider="line">
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

<PageLayout>
  <PageLayout.Header divider="line">
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane divider="line">
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer divider="line">
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

With pane on left

<PageLayout>
  <PageLayout.Header>
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane position="start">
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

<PageLayout>
  <PageLayout.Header>
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane position="start">
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

With condensed spacing

<PageLayout padding="condensed" rowGap="condensed" columnGap="condensed">
  <PageLayout.Header>
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

<PageLayout padding="condensed" rowGap="condensed" columnGap="condensed">
  <PageLayout.Header>
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

Without header or footer

<PageLayout>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
</PageLayout>

<PageLayout>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
</PageLayout>

Props

PageLayout

Name	Type	Default	Description
containerWidth	\| 'full' \| 'medium' \| 'large' \| 'xlarge'	'full'	The maximum width of the page container.
padding	\| 'none' \| 'normal' \| 'condensed'	'normal'	The spacing between the outer edges of the page container and the viewport
columnGap	\| 'none' \| 'normal' \| 'condensed'	'normal'
rowGap	\| 'none' \| 'normal' \| 'condensed'	'normal'
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

PageLayout.Header

Name	Type	Default	Description
divider	\| 'none' \| 'line'	'none'
dividerWhenNarrow	\| 'inherit' \| 'none' \| 'line' \| 'filled'	'inherit'
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

PageLayout.Content

Name	Type	Default	Description
width	\| 'full' \| 'medium' \| 'large' \| 'xlarge'	'full'	The maximum width of the content region.
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

PageLayout.Pane

Name	Type	Default	Description
position	\| 'start' \| 'end'	'start'
positionWhenNarrow	\| 'inherit' \| 'start' \| 'end'	'inherit'
width	\| 'small' \| 'medium' \| 'large'	'medium'	The width of the pane.
divider	\| 'none' \| 'line'	'none'
dividerWhenNarrow	\| 'inherit' \| 'none' \| 'line' \| 'filled'	'inherit'
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

PageLayout.Footer

Name	Type	Default	Description
divider	\| 'none' \| 'line'	'none'
dividerWhenNarrow	\| 'inherit' \| 'none' \| 'line' \| 'filled'	'inherit'
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

Status

Alpha

Component props are documented on primer.style/react.
Component does not have any unnecessary third-party dependencies.
Component can adapt to different themes.
Component can adapt to different screen sizes.
Component has 100% test coverage.

Beta

Component is used in a production application.
Common usage examples are documented on primer.style/react.
Common usage examples are documented in storybook stories.
Component has been reviewed by a systems designer and any resulting issues have been addressed.
Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Stable

Component API has been stable with no breaking changes for at least one month.
Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
Component has corresponding design guidelines documented in the interface guidelines.
Component has corresponding Figma component in the Primer Web library.

Edit this page on GitHub