Split Page Layout

Split Page Layout is a layout component that allows you to create a two-column layout with a main content area and a sidebar.

React

ready

Storybook|Source

Splt Page Layout is a layout component that allows you to create a two-column layout with a main content area and a sidebar. It is designed to be flexible and responsive, adapting to different screen sizes and content requirements.

React examples

Settings Page

Danger zone

Delete account

Are you sure you don't want to just downgrade your account to a free account? We won't charge your credit card anymore.

<SplitPageLayout>
  <SplitPageLayout.Pane position="start">
    <NavList aria-label="Main navigation">
      <NavList.Item href="#">Profile</NavList.Item>
      <NavList.Item href="#" aria-current="page">
        Account
      </NavList.Item>
      <NavList.Item href="#">Emails</NavList.Item>
      <NavList.Item href="#">Notifications</NavList.Item>
    </NavList>
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Heading
      as="h2"
      style={{
        fontSize: '2em',
        fontWeight: 'normal',
        color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
        marginBottom: '1rem',
      }}
    >
      Danger zone
    </Heading>
    <div
      style={{
        border: '1px solid',
        borderColor: 'var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e))',
        borderRadius: '1rem',
        padding: '1rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '1rem',
      }}
    >
      <div style={{display: 'grid', gap: '1rem'}}>
        <p
          style={{
            fontSize: '1em',
            fontWeight: 'bold',
            color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
          }}
        >
          Delete account
        </p>
        <p style={{fontSize: '1em', color: 'var(--fgColor-muted,var(--color-fg-muted,#6a737d))'}}>
          Are you sure you don&apos;t want to just downgrade your account to a free account? We won&apos;t charge your
          credit card anymore.
        </p>
      </div>
      <Button variant="danger">Delete account</Button>
    </div>
  </SplitPageLayout.Content>
</SplitPageLayout>

<SplitPageLayout>
  <SplitPageLayout.Pane position="start">
    <NavList aria-label="Main navigation">
      <NavList.Item href="#">Profile</NavList.Item>
      <NavList.Item href="#" aria-current="page">
        Account
      </NavList.Item>
      <NavList.Item href="#">Emails</NavList.Item>
      <NavList.Item href="#">Notifications</NavList.Item>
    </NavList>
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Heading
      as="h2"
      style={{
        fontSize: '2em',
        fontWeight: 'normal',
        color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
        marginBottom: '1rem',
      }}
    >
      Danger zone
    </Heading>
    <div
      style={{
        border: '1px solid',
        borderColor: 'var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e))',
        borderRadius: '1rem',
        padding: '1rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '1rem',
      }}
    >
      <div style={{display: 'grid', gap: '1rem'}}>
        <p
          style={{
            fontSize: '1em',
            fontWeight: 'bold',
            color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
          }}
        >
          Delete account
        </p>
        <p style={{fontSize: '1em', color: 'var(--fgColor-muted,var(--color-fg-muted,#6a737d))'}}>
          Are you sure you don&apos;t want to just downgrade your account to a free account? We won&apos;t charge your
          credit card anymore.
        </p>
      </div>
      <Button variant="danger">Delete account</Button>
    </div>
  </SplitPageLayout.Content>
</SplitPageLayout>

Props

SplitPageLayout

Name	Default	Description
sx		`SystemStyleObject`

Name	Default	Description
aria-label		`string` A unique label for the rendered main landmark
aria-labelledby		`string` An id to an element which uniquely labels the rendered main landmark
padding	`'normal'`	`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the header.
divider	`'line'`	`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the header is hidden.
sx		`SystemStyleObject`

SplitPageLayout.Content

Name	Default	Description
aria-label		`string` A unique label for the rendered main landmark
aria-labelledby		`string` An id to an element which uniquely labels the rendered main landmark
width	`'large'`	`\| 'full' \| 'medium' \| 'large' \| 'xlarge'` The maximum width of the content region.
padding	`'normal'`	`\| '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`

SplitPageLayout.Pane

Name	Default	Description
aria-label		`string \| undefined` Label for the pane. Required if the pane overflows and doesn't have aria-labelledby.
aria-labelledby		`string \| undefined` Id 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`	`number` The minimum width of the pane.
resizable	`false`	`boolean` When true, the pane may be resized by the user.
widthStorageKey	`'paneWidth'`	`string` Provide a key used by localStorage to persist the size of the pane on the client.
sticky	`true`	`boolean` Whether the pane should stick to the top of the screen while the content scrolls.
offsetHeader	`0`	`number \| string` Use offsetHeader along with the sticky prop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px.
padding	`'normal'`	`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the pane.
divider	`'line'`	`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the pane is hidden.
position	`start`	`'end' \| 'start' \| {narrow?: 'end' \| 'start', narrow?: 'end' \| 'start', wide?: 'end' \| 'start'}` Which side of the page the pane should be on. Can be changed for different viewport widths.
sx		`SystemStyleObject`

Name	Default	Description
aria-label		`string` A unique label for the rendered main landmark
aria-labelledby		`string` An id to an element which uniquely labels the rendered main landmark
padding	`'normal'`	`\| 'none' \| 'condensed' \| 'normal'` The amount of padding inside the footer.
divider	`'line'`	`\| 'none' \| 'line' \| { narrow?: \| 'none' \| 'line' \| 'filled' regular?: \| 'none' \| 'line' wide?: \| 'none' \| 'line' }`
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the footer is hidden.
sx		`SystemStyleObject`