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