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

The Container component is designed to limit pages and their content to a maximum width of 1200px. On screen sizes above this, the Container will be horizontally centered.

Installation

bash
npm install @nib/layout

Usage

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

Example

Components inside our Container are restricted to the 1200px max width, and centred horizontally above this screen size.

Props

There are no props for this component.

Considerations

When requiring a full width band of colour, special consideration should be given so that the Container is placed inside the band. One solution would be to a wrapping element with responsive padding and an optional background color defined, with a nested container. Our Section component does this and may be a better fit for your needs.

Best practice is to wrap page content in either a Section or a Container directly. Use our grid inside the Container to display content in multiple columns.

Optimal line length

Be careful that any text rendered inside the container is not left to span the full container width to help with readability. See Optimal line length for more about this.