Use tables to organize and display data.
Color
Column header
| Element | Property | Color token |
|---|
| Container | background-color | $layer-01 |
| | border-color | $border-subtle-01 |
| Title | text color | $text-primary |
| Icon | svg | $icon-secondary |
Row
| Element | Property | Color token |
|---|
| Container | background-color | $layer-02 |
| | border-color | $border-subtle-01 |
| Title | text color | $text-primary |
| Description | text color | $text-secondary |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Table header | 28 / 1.75 | Semibold / 600 | $heading-05 |
| Column header | 16 / 1 | Semibold / 600 | $heading-compact-01 |
| Row text | 16 / 1 | Regular / 400 | $body-compact-01 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Table header | margin-top | 16 / 1 | $spacing-05 |
| | margin-bottom | 24 / 1.5 | $spacing-06 |
| | padding-left, padding-right | 16 / 1 | $spacing-05 |
| Sort icon | padding | 8 / 0.5 | $spacing-03 |
| Column | padding | 16 / 1 | $spacing-05 |
| Row | padding | 16 / 1 | $spacing-05 |
