Skip to main contentCarbon Design System

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" 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" 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" 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" 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>
Edit this page on GitHub
Previous
Components: Slider
Next
Structured list: Usage