2.37.2 #Components.table-list.single-line-checkbox Single line with checkbox
Browser support: IE10+, Safari6+, Firefox30+, Chrome30+
-
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