Stable

Split Section

The SplitSection component is used to split the full screen width into two equal columns, whilst maintaining the standard container width for the content. It allows background colours to be applied to each side, to the edge of the screen, without affecting the positioning of the content.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab

Installation

bash

npm install @nib/layout

Usage

jsx

import {SplitSection} from '@nib/layout';

Do not style layout components

You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.

Interactive demo

jsx

<SplitSection padding={8} collapseBelow="md">
  <SplitSection.Item background="brandBase" color="white">
    <LargePlaceholder />
  </SplitSection.Item>
  <SplitSection.Item background="brandLight" color="black">
    <LargePlaceholder />
  </SplitSection.Item>
</SplitSection>

<SplitSection padding={8} collapseBelow="md">
  <SplitSection.Item background="brandBase" color="white">
    <LargePlaceholder />
  </SplitSection.Item>
  <SplitSection.Item background="brandLight" color="black">
    <LargePlaceholder />
  </SplitSection.Item>
</SplitSection>

Props

SplitSection

Prop	Type	Default	Description
`children` (required)	node		The children of the SplitSection layout. Must be a `SplitSection.Item` component.
`padding`	number or object	`{xs: 4, md: 6, lg: 8}`	The padding around the column content. A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `0...10`.
`collapseBelow`	string		A breakpoint value which defines when the horizontal columns structure should collapse to a vertical stack.
`reverse`	boolean		Reverse the order of the components inside SplitSection. Can be made responsive by passing an object of breakpoints. Below collapseBelow breakpoints, this doesn't have any effect.

Reverse Props warning

Reverse props below the collapseBelow breakpoints, have no effect.

SplitSection.Item

All Box props are valid on this component.

Prop	Type	Default	Description
`children` (required)	node		The children to be rendered in the column.

Edit this page