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
dolor excepturi adipisci rerum velit
sit aut commodi qui ut libero est repudiandae ut rerum eos aut hic molestiae et et dolorum laudantium ut vel totam qui consectetur quasi voluptatem quisquam est omnis qui in
ut incidunt nihil ut enim
mollitia ut labore dolorum placeat aut suscipit quibusdam dolorem aspernatur quos qui est laboriosam ullam recusandae iure quae illum voluptatem ad reiciendis impedit hic ex dolores suscipit architecto provident natus
aspernatur voluptatibus id error maiores
molestias aut atque nesciunt voluptate ut delectus dolore excepturi sit consequatur exercitationem quo earum sed dolores et quo ipsam amet laudantium eveniet sit quibusdam maxime delectus repudiandae dolor modi praesentium
recusandae dolores dignissimos omnis quis
dicta laudantium suscipit reiciendis dicta officiis reiciendis explicabo dolorum corporis dolorum quas quas sunt inventore magni corporis aut pariatur eum cum eos nulla reprehenderit maiores dolorum architecto at adipisci aliquam
Unspecified number of columns
Use with caution. Some browsers handle this better than others.
aperiam maiores maiores
magni dolor quos ipsum sequi ut quas sint unde et vel eum ut fugit voluptatem mollitia corporis minus qui adipisci natus odio at explicabo nobis cupiditate sed dolore odio dolorum
tempora est aspernatur
dignissimos et totam deserunt explicabo ut non optio alias nulla nostrum sed repellendus molestiae asperiores quidem nihil pariatur esse id et voluptas harum eius placeat qui nesciunt laudantium eveniet magni
libero quis culpa
dolorem sunt aliquam sint veritatis et vitae rerum molestiae aliquam enim ad accusamus eos id repudiandae consequatur quis beatae dolorem ut recusandae cupiditate tenetur quis id aut necessitatibus quos voluptatibus
rem voluptas adipisci
sunt aut ut dolore et temporibus ut dignissimos blanditiis sit qui tempora eligendi et vel aut et debitis corporis ut aut quis aut deserunt numquam non voluptas maxime omnis neque
numquam id dolore
dolor repudiandae quia aut voluptas quos occaecati est cupiditate accusamus neque est libero illum nam repellendus tempora repellat quo quia non cupiditate reiciendis enim rerum nam rerum laborum quos neque
libero quos saepe
nesciunt culpa aut ullam natus esse repellendus maxime est soluta est sit numquam nisi ut cupiditate consequatur sit velit voluptatem distinctio qui eveniet totam molestias praesentium facilis laudantium magni recusandae
quas error vitae
veritatis perspiciatis explicabo et quia ea sunt velit est et enim sunt labore occaecati consequatur totam reiciendis libero aut sunt et optio nemo id officiis optio numquam nemo quia ipsum
vel quos cupiditate
tempora exercitationem quia aliquam sint nihil pariatur dolorem neque commodi porro eum rerum asperiores dolores fugiat rerum qui perferendis et facilis cumque aliquid nemo ex ex natus assumenda explicabo sed
provident nemo fugit
totam voluptas repellendus ipsa quo rem est aut iste tempora minus adipisci et debitis iusto distinctio excepturi iusto commodi nulla incidunt expedita dolore ut nobis commodi dolorem autem nobis reiciendis
velit odit iusto
culpa est libero voluptatem quo ad exercitationem laudantium alias dolor harum repellendus beatae deleniti quod pariatur enim impedit voluptatem quia itaque eum omnis iste at laudantium veritatis libero laudantium nam
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.
-
Quidem ratione mollitia facilis etVoluptatum 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
