Boxes
0001-01-01
Boxes are used to highlight content and make page layouts more interesting. Box designs will tend to vary quite a bit from site to site, but we provide some standard design classes out of the box.
Table of Contents
White, Grey, Black
Make your grey plain and untinted if you like. Or it can be a good idea to add a very subtle tinge of the site's main theme color, to make things feel a little less bland.
Box
Boxes with Background Colors
Special Box Styles
A Highlight Box - This is a Heading in a Box
box box-highlight
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum urna et magna eleifend euismod. Morbi fermentum eget enim nec finibus. Vestibulum euismod consequat aliquet.
Boxes with Helper Classes
Color #1 Background
box box-wide padding-thickest padding-bottom-none padding-thin-medium padding-bottom-none-medium margin-bottom-thickest bg-color-1
This text has a link in it for testing.
This is a Heading in a Box
box bg-color-1-light padding-thick margins-none text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum urna et magna eleifend euismod. Morbi fermentum eget enim nec finibus. Vestibulum euismod consequat aliquet.
- Duis blandit,
- lectus in dapibus iaculis,
- massa leo tempus leo,
- quis lacinia ligula orci vitae libero.
In vehicula laoreet ullamcorper. Aenean dapibus quam sit amet elit accumsan posuere. Vivamus lacinia ultricies ante id porttitor. Sed fermentum molestie laoreet. Aenean malesuada vel mauris ac eleifend.
Box Styles and the Related Classes Can Be Used on Columns
Content in a Column Box
col padding box-border
This text has a link in it for testing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum urna et magna eleifend euismod. Morbi fermentum eget enim nec finibus. Vestibulum euismod consequat aliquet.
This is Content in a Box
col padding-thick margins-none box-highlight
ivamus lacinia ultricies ante id porttitor. Sed fermentum molestie laoreet.
More Content in a Column Box
col padding-thick bg-color-1-light
This text has a link in it for testing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum urna et magna eleifend euismod. Morbi fermentum eget enim nec finibus. Vestibulum euismod consequat aliquet.
Box Inside a Column
This text has a link in it for testing. Columns are the same height by default so column box layouts are too (like the first three columns in this example). But a box can be placed inside a column and it'll take on its own height.