carbon-components/html/structured-list/structured-list--selection.html

Carbon Components is a component library for IBM Cloud

<!-- 
  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>