• More info
  • More info
  • More info
  • 152k responses
  • 1 responses
  • 5879 responses
Markup
 <ul class="sb-table-list sb-table-list--borderless sb-table-list--checkbox">
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-1" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label" for="table-list-checkbox-1">This is a single line item with a checkbox</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-color-light-1">More info</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-2" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label" for="table-list-checkbox-2">This is a single line item with a checkbox</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-color-light-1">More info</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-3" class="sb-checkbox-without-label__input" checked>
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label" for="table-list-checkbox-3">This is a single line item with a checkbox</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-color-light-1">More info</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-4" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label" for="table-list-checkbox-4">This is a single line item with a checkbox with a long long long long long long long long long long long long long long long long long long text</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-color-light-1">152k responses</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-5" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label" for="table-list-checkbox-5">This is a single line item with a checkbox</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-color-light-1">1 responses</span>
     </div>
   </li>
   <li class="sb-table-list__item sb-flex sb-flex-row">
     <div class="sb-checkbox-without-label sb-flex sb-margin-left sb-margin-top-s sb-margin-right-s sb-margin-bottom-s">
       <input type="checkbox" id="table-list-checkbox-6" class="sb-checkbox-without-label__input">
       <div class="sb-checkbox-without-label__checkmark-container">
         <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
           <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
     </div>
     <div class="sb-table-list__item-container sb-flex sb-flex-row sb-padding-bottom-s sb-padding-right sb-padding-top-s">
       <label class="sb-label sb-label--for-checkbox sb-table-list__label" for="table-list-checkbox-6">This is a single line item with a checkbox long text</label>
       <span class="sb-table-list__item-info sb-margin-left-s sb-text--s sb-color-light-1">5879 responses</span>
     </div>
   </li>
 </ul>
Source: components/_table-list.scss, line 69