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

A section of a page, with standardised, responsive padding across screen sizes and a nested Container component (see related components below). A Section will expand to fill horizontal space and therefore has a range of use cases but was designed with full-width sections of a page in mind.

Installation

bash
npm install @nib/layout

Usage

jsx
import {Section} 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

PropTypeDefaultDescription
backgroundstringtransparentAdd a background color for the section. Valid options provided by underlying the Box component.

Considerations

The is a low-level component that provides you with a Box with standard padding and a nested Container. It does not provide theming options or defined child components.

If non-standard padding sizes (or none at all) are required, then you could use the Container component instead or manually recreate the component yourself using the Box component.

For example:

jsx
import {Box} from '@nib/layout';
<Box padding={{xs: 1, md: 2, xl: 3}}>
<Container>{children}</Container>
</Box>;