Container

The container layout component is the basis of defining layout - constraints within the main section components. A container should be simple, only defining a width or maximum-width of which the content is not allowed to exceed out of. Each container has a margin which is used to seperate the content from the borders of the viewport.

Default

A default container ranging to 1296px. Once the viewport has reached the maximum width the container will continue scaling with the viewport width itself.

px 

			
				<div class="l-container"></div>

Secondary

A container ranging to 780px. Once the viewport has reached the maximum width, the container will continue scaling with the viewport width itself.

px 

			
				<div class="l-container l-container--secondary"></div>

Tertiary

A container ranging to 648px. Once the viewport has reached the maximum width, the container will continue scaling with the viewport width itself.

px 

			
				<div class="l-container l-container--tertiary"></div>

Documentation

Modifiers

  • l-container--secondary

    Create a smaller version of the default container where the max-width is mainly adjusted

  • l-container--tertiary

    Create another smaller version of the default container where the max-width is mainly adjusted to half of the default container width