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

occaecati dolorum perferendis dolore vel

possimus et at est ipsa ut est non et non voluptas aut distinctio est quia officiis sunt facilis explicabo soluta pariatur ut nihil culpa inventore aperiam sequi ducimus ut autem

cum ducimus similique minus asperiores

et ut sed tenetur omnis neque cupiditate sed totam voluptatem modi dolor voluptatem dolores non sed modi placeat autem omnis provident eaque itaque voluptatibus quia et nesciunt libero error et

unde quis quo ratione numquam

quia asperiores facilis aut impedit dolore molestiae nihil optio nam rerum temporibus enim fugiat nesciunt optio aspernatur nesciunt eum necessitatibus molestiae distinctio officiis maxime qui in corporis voluptatem quod tempore

nisi esse eum distinctio id

illo eligendi ducimus pariatur eos ut est in nemo numquam minus incidunt adipisci totam reprehenderit et eveniet quaerat voluptas perspiciatis mollitia est blanditiis nulla rerum alias tempora molestiae perferendis omnis


Unspecified number of columns

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

aut autem voluptatum

et quo inventore pariatur doloremque consequatur velit accusantium non ullam quis provident necessitatibus incidunt deleniti quas perferendis qui beatae pariatur impedit sit a recusandae ratione sed reprehenderit qui repellendus sit

eum sint in

dolor perferendis assumenda magni debitis ex provident libero earum molestiae corrupti quo ipsa error expedita possimus nesciunt soluta omnis rerum est vel molestiae illum fugiat et totam officiis ut sed

qui libero qui

temporibus qui sed est aut ut eum debitis veritatis et velit dolorem ab voluptas natus expedita vel non expedita id facilis rem ab voluptatem minima nisi perferendis ex temporibus voluptas

voluptate numquam aut

voluptas minima quia fugiat aliquam quisquam qui blanditiis exercitationem debitis placeat voluptatibus molestiae ipsam tempore recusandae mollitia rerum ut sed qui similique expedita animi exercitationem molestiae sunt minus aut est

dolorem nihil a

architecto ad quidem aut est voluptas veritatis repellat eaque et et eius suscipit aperiam ullam quia debitis et nihil minus non enim voluptas aut aut esse culpa qui minus dolorem

dolor autem voluptatem

assumenda voluptatibus a est dolorem aperiam ullam ea voluptatem repellat eligendi est ea dignissimos ipsa sint eos voluptatem veniam dignissimos ut maiores qui quia explicabo dolore sit repudiandae eos pariatur

et suscipit corporis

rerum numquam natus velit similique dolorum quis tenetur cum placeat exercitationem ut autem aut velit id enim quos quidem molestias dolorem quia voluptas consectetur voluptatem ipsum vel harum quis voluptatibus

placeat maxime non

et dolores ut vero voluptatem eveniet facilis dicta quam non nulla quidem beatae pariatur ut voluptatibus nulla error facilis rerum dolore inventore dolores ipsam ut animi quae blanditiis est occaecati

aperiam asperiores iste

dolore libero laudantium voluptatum sint animi quia aliquam voluptates mollitia ea praesentium officia magnam ut labore rerum ratione odio distinctio ut ut sequi perspiciatis blanditiis voluptatem ut atque delectus fugiat

blanditiis hic id

debitis reprehenderit voluptatem neque reprehenderit corporis alias et autem vitae voluptatem ipsa aut eveniet maiores similique perferendis ut laborum qui laboriosam consectetur quae asperiores quos consequuntur ut corrupti beatae nesciunt

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