Structured list
Color
Class | Property | Color token |
---|---|---|
.bx--structured-list-th | text color | $text-01 |
.bx--structured-list-td | text color | $text-02 |
.bx--structured-list-row--header-row | border-bottom | $ui-03 |
.bx--structured-list-row | border-bottom | $ui-03 |
Interactive states
Class | Property | Color token |
---|---|---|
.bx--structured-list-row--selected | background-color | $selected-ui |
.bx--structured-list-svg:checked | fill | $ui-05 |
.bx--structured-list-row:hover | background-color | $hover-row |
.bx--structured-list-svg:hover | fill | $ui-04 |
.bx--structured-list-row:focus | border | $focus |
Typography
Structured list headers should be set in title case, while all other text is set in sentence case. All typography is left aligned.
Property | Font-size (px/rem) | Font-weight | Type token |
---|---|---|---|
.bx--structured-list-th | 14 / 0.875 | Semi-Bold / 600 | $heading-01 |
.bx--structured-list | 14 / 0.875 | Regular / 400 | $body-long-01 |
Structure
Property | Property | px / rem | Spacing token |
---|---|---|---|
.bx--structured-list | min-width | 500 / 31.25 | – |
.bx--structured-list | min-width | 500 / 36 | – |
.bx--structured-list-th | padding-top | 16 / 1 | $spacing-05 |
.bx--structured-list-th | padding-bottom | 8 / 0.5 | $spacing-03 |
.bx--structured-list-th | padding-left, padding-right | 16 / 1 | $spacing-05 |
.bx--structured-list-td | padding-top | 16 / 1 | $spacing-05 |
.bx--structured-list-td | padding-bottom | 24 / 1.5 | $spacing-06 |
.bx--structured-list-td | padding-left, padding-right | 16 / 1 | $spacing-05 |
.bx--structured-list-svg | height, width | 16 / 1 | – |
![Spacing and measurements for Structured List Spacing and measurements for Structured List](/static/9d537ec087e9f305cc93504525c3128c/3cbba/structured-list-style-1.png)
The width of structured list varies based on content and layout.
![Spacing and measurements for structured list with selection Spacing and measurements for structured list with selection](/static/339cedf3d45d94fb56bdbc8144c4b2fe/3cbba/structured-list-style-2.png)
Spacing and measurements for default spacing with hang alignment and flush alignment| px / rem
![Spacing and measurements for structured list with selection Spacing and measurements for structured list with selection](/static/f2abf91fab416431795130ffdb1c57c0/3cbba/structured-list-style-3.png)
Spacing and measurements for condensed spacing with hang alignment and flush alignment | px / rem