Structured list

Structured list

Column1
Column2
Row 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue.
Row 2
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.
Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  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>
  </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">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue.
    </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">
      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

Column1
Column2
Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  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--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">Column1</div>
        <div class="bx--structured-list-th">Column2</div>
        <div class="bx--structured-list-th"></div>
    </div>
  </div>
  <div class="bx--structured-list-tbody">
        <label for="apache-id" aria-label="apache spark" class="bx--structured-list-row bx--structured-list-row--selected" tabindex="0">
            <div class="bx--structured-list-td bx--structured-list-content--nowrap">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.
    </div>
          <input tabindex="-1" id="apache-id" class="bx--structured-list-input" value="apache spark" type="radio" name="services" title="apache spark" checked />
          <div class="bx--structured-list-td">
            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
          </div>
        </label>
        <label for="cloudant-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
            <div class="bx--structured-list-td bx--structured-list-content--nowrap">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>
          <input tabindex="-1" id="cloudant-id" class="bx--structured-list-input" value="Cloudant" type="radio" name="services" title="Cloudant" />
          <div class="bx--structured-list-td">
            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
          </div>
        </label>
        <label for="block-storate-id" aria-label="block-storage" class="bx--structured-list-row" tabindex="0">
            <div class="bx--structured-list-td bx--structured-list-content--nowrap">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.
    </div>
          <input tabindex="-1" id="block-storate-id" class="bx--structured-list-input" value="block-storage" type="radio" name="services" title="block-storage" />
          <div class="bx--structured-list-td">
            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
          </div>
        </label>
        <label for="open-whisk-id" aria-label="open-whisk" class="bx--structured-list-row" tabindex="0">
            <div class="bx--structured-list-td bx--structured-list-content--nowrap">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>
          <input tabindex="-1" id="open-whisk-id" class="bx--structured-list-input" value="open-whisk" type="radio" name="services" title="open-whisk" />
          <div class="bx--structured-list-td">
            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
          </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 and down arrow keys for navigation (focus and select)
  • tab and shift + tab for navigation (focus only)
  • enter and space 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;
}
Edit this page on GitHub
Previous
Components: Slider
Next
Structured list: Usage