v4 content layout
This is documentation for the following classes:
- .content-columns
- content-columns--padding
- .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.
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 padding
In most cases, you'll want some padding around the columns.
Padding isn't added by default, but you can add it using classes on the row wrapper.
No padding
For default padding use content-columns--padding
, content-columns--horizontal-padding
or content-columns--vertical-padding
Default padding
For wide padding use content-columns--padding-wide
, content-columns--horizontal-padding-wide
or content-columns--vertical-padding-wide
Content columns can contain any number of children. They will just wrap onto the next line.
Four columns with complex content
aut occaecati sit harum cumque
sint autem dolores sed assumenda non architecto facilis est sequi accusamus debitis autem voluptatibus eius ipsum est iusto ipsum earum consectetur vitae repellendus eius autem esse ut nesciunt quae ullam
eum magnam dolores laboriosam et
sunt accusantium est et maxime dolore velit sint sed est optio unde amet consectetur pariatur et est quibusdam adipisci eos et aut dolores et blanditiis maiores eum aut ratione quo
ipsa placeat nihil rerum velit
et sunt illum nulla impedit officia sit eum rem error nostrum id velit facere id ut consequatur sint dolor voluptatum occaecati dolor ut dolor vero exercitationem et sit non beatae
itaque asperiores dolorem dolore inventore
in quo eos vel sapiente autem consequatur architecto velit aut inventore qui commodi alias assumenda dolore blanditiis ex omnis et quisquam eos ipsa labore aut tempore mollitia sapiente mollitia ex
Unspecified number of columns
Use with caution. Some browsers handle this better than others.
corrupti ut nam
reiciendis ipsa nemo deserunt minus iusto fugiat voluptates omnis sit est aliquam assumenda modi quidem omnis est aperiam velit quis ab dignissimos occaecati nihil excepturi dolores ut error sunt quia
cum voluptates cum
occaecati vel ea vel voluptates dolor officia quidem neque architecto ipsa eaque a sit minima similique est non ut consectetur veritatis velit voluptatem doloremque non ab ut quo maiores aut
voluptas modi rerum
aperiam tempore nam iusto beatae ipsum qui doloremque sequi iusto consequatur ipsam aut ex quos incidunt numquam exercitationem voluptas officia natus sint ullam eligendi itaque qui itaque impedit ducimus sed
cum in quia
dolorum quae quibusdam odio dolorum beatae ipsum quibusdam adipisci aspernatur dolorem ut et molestias perspiciatis maiores explicabo nulla similique est eaque enim quam ut sit ipsa saepe dolores autem a
aut eaque sed
illo dolore id ducimus cumque placeat voluptates quia expedita velit quis voluptas ea qui voluptatum quasi repudiandae optio dolorem dolorum omnis voluptates nostrum explicabo id quia iusto quis saepe et
optio non alias
quia quia et voluptatem perspiciatis dignissimos asperiores et hic voluptatem facilis non sunt architecto iusto rerum voluptate quos illo earum facilis neque optio est et rerum qui officia asperiores incidunt
suscipit cupiditate et
totam cupiditate sint quisquam facere rerum enim necessitatibus sequi qui sed nemo possimus illum est alias a harum et quam aut eum provident accusamus et eveniet ipsa et dolorem molestiae
nam praesentium itaque
harum sed quod quam aperiam tempora eum rerum suscipit eveniet aut at vel alias enim sed voluptatem quam eos commodi voluptatum unde sint quae et est incidunt a et nisi
laboriosam culpa eos
aut delectus amet quam harum deleniti voluptates expedita voluptas voluptatem ut esse nesciunt qui et quia facere dolor porro quo et voluptatem cum vel quas voluptates voluptas sit voluptas aut
omnis delectus repellendus
ipsum officiis aut eaque laudantium aut iure rerum nemo esse delectus exercitationem et eos possimus facilis harum qui at possimus ducimus vitae aut qui aut sint non sapiente eum minus
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.
Here is an example of a link to help check colour contrast.
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 dims a section and adds a background and padding.
Make sure to add aria-hidden="true"
.
It is also important that all focusable elements are disabled or otherwise removed from the focus order.
aria-hidden="true"
This can be applied to any content-section with no other classes needed.
It is also important that all focusable elements are disabled or otherwise removed from the focus order.
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.
-
Omnis error aut illo voluptatibusVoluptatum dolorum
Content section divider
Adds a keyline to separate content sections.
Options include .content-section--divider-start
and .content-section--divider-end
.
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