Structured list
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<section class="bx--structured-list">
<div class="bx--structured-list-thead">
<div class="bx--structured-list-row bx--structured-list-row--header-row">
<div class="bx--structured-list-th">Column1</div>
<div class="bx--structured-list-th">Column2</div>
<div class="bx--structured-list-th">Column3</div>
</div>
</div>
<div class="bx--structured-list-tbody">
<div class="bx--structured-list-row">
<div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
<div class="bx--structured-list-td">Row 1</div>
<div class="bx--structured-list-td">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</div>
</div>
<div class="bx--structured-list-row">
<div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
<div class="bx--structured-list-td">Row 2</div>
<div class="bx--structured-list-td">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</div>
</div>
</div>
</section>
Structured list with selection
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<section class="bx--structured-list bx--structured-list--border bx--structured-list--selection" data-structured-list>
<div class="bx--structured-list-thead">
<div class="bx--structured-list-row bx--structured-list-row--header-row">
<div class="bx--structured-list-th"></div>
<div class="bx--structured-list-th">Column1</div>
<div class="bx--structured-list-th">Column2</div>
<div class="bx--structured-list-th">Column3</div>
</div>
</div>
<div class="bx--structured-list-tbody">
<label aria-label="apache spark" class="bx--structured-list-row bx--structured-list-row--selected" tabindex="0">
<input tabindex="-1" class="bx--structured-list-input" value="apache spark" type="radio" name="services" title="apache spark" checked />
<div class="bx--structured-list-td">
<svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd" />
</svg>
</div>
<div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
<div class="bx--structured-list-td">Row 1</div>
<div class="bx--structured-list-td">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</div>
</label>
<label aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
<input tabindex="-1" class="bx--structured-list-input" value="Cloudant" type="radio" name="services" title="Cloudant" />
<div class="bx--structured-list-td">
<svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd" />
</svg>
</div>
<div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
<div class="bx--structured-list-td">Row 2</div>
<div class="bx--structured-list-td">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</div>
</label>
<label aria-label="block-storage" class="bx--structured-list-row" tabindex="0">
<input tabindex="-1" class="bx--structured-list-input" value="block-storage" type="radio" name="services" title="block-storage" />
<div class="bx--structured-list-td">
<svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd" />
</svg>
</div>
<div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 3</div>
<div class="bx--structured-list-td">Row 3</div>
<div class="bx--structured-list-td">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</div>
</label>
<label aria-label="open-whisk" class="bx--structured-list-row" tabindex="0">
<input tabindex="-1" class="bx--structured-list-input" value="open-whisk" type="radio" name="services" title="open-whisk" />
<div class="bx--structured-list-td">
<svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd" />
</svg>
</div>
<div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 4</div>
<div class="bx--structured-list-td">Row 4</div>
<div class="bx--structured-list-td">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</div>
</label>
</div>
</section>
Documentation
SCSS
Variables
All configurable variables are located in src/globals/scss/_vars.scss
name | description |
---|---|
$structured-list-padding |
Set padding value for structured-list. This will change gutter sizes between table cells. |
Mixins
Mixins specific to structured-list are located in src/components/structured-list/_mixins.scss.
All mixins listed below take an optional $padding
parameter. Default value for $padding
is equal to $structured-list-padding: 2rem !default;
, which can be overwritten.
name | params | description |
---|---|---|
padding-td--condensed |
$padding |
Customizes padding when .bx--structured-list--condensed modifier class is used. Default padding is the value of $structured-list-padding (2rem ). |
padding--data-structured-list |
$padding |
Customizes padding. Only used when [data-structured-list] attribute is on HTML indicating that this component uses <input type="radio"> controls. |
padding-td |
$padding |
Customizes padding for .bx--structured-list-td |
padding-th |
$padding |
Customizes padding for .bx--structured-list-th |
Modifiers
Use these modifiers with .bx--structured-list
class.
Selector | Description |
---|---|
.bx--structured-list--border |
Applies border around structured-list and white background-color |
.bx--structured-list--condensed |
Applies condensed styles for all body rows |
.bx--structured-list-content--nowrap |
Applies white-space: nowrap; on content. Prevents titles from wrapping in small viewports. |
.bx--structured-list--selection |
Applies styles used for selection variant of structured-list. |
.bx--structured-list-row--selected |
Applies modifier class to label row. This changes the background color to indicate that the row is selected. |
Use these modifiers with .bx--structured-list-td
class.
Selector | Description |
---|---|
.bx--structured-list-content--nowrap |
Applies white-space: nowrap; on content |
Javascript
Options
Option | Default Selector | Description |
---|---|---|
selectorInit |
[data-structured-list] |
The selector to find the StructuredList element. |
selectorStepElement |
.bx--structured-list-tbody .bx--structured-list-row |
The selector to find the step element. |
classActive |
'bx--structured-list-row--selected' |
The class to indicate a selected row |
FAQ
Keydown event
Once StructuredList
instance is initialized, use structured-list--selection.html and users will be able to make row selections with keyboard similar to radio buttons.
up
anddown
arrow keys for navigation (focus and select)tab
andshift + tab
for navigation (focus only)enter
andspace
for selecting
Chrome: up
and down
arrow keys will set focus
on <label>
elements and associated <input type="radio">
will recieve checked
attribute via StructuredList
JavaScript.
Firefox: up
and down
arrows keys will set focus on <input type="radio">
through the associated <label>
and will only set the checked
attribute on the input. Arrow keys will not set focus on the <label>
.
Add visual styles to text
You can add text to each cell in a structured-list. Use CSS to add visual styles to text.
HTML
<div class="bx--structured-list-td bold">Apache Spark</div>
CSS
.bold {
font-weight: 700;
}