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]-columns
to the row div, you get two, three or four 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 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 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