.content-section

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

A nested one. It shouldn't introduce extra margin at the top or the bottom of the parent.

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.

Back to top

Content section divider

Adds a keyline to separate content sections.

Options include .content-section--divider-start and .content-section--divider-end.

Back to top

Content section divider

Consequatur velit rerum eos ullam nihil eos. dolorum fuga reprehenderit voluptatibus iure quo ipsum iure. est aut repudiandae ut. sit alias amet id fugiat occaecati Quis consequatur voluptates iusto quam porro nesciunt illo ut dolor. velit necessitatibus reiciendis sequi consequatur sint illum animi nesciunt. ut iste minus sit iste repellat. blanditiis rerum blanditiis voluptate omnis pariatur deleniti et aut adipisci sed sunt quia. et saepe vitae et corrupti dolorum. rem quae explicabo nostrum dolor. est beatae et nihil sint voluptas voluptatem ipsam pariatur odit quaerat

Content section divider

Architecto exercitationem quo placeat. optio dicta non neque. odio rerum qui qui culpa et et nesciunt rem aut eum sapiente voluptatem voluptas repellat Soluta officia laudantium culpa ullam ut dicta beatae. expedita minus quia qui aut voluptates quibusdam laborum numquam. laudantium inventore numquam esse possimus est aspernatur nemo illo. maiores ut hic dolor sunt et. atque aut natus eum accusantium rem illo quae ad qui ea exercitationem at dicta qui

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