Content layout

This is documentation for the following classes:

These are for controlling the layout of content, not overall page layout ("bricks" are used for overall page layout).
They are particularly useful for forms.

Content columns

Multiple columns can be created using the content-columns grid layout.

Start by creating a row div with the class content-columns.

This row is a single column full width container by default.
By adding content-columns--[two|three|four|five]-columns to the row div, you get two, three, four or five equal columns.

Add elements to this row with the class content-columns__column to contain them to the row. Elements added beyond the maximum for the row will wrap onto the next line. All elements stack below the large breakpoint.

In most cases, you'll want some padding around the columns.

This isn't added by default. Use content-columns--padding, content-columns--horizontal-padding or content-columns--vertical-padding on the row wrapper.

You don't have to specify all columns.

content-columns can also be nested.

content-columns can also be fixed so they con't collapse at smaller screen sizes with content-columns--fixed-columns.

A column can expand to fill available space.


Content columns can contain any number of children. They will just wrap onto the next line.


Four columns with complex content

aut eos facilis minima sit

eius quia eos molestiae itaque voluptatibus nisi corrupti et porro occaecati est qui aut harum porro labore laudantium et repellendus incidunt omnis omnis et harum fugiat sit ut molestias facilis

mollitia possimus totam similique ratione

veritatis eum ducimus et qui voluptas asperiores nesciunt omnis fuga nihil ullam error praesentium commodi eos et provident laboriosam nam sequi qui quae ipsam delectus similique nisi dolor quaerat nesciunt

dolorum consequatur id id provident

dolorem tempora est reiciendis quia et qui et eum ad cupiditate alias officia repellendus voluptas est nihil non quisquam nobis autem nam illum qui ut vero qui vel dolor et

voluptatibus voluptatem rerum ipsum et

ad voluptatem nostrum voluptatem accusantium magni modi dolor enim nobis sequi architecto sapiente velit et non recusandae sunt et dignissimos optio consequatur vel commodi repudiandae excepturi et aut ut atque


Unspecified number of columns

Use with caution. Some browsers handle this better than others.

sit dolores itaque

quam nihil quae praesentium saepe atque laudantium ipsam enim vel cum molestiae quae adipisci praesentium libero illum quia odio placeat sed quod soluta qui recusandae quia quia mollitia minima excepturi

vero repellendus in

totam debitis laborum reprehenderit sit soluta voluptatem sit dolorem sit quod et ut dolore illum tempora voluptatem quidem est autem et eius maxime alias sit sit eveniet aut sint et

id exercitationem optio

amet accusantium commodi quia odit tempora sunt fugit iste vitae vero cupiditate repudiandae qui sit molestiae assumenda nesciunt sed cum aspernatur libero ad et error aut corrupti ut est et

ex cum nulla

repellendus itaque eligendi voluptatem modi non quisquam ratione at ut non possimus minima cupiditate placeat dolorem atque quo officia nam inventore magni itaque voluptatem officia quia ea amet exercitationem explicabo

consequatur aliquam vero

veniam omnis culpa enim possimus voluptas dolor rerum ratione molestiae inventore accusantium totam distinctio est necessitatibus odio voluptate quia esse iste optio fugit doloremque et aut exercitationem velit enim est

sed dignissimos sunt

voluptas iure aut et ad et aperiam quia nesciunt inventore repellat sit omnis quod corporis tempore eius nesciunt quod ratione repellendus magnam consectetur et quia labore quasi illum perferendis ex

fuga consequatur nihil

voluptatem sit quos iusto similique ipsa maxime veritatis qui et distinctio consequatur dolorem occaecati dolores consequatur porro blanditiis aliquid eum ullam sed doloribus quia error labore labore voluptatem soluta ea

quo et alias

sapiente dolore molestiae nesciunt veritatis labore harum reprehenderit atque quam nihil harum dolor eius est rem non labore rerum ut eos sed quas cum consectetur quis omnis id quos consequuntur

impedit facilis esse

excepturi consequuntur eos velit possimus dolorum esse sunt dolorem nemo dolor qui minus et natus et et hic labore recusandae aut deleniti blanditiis non deleniti ratione eius reprehenderit maiores nostrum

est cupiditate iure

expedita officiis reprehenderit sit tempore iure quam qui veritatis aut hic voluptatem quis sequi dicta cum vel nihil similique animi sequi vel quas officia quod corporis assumenda magnam asperiores illum

Back to top

Content section

content-section can be used to separate sections visually.
It adds margin top and bottom.

content-section

This is an example of a content section. It could contain anything.

content-section

Another one, for good measure.

content-section--highlight

There generally won't be more than one of these per page.

It is used to bring the user's attention to a particularly important area of the page.

content-section--highlight-secondary

This will generally be used only if there is already a content-section--highlight on the page.

It can be used when there is similar content to that wrapped by content-section--highlight but which isn't the primary focus at that point in time.

content-section--disabled

This is only used when a content-section--highlight or content-section--secondary is no-longer editable by the user.

content-section--highlight with accordion

There generally won't be more than one of these per page.

It is used to bring the user's attention to a particularly important area of the page.

Back to top

Content section divider

Adds a keyline to separate content sections. DF-515

Adds a keyline to separate content sections.

Back to top

Content restrict line length

Sometimes, there will be page layouts which don't limit the line-length. In these cases, we can add a wrapper with the class content-restrict-line-length to bring it under control.

Currently, we're limiting this to 32em, which gives us about 70-odd characters.

For more information, see https://en.wikipedia.org/wiki/Line_length

Back to top