.content-section
This is documentation for the following classes:
- .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.
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.
-
Est cumque ipsam magni natus ratione voluptatem est ducimus ut modi consectetur neque namVoluptatum dolorum
Content section divider
Adds a keyline to separate content sections.
Options include .content-section--divider-start and .content-section--divider-end.
Content section divider
Occaecati odio fugit aspernatur. culpa qui numquam itaque et sunt. doloremque dolores asperiores reiciendis sed voluptas quisquam et deleniti debitis magnam repudiandae reprehenderit accusantium. esse est sit ut enim sint nisi similique expedita numquam possimus maiores molestiae quis. ut ex ad culpa ipsam Et autem et est aliquam quaerat explicabo quasi consequatur quae. et facere esse dolorem quibusdam. numquam provident alias repellendus quidem
Content section divider
Mollitia cupiditate laborum hic praesentium. dolorem dolorem optio facilis quod sequi. doloribus est eos facere illum explicabo consequuntur repellat itaque. dolores impedit ut adipisci rerum aliquam animi. natus culpa fuga et itaque officia ipsa illum dolorem dolorem adipisci labore Enim qui amet assumenda. ut quidem exercitationem dolor blanditiis animi sed consequuntur harum iusto id. pariatur suscipit eum cum qui repudiandae quia asperiores. beatae autem doloremque quis blanditiis eum distinctio velit quasi
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