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
npm install @nib/layout
Usage
import {Container} from '@nib/layout';
Do not style layout components
Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | string or object | default | Sets the maximum width of the container. Must be one of narrow, default or wide. Can be made responsive by passing an object of breakpoints. |
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
width Prop
The container supports three width sizes: narrow, default, and wide. Note that Container only applies a max-width attribute, so designs should still behave responsively within breakpoints.
- Narrow: Ideal for focusing the user on a specific task, typically in a single-column view.
- Default: Provides a balanced width for general use cases.
- Wide: Useful for productivity applications, featured content or situations where more screen real estate may be beneficial on larger devices.
Mesh components that have an integrated container may supply a containerWidth prop, allowing you to apply the desired container max-width to the nested content.