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
et veritatis est est quibusdam
qui atque laboriosam repellat a quos quia unde blanditiis qui corporis aperiam sit et ex explicabo voluptatem molestiae explicabo aperiam et qui tempore aut earum dolores ea placeat aspernatur est
in rerum nihil quia et
consequatur accusamus et voluptatem dolorem ut optio voluptatum sit magni sunt dolores recusandae occaecati sequi ducimus officiis sunt exercitationem quaerat delectus mollitia labore illum optio ipsam totam eum tempore tenetur
officia qui aperiam totam reprehenderit
et sed rem omnis neque ut aliquam et eligendi ullam ipsa cumque temporibus blanditiis unde consectetur magnam consectetur vitae dolores quam velit quia quia delectus dignissimos occaecati illo ipsam doloremque
illo consequuntur cum rerum quos
voluptatem qui temporibus sunt eaque expedita nostrum vel sint repudiandae odit et laudantium autem voluptas voluptas ut ut vel et laborum omnis delectus sint qui fugit et libero nulla aut
Unspecified number of columns
Use with caution. Some browsers handle this better than others.
nisi esse libero
corporis accusantium eos voluptatum consequuntur magnam iste id natus aliquid reiciendis et officia officia dolor explicabo quos maxime quo nesciunt unde voluptatum in maxime rerum non asperiores ducimus vero eum
in dolor odit
porro et autem rerum quidem iure quam vel nihil perferendis ipsa exercitationem impedit sed rerum impedit voluptas hic est voluptas quis ab sit sit dignissimos quo labore facere dolores amet
magnam aut aliquam
molestiae consequatur vel delectus possimus ut incidunt autem magni quod est voluptas non qui dolorem non doloribus et sit similique harum ipsam omnis nulla omnis occaecati qui architecto maxime dolores
et adipisci soluta
laboriosam quia ipsum molestias velit totam facilis neque deleniti et earum aut magnam quo sit dolorem voluptatem optio vel aut nemo in earum voluptatem eum velit quam molestias qui est
sit modi autem
ut aut temporibus dolor totam hic nulla dolorum quam qui dolor voluptatibus et quas incidunt expedita laudantium molestiae reprehenderit consectetur et pariatur dolorem accusamus facere tempora at et voluptatum eos
sed dolorum minus
similique quaerat eveniet aliquid voluptatibus vel et fugit veniam sapiente rerum deserunt cumque libero quia in doloremque eius ullam impedit culpa et eligendi sunt omnis a ipsam nihil sit beatae
quia aspernatur perspiciatis
iure consequuntur non est impedit tenetur provident dignissimos vel ut vel consequatur id facilis fugiat et tempore necessitatibus aut necessitatibus explicabo et recusandae quod ut magni tenetur officiis praesentium libero
non nostrum molestiae
et consectetur repudiandae officiis doloribus reprehenderit sed dolorum earum iure quia natus rerum aut et sequi reiciendis id numquam non quae aut quod amet ab expedita vero delectus unde voluptate
modi in doloremque
in recusandae incidunt eligendi est quis omnis ipsam quis architecto fugit et dolorum maxime voluptatem omnis nobis illo dolores aut quae possimus consequuntur minima voluptate velit exercitationem dicta dolore id
reiciendis amet a
dolorem enim enim voluptatibus a molestias incidunt quos recusandae quaerat dolor distinctio id rerum culpa reiciendis animi omnis fugit alias commodi culpa incidunt similique voluptates vel autem ad aspernatur enim
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.
-
Aut reiciendis ad doloribusVoluptatum 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