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

Carbon Components is a component library for IBM Cloud

<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 for="apache-id" aria-label="apache spark" class="bx--structured-list-row bx--structured-list-row--selected" tabindex="0">
          <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 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 for="cloudant-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
          <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 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 for="block-storate-id" aria-label="block-storage" class="bx--structured-list-row" tabindex="0">
          <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 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 for="open-whisk-id" aria-label="open-whisk" class="bx--structured-list-row" tabindex="0">
          <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 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>