Layout object that constrains content to a configurable width and centers within the viewport.
Default
Displays contents until the viewport width reaches 1440px at which point it is centered.
<Container>
<div className="ln-u-bg-color-light ln-u-soft" />
</Container>
Outer margin
Outer margins can be added to a block of content using the soft prop.
<Container soft="lg">
<div className="ln-u-bg-color-light ln-u-soft" />
</Container>
Size variants
| def | Default | 1440 |
| xs | Extra small | 800 |
| sm | Small | 1280 |
| lg | Large | 1800 |
Use the size prop to make use of the max-width variants.
<Container size="xs">
<div className="ln-u-bg-color-light ln-u-soft ln-u-text-align-center">
Extra small content
</div>
</Container>
<Container size="lg">
<div className="ln-u-bg-color-light ln-u-soft ln-u-text-align-center">
Large content
</div>
</Container>
Full width
fluid removes the default max-width so content spans the full width:
<Container fluid>
<div className="ln-u-bg-color-light ln-u-soft" />
</Container>
Left aligned
free prevents the container from being center aligned when the max-width kicks in:
<Container free size="xs">
<div className="ln-u-bg-color-light ln-u-soft" />
</Container>
Was this page helpful?