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