We have a new look!
💅 ✨
Skip to content
Stable

SplitSection

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.

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
ReferenceError: Placeholder is not defined

Props

SplitSection

PropTypeDefaultDescription
children (required)nodeThe children of the SplitSection layout. Must be a SplitSection.Item component.
paddingnumber 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.
collapseBelowstringA breakpoint value which defines when the horizontal columns structure should collapse to a vertical stack.

SplitSection.Item

All Box props are valid on this component.

PropTypeDefaultDescription
children (required)nodeThe children to be rendered in the column.