Container (Layer 3)

Containers are level 3 container blocks used to group and organize other contents. They are designed to be direct child elements of a band or region.

Containers are used to keep content off of the left and right edge of the parent band or region. Containers are also used in CDS to define if the content should be restricted to a maximum width or take up the full width available.

Code

<div class="container {container-size}">

</div>

Classes

{container-size}

Controls the maximum width of the container element.

Container Type	Description
Default (no class)	The container will have 100% width up to a maximum width of 1440px. It will be centered on the page if the window is wider than that width.
.container-full	The container will fit the full width of the parent element with no upper bound.

Developer Notes

Containers are the elements used to keep content off of the left and right edge of the band or region. If you need to control top and bottom padding, edit the region or band.

Designer Notes

By default, the padding used for containers are as follows.

Window width range (@media)	Padding (left & right)
0-1023	15px
1024-1200	30px
1200+	60px

* Requires the ".padded" class to be applied, otherwise all values are 0px.