- Taxonomic name: L-COLUMNS--DIVIDERS
- Added on: v4.10.0 (21/06/19)
Columns with dividers
Columns with dividers provide the option to separate the columns of content with dividing lines. They can also be used within tertiary cards.
Design and usage
Structure
- On desktop, content can be displayed in 2, 3 or 4 columns, placed side by side.
- On tablet and mobile, content is displayed stacked.
- Headings inside of the columns with dividers include H2 or H3, semi bold or regular.
-
When columns with dividers are placed inside a card:
- The card must be a tertiary card.
- Content within the columns can be made from; body copy, bullet point list, numbered/lettered lists, lists with ticks and crosses and lists with plus and minus'.
- Primary, secondary and tertiary links (with or without icon) can be displayed within each column of the split card.
- Column area and/or card need to be full content width on all devices, 1230px on desktop, 708px on tablet and 280px on mobile.
Placement
- The columns with dividers or the containing card must sit within a content block of a page, consuming full content width.
Use case and exception scenarios
- To display content where uses can compare information, for example; What's included / Not included.
Examples
Two columns with dividers
Interactive example
Code example
<div class="l-columns [ Modifier ] l-columns--dividers">
<div class="l-columns__column">
...
</div>
...
</div>Card using columns with dividers
Interactive example
Code example
<div class="m-card m-card--tertiary">
<div class="l-columns [ Modifier ] l-columns--dividers">
<div class="l-columns__column">
<div class="m-card-content">
...
</div>
</div>
<div class="l-columns__column">
<div class="m-card-content">
...
</div>
</div>
</div>
</div>Development and test
Notes for developers
Ensure that if the columns with dividers is used within a card, that card must be a tertiary card.
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--dividers |
Modifer style for columns to add dividing lines between the columns | Yes | .l-columns |
When used within a card, that card must be a tertiary card. |
Component releases
- Added on: v4.10.0 (21/06/19)
Latest update:
- Component added to provide the option to separate the columns of content with dividing lines. These can also be used within tertiary cards.