Content layout
This is documentation for the following classes:
- .content-columns
- .content-section
- .content-section--highlight
- .content-section--highlight-secondary
- .content-section--disabled
- .content-section--divider
- .content-restrict-line-length
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
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.
-
Nostrum eos accusantium ea ea ut earum culpa libero quo omnis molestiae magni eaVoluptatum dolorum
Content section divider
Adds a keyline to separate content sections. DF-515
Adds a keyline to separate content sections.
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
