Content container
Taxonomic name: L-CONTENT-CONTAINER
Beta v.1.0.0 - Updated 25/08/16.
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.
Notes for developers
Do not nest these containers as it will cause double spacing at the sides.
Code 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.
<div class="l-content-container">
...
</div>
Constained width (Log in form layout)
<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 |