Overview
Section¶
A section dashboard is made up of one or more sections. Each section is made up of various widgets which combine to make the dashboard layout. If a section is given a title, that title appears at the top of the section in the form of an "accordion", allowing the section to be toggled open/closed. This title accordion can also optionally contain dropdown menus which can be used to filter the data contained in that section's widgets.
Tip
A section can be "collapsed" by default; see the Tutorial for more information.
Grid¶
Each section is based on a simple grid. Under the hood, the grid is implemented by using a subset of CSS Grid Layouts
Columns¶
A section's grid can be up to 8 columns, but can be as low as a single column depending on screen size. See the table below:
| Screen size | Layout name | Columns |
|---|---|---|
| 0-599px | XS | 1 |
| 600-904px | SM | 2 |
| 905-1239px | MD | 4 |
| 1240-1439px | LG | 6 |
| 1440+ | XL | 8 |
Rows¶
The section grid can be any number of rows high, depending on how many widgets you want to display on a dashboard.
A column width will vary depending on the viewport width, but the height of a row is always fixed at 130px.
Gutter¶
The gutter (the spacing between columns and rows) is fixed at 16px;
Widgets¶
A widget can be placed anywhere on a section's grid, and can be up to 8 columns wide, and 4 rows high.