Content container

Taxonomic name: L-CONTENT-CONTAINER

Beta v.1.0.0 - Updated 25/08/16.

Design
Code

Use this component to constrain all content inside to the maximum page width. Content is centred at wider breakpoints.

Can be used multiple times within a page to achieve page striping.

Examples

Standard page layout

Curabitur risus purus, tincidunt eu arcu sit amet, euismod lacinia lectus. Proin sollicitudin velit a dictum vehicula. Vivamus auctor lacinia lacus sit amet rutrum. Fusce dignissim, turpis vel ullamcorper cursus, dui felis scelerisque ex, a maximus metus quam faucibus ligula. Quisque eu elit a enim blandit sagittis. Quisque nec mauris vitae turpis rutrum efficitur nec nec risus. Nunc pharetra mauris quis arcu feugiat, id imperdiet metus scelerisque. Nulla a arcu nisi. Vestibulum velit velit, sodales ac feugiat vel, luctus et felis. Suspendisse potenti. Nam consequat, eros quis fermentum ullamcorper, massa urna fringilla diam, et tincidunt tellus felis ac risus. Integer mattis, est eu tincidunt efficitur, lacus felis malesuada dolor, ut lobortis justo metus ac elit. Proin at cursus nisi.

Constained width (Log in form layout)

This is only to be used for login form layouts.

Username

Forgotten username

Notes for developers

Do not nest these containers as it will cause double spacing at the sides.

Code Examples

Standard page layout

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

Constained width (Log in form layout)

Username

Forgotten username

<div class="l-content-container l-content-container--constrained">
	...
</div>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.l-content-container`	Base style general page content container	Yes	`div`
`.l-content-container--constrained`	Modifier to restrict the width of the content for use on login pages		`.l-content-container`	Only for used with login form layouts