Page layout
Page layout defines the header, main, pane, and footer areas of a page.
On this page
- @primer/react@37.5.0
- Alpha
- Reviewed for accessibility
On this page
Import
import {PageLayout} from '@primer/react'
Examples
Props
PageLayout
| Name | Default | Description |
|---|---|---|
containerWidth | 'xlarge' | | 'full' | 'medium' | 'large' | 'xlarge'The maximum width of the page container. |
padding | 'normal' | | 'none' | 'condensed' | 'normal'The spacing between the outer edges of the page container and the viewport |
columnGap | 'normal' | | 'none' | 'condensed' | 'normal' |
rowGap | 'normal' | | 'none' | 'condensed' | 'normal' |
sx | SystemStyleObject |
PageLayout.Header
| Name | Default | Description |
|---|---|---|
aria-label | string | undefinedA unique label for the rendered banner landmark | |
aria-labelledby | string | undefinedAn id to an element which uniquely labels the rendered banner landmark | |
padding | 'none' | | 'none' | 'condensed' | 'normal'The amount of padding inside the header. |
divider | 'none' | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } |
dividerWhenNarrowDeprecated | 'inherit' | | 'inherit' | 'none' | 'line' | 'filled'Use the divider prop with a responsive value instead. |
hidden | false | | boolean | { narrow?: boolean regular?: boolean wide?: boolean }Whether the header is hidden. |
sx | SystemStyleObject |
PageLayout.Content
| Name | Default | Description |
|---|---|---|
width | 'full' | | 'full' | 'medium' | 'large' | 'xlarge'The maximum width of the content region. |
padding | 'none' | | 'none' | 'condensed' | 'normal'The amount of padding inside the content. |
hidden | false | | boolean | { narrow?: boolean regular?: boolean wide?: boolean }Whether the content is hidden. |
sx | SystemStyleObject |
PageLayout.Pane
| Name | Default | Description |
|---|---|---|
aria-label | string | undefinedLabel for the pane. Required if the pane overflows and doesn't have aria-labelledby. | |
aria-labelledby | string | undefinedId of an element that acts as a label for the pane. Required if the pane overflows and doesn't have aria-label. | |
width | 'medium' | | 'small' | 'medium' | 'large' | { min: string max: string default: string }The width of the pane. If using custom widths, provide an object with keys 'min', 'max' and 'default'. |
minWidth | 256 | numberThe minimum width of the pane. |
resizable | false | booleanWhen true, the pane may be resized by the user. |
widthStorageKey | 'paneWidth' | stringProvide a key used by localStorage to persist the size of the pane on the client. |
sticky | false | booleanWhether the pane should stick to the top of the screen while the content scrolls. |
offsetHeader | 0 | number | stringUse offsetHeader along with the sticky prop to push the sticky pane down to make room for a sticky header if necessary. Use the type |
padding | 'none' | | 'none' | 'condensed' | 'normal'The amount of padding inside the pane. |
divider | 'none' | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } |
dividerWhenNarrowDeprecated | 'inherit' | | 'inherit' | 'none' | 'line' | 'filled'Use the divider prop with a responsive value instead. |
hidden | false | | boolean | { narrow?: boolean regular?: boolean wide?: boolean }Whether the pane is hidden. |
sx | SystemStyleObject | |
ref | React.RefObject<HTMLDivElement> |
PageLayout.Footer
| Name | Default | Description |
|---|---|---|
aria-label | string | undefinedA unique label for the rendered contentinfo landmark | |
aria-labelledby | string | undefinedAn id to an element which uniquely labels the rendered contentinfo landmark | |
padding | 'none' | | 'none' | 'condensed' | 'normal'The amount of padding inside the footer. |
divider | 'none' | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } |
dividerWhenNarrowDeprecated | 'inherit' | | 'inherit' | 'none' | 'line' | 'filled'Use the divider prop with a responsive value instead. |
hidden | false | | boolean | { narrow?: boolean regular?: boolean wide?: boolean }Whether the footer is hidden. |
sx | SystemStyleObject |