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/bb0f582b4165e2233f0ec33702179862/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/dc35a93b7fca9ef02eeff4c77f0595e8/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/39f6ca2a6da0662322ce32949c129e23/3cbba/structured-list-style-3.png)
Spacing and measurements for condensed spacing with hang alignment and flush alignment | px / rem