Design styleguide: tables
Container uses Porcelain as background, and always has 4px margins for left, right and bottom. Top depends on title row (see below)
Title labels use Sherpa Blue. Hover states TBD. Titles should always follow the alignment of the data that's displayed. Depending on the data, it could be left or right, almost never center aligned.
Rows can have different height, depending on use cases. They can be condensed, regular or relaxed. Depending on the type, they have different styles.
| Type | Height | Primarily used for | Shadow | Spacing between rows |
|---|---|---|---|---|
| Condensed | 40px | no shadow | Variants in product list | 2px |
| Regular | 48px | TBD | TBD | TBD |
| Relaxed | 56px | has shadow (see shadow section) | Products in product list | 4px |
In more complex tables, different types of rows can be combined and connected. The product list table is designed with relaxed rows, and each relaxed row includes condensed rows.
