- Taxonomic name: L-COLUMNS
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.0.0 (20/07/18)
Columns
Device-specific fluid grid layouts allow us to maximise consistency through a responsive user interface, resulting in visually confident design solutions. Our three device breakpoints enable guided development through structured creative design, considering maximum to minimum screen size.
Design and usage
- Can be combined to produce more complex layouts eg. 50% / 25% / 25%
- Ensure that when selecting column layouts for different breakpoints that the columns do not become too narrow for the content you are placing within them before the layout changes
- For detailed guidance on working with grids and vertical spacing please refer to the style guide.
Examples
Left to right
Interactive example
Code example
<div class="l-columns [ Modifiers ]">
<div class="l-columns__column">
...
</div>
</div>Right to left
Interactive example
Code example
<div class="l-columns l-columns--reversed [ Modifiers ]">
<div class="l-columns__column">
...
</div>
</div>Unequal width columns
An 8 columns and 4 column layout ( 66% / 33% ) at large screen sizes is available for use.
Interactive example
Code example
This is only guaranteed to work as a single row, if more are required use another l-columns container to create the next row.
<div class="l-columns l-columns--66-33-large [ Modifiers ]">
<div class="l-columns__column">
...
</div>
<div class="l-columns__column">
...
</div>
</div>More complex layouts
The following example shows how combining the column layouts can produce more complex layouts. Here the layout is a single column at mobile, single column followed by two 50% columns at tablet and 50% / 25% / 25% columns at desktop.
Interactive example
Code example
<div class="l-columns [ Modifiers ]">
<div class="l-columns__column">
<div class="l-columns [ Modifiers ]">
...
</div>
</div>
</div>Cards in columns
While cards can by created using individual div elements, it is recommended that sets of cards be contained as list items within a ul element in order to retain a link between them and to assist users taking advantage of screenreaders. These lists can be controlled using columns as follows:
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card [ Modifiers ]>
...
</li>
...
</ul>Development and test
Notes for developers
- Combine the modifiers to display the required number of columns at the different break points.
- It is possible to nest column layouts to achieve more complex layouts at different screen sizes.
- Groups of cards can be contained within lists and controlled using columns; an example of this is below.
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-columns |
Base style for column layouts | Yes | div / ul (when used in conjunction with .a-list-plain to control card groups) |
|
.l-columns--reversed |
Modifier - Display columns right to left | .l-columns |
||
.l-columns--2-small |
Modifier - Two columns at small screens only | .l-columns |
||
.l-columns--2-medium |
Modifier - Two columns at medium screens only | .l-columns |
||
.l-columns--3-medium |
Modifier - Three columns at medium screens only | .l-columns |
||
.l-columns--4-medium |
Modifier - Four columns at medium screens only | .l-columns |
||
.l-columns--2-large |
Modifier - Two columns at large screens only | .l-columns |
||
.l-columns--3-large |
Modifier - Three columns at large screens only | .l-columns |
||
.l-columns--4-large |
Modifier - Four columns at large screens only | .l-columns |
||
.l-columns--5-large |
Modifier - Five columns at large screens only | .l-columns |
||
.l-columns--6-large |
Modifier - Six columns at large screens only | .l-columns |
||
.l-columns--66-33-large |
Modifier - Eight column followed by a 4 column ( 66% / 33% ) at large screens only | .l-columns |
Only use for a single row at large screens | |
.l-columns__column |
Base style for an individual column | Yes | .l-columns > div / li (when used with card groups) |