Container

Overview

Containers are used to house a section of content. You can give your container a background colour from a select palette or even give it a background image. If a darker background has been selected, its contained text and links will change to a lighter variation, maintaining legibility. Additionally, you can give your container a large, medium or small height.

Examples

Background colour variation

Example
External Link 
<section class="container container--md bg-storm-100 pt-5 pb-3 pb-2--lg"></section>

Background image variation

Example
External Link 
<section class="container container--md pt-5 pb-3 pt-6--md pb-4--md pt-7--lg pb-5--lg" style="background-image: url('http://placehold.it/1200x300');"></section>

Usage guidelines

Dos Donts
do-not iconDon't use the Container in place of a Hero at the top of the page as it will create unwanted padding.
do-not iconDon't nest a Container inside another Container.

Implementation guidelines

Name Class Attribute Description
Background colour .bg-storm-100 .bg-storm-6 Apply a background colour.
Background image style='background-image: url()'; Apply a background image.
Foreground colour .fg-white Apply a white foreground colour. Must be used in conjunction with the dark background.
Size .container--sm .container--md .container--lg Sizes for Container. Default is large.