- Taxonomic name: L-MAX
- Added on: v3.0.0 (15/09/17)
- Updated on: v3.1.0 (08/12/17)
Maximum width container
Maximum width container constrain content that would naturally sit full width on the page, but needs to be made narrower to keep line lengths shorter for ease of readability, and aligned to the grid. Classes are applied to constrain the content and align to the left of center of the page.
Examples
Interactive example
Code example
<div class="l-max [ Modifier ]">
...
</div>Development and test
Notes for developers
l-max containers must sit within an l-content-container and not within any other restricted width area. These containers can be floated if required using the utility classes available.
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-max |
Constrain content to grid columns | Yes | .l-content-container div |
|
.l-max--left |
Modifier to align the constrained width area to the left of the page | .l-max |
||
.l-max--2-column-small |
Modifier to restrict content to the two columns at small screens | .l-max |
||
.l-max--2-column-medium |
Modifier to restrict content to the two columns at medium screens | .l-max |
||
.l-max--3-column-medium |
Modifier to restrict content to the three columns at medium screens | .l-max |
||
.l-max--4-column-medium |
Modifier to restrict content to the four columns at medium screens | .l-max |
||
.l-max--5-column-medium |
Modifier to restrict content to the five columns at medium screens | .l-max |
||
.l-max--6-column-medium |
Modifier to restrict content to the six columns at medium screens | .l-max |
||
.l-max--7-column-medium |
Modifier to restrict content to the seven columns at medium screens | .l-max |
||
.l-max--2-column-large |
Modifier to restrict content to the two columns at large screens | .l-max |
||
.l-max--3-column-large |
Modifier to restrict content to the three columns at large screens | .l-max |
||
.l-max--4-column-large |
Modifier to restrict content to the four columns at large screens | .l-max |
||
.l-max--5-column-large |
Modifier to restrict content to the five columns at large screens | .l-max |
||
.l-max--6-column-large |
Modifier to restrict content to the six columns at large screens | .l-max |
||
.l-max--7-column-large |
Modifier to restrict content to the seven columns at large screens | .l-max |
||
.l-max--8-column-large |
Modifier to restrict content to the eight columns at large screens | .l-max |
||
.l-max--9-column-large |
Modifier to restrict content to the nine columns at large screens | .l-max |
||
.l-max--10-column-large |
Modifier to restrict content to the ten columns at large screens | .l-max |
||
.l-max--11-column-large |
Modifier to restrict content to the eleven columns at large screens | .l-max |
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v3.1.0 (08/12/17)
Latest update:
- updated: Ability to left align the container added.
- updated: 2, 3, 5 and 7 columns at medium screens, and 2, 3, 5, 7, 9 and 11 columns at large screens added.