Container
Contains page elements to a reasonable maximum width based on the size of a user's screen.
This is useful to couple with other UI elements like grid or menu to restrict their width to a reasonable size for display.
Usage
The maximum width of the Container object is defined in "stylesheets/settings/_settings.global.scss" with the variable $g-site-max-width. It is set to 1200px by default.
<div class="o-container">
...
</div>Classes
| Class | Description | Type |
|---|---|---|
.o-container |
Sets max-width of element to the global max width | Component |
.o-container--centered |
Sets left and right margins to "auto" so the container is centred | Component modifier |
.o-container--fluid |
Sets "max-width" to 100% so container fills the available space. | Component modifier |
.o-container--collapse |
Removes default padding from the container. | Component modifier |
.o-container--absolute |
Contains absolutely position elements (position is set to relative). | Component modifier |
.o-container--thin |
A thinner container. Set to 800px max width by default. | Component modifier |