Skip to content

DOBT Style Guide

Layout

Grid

Basic

The grid currently uses a fixed-width gutter.

12
11
1
10
2
9
3
8
4
7
5
6
6
3
3
3
3
4
4
4
6
3
3
Toggle source

Nested

When nesting columns, make sure the total adds up to 12 columns or less.

6
4
4
4
Toggle source

Blank States

When there is no data to display in the current view, a well-designed blank state can prevent users from losing their momentum.

No ratings yet!

Ratings give you a standard set of criteria to judge responses.Add your first rating

or remove ratings entirely

Toggle source

Don't turn a blank state into a dead end. Provide users with a way to move forward.

Do use blank states to help explain the purpose of a page, and show users how to add data to it.

Toggle source