• Layout
  • CORE COMPONENT
  • Taxonomic name: L-CONTENT-CONTAINER
  • Added on: v3.0.0 (15/09/17)

Container

The main content container is used to constrain all content inside it to the maximum page width allowed by the design grid. Content is centred at wider breakpoints.


Design and usage

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

Examples

Interactive example

Code example

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

Development and test

Notes for developers

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


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  

Component releases

  • Added on: v3.0.0 (15/09/17)

Latest update:

  • Component added.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team