Layout
Our system is based on a standard 12-column grid to allow for flexible modules of varying sizes. Using a grid keeps designs neat and organized, and consistent across products. The grid encourages alignment and promotes balance.
Suggested Responsive Grid Layouts
On This Page
Tablets
Align designs to a 6 column grid. Rows may consist of multiple containers.
Phones
Align designs to a 4 column grid. Modules are stacked in full-width containers.
12 Column Grid
Using a 12 column grid allows for flexibility while maintaining order. The 12 columns are easily split to accomodate two, three or four columns, and asymmetrical layouts.
Features
- 320 minimum width
- 1600 maximum width
- 20px column gutter
- Elastic columns
Column Arrangements
Two Columns
Three Columns
Four Columns
Two Columns
Two Columns
Breakpoints
| Breakpoint | Range | Page Margin | Columns |
|---|---|---|---|
| 1200 | 1200-1600px | 40px | 12 |
| 992 | 992-1199px | 40px | 12 |
| 768 | 768-991px | 40px | 12 |
| 576 | 576-767px | 20px | 12 |