Design Tokens for Mesh have just been released!
Skip to content

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.

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

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.
reversebooleanReverse 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.

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