import {PageLayout} from '@primer/react'
See storybook for fullscreen examples.
<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 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><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 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><PageLayout.Content><Placeholder label="Content" height={240} /></PageLayout.Content><PageLayout.Pane><Placeholder label="Pane" height={120} /></PageLayout.Pane></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. |
| 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. |
| 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. |
| 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. |
| 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. |