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