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