Option Selectors

Single-Option Selectors (Radio, Few Options)

Use radio selectors when there are 6 or fewer options.

Default Styles 

<label class="adb-selector adb-js-radio" for="guide-radio-default1">
  <span class="adb-selector--input">
    <input checked id="guide-radio-default1" name="radio-default" type="radio">
  </span>
  <span class="adb-selector--value">
    Show as primary pricing plan
    In sit est mollitia omnis nesciunt. repudiandae ut ad aperiam eveniet et. libero quas quod fugiat deserunt tempora esse. odio quaerat fugit quaerat magnam reprehenderit autem officia dignissimos qui nihil exercitationem est. consectetur voluptatem earum pariatur voluptate quia
  </span>
</label>
<label class="adb-selector adb-js-radio" for="guide-radio-default2">
  <span class="adb-selector--input">
    <input id="guide-radio-default2" name="radio-default" type="radio">
  </span>
  <span class="adb-selector--value">
    This edition will be selected when a customer chooses free trial
  </span>
</label>
<label class="adb-selector adb-js-radio" for="guide-radio-default3">
  <span class="adb-selector--input">
    <input disabled id="guide-radio-default3" name="radio-default" type="radio">
  </span>
  <span class="adb-selector--value">
    This edition can only be bought as a bundle.
  </span>
</label>

<label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline1">
  <span class="adb-selector--input">
    <input checked id="guide-radio-inline1" name="radio-inline" type="radio">
  </span>
  <span class="adb-selector--value">
    Inline option 1
  </span>
</label>
<label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline2">
  <span class="adb-selector--input">
    <input id="guide-radio-inline2" name="radio-inline" type="radio">
  </span>
  <span class="adb-selector--value">
    Inline option 2
  </span>
</label>
<label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline3">
  <span class="adb-selector--input">
    <input id="guide-radio-inline3" name="radio-inline" type="radio">
  </span>
  <span class="adb-selector--value">
    Inline option 3
  </span>
</label>

<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-bar1">
  <span class="adb-selector--input">
    <input checked id="guide-radio-bar1" name="radio-bars" type="radio">
  </span>
  <span class="adb-selector--value">
    Option 1
  </span>
</label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-bar2">
  <span class="adb-selector--input">
    <input id="guide-radio-bar2" name="radio-bars" type="radio">
  </span>
  <span class="adb-selector--value">
    <span>Option 2</span>
  </span>
</label>

<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-symbol1">
  <span class="adb-selector--input">
    <input checked id="guide-radio-symbol1" name="radio-bars-symbol" type="radio">
  </span>
  <span class="adb-selector--value">
    Option 1
  </span>
  <span class="adb-selector--affix">
    <i class="adb-icon__star"></i>
  </span>
</label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-symbol2">
  <span class="adb-selector--input">
    <input id="guide-radio-symbol2" name="radio-bars-symbol" type="radio">
  </span>
  <span class="adb-selector--value">
    Option 2
  </span>
  <span class="adb-selector--affix">
    <i class="adb-icon__star"></i>
  </span>
</label>

Single-Option Selectors (Dropdowns, Many Options)

Use dropdown selectors when there are more than 6 options. Functionally, dropdown selectors are different from button menus. Dropdown selectors allow users to select an option for a field in a form whereas action menus function as navigation, allowing users to take different actions or navigate to different pages.

Styles

Example Class Code
.adb-js-dropdown.adb-dropdown 
<div class="adb-js-dropdown adb-dropdown">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>
.adb-js-dropdown.adb-dropdown.adb-dropdown__inset 
<div class="adb-js-dropdown adb-dropdown adb-dropdown__inset">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>

Sizes

States

Example Class Code
.adb-js-dropdown.adb-dropdown 
<div class="adb-js-dropdown adb-dropdown">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>
.adb-js-dropdown.adb-dropdown.adb-is-error 
<div class="adb-js-dropdown adb-dropdown adb-is-error">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>

Fallback

Below is a fallback option for dropdown selectors, for instances when it is not possible to use Javascript to customize the dropdown.

<select>
  <option>Default first option</option>
  <option>Lorem ipsum option</option>
  <option>Lorem ipsum option</option>
</select>

Binary-Option Selector (Toggles)

<label class="adb-toggle" for="toggle-input">
  <input class="adb-toggle--input" id="toggle-input" type="checkbox">
  <span class="adb-toggle--control"></span>
  <span class="adb-toggle--value">
    Product Visibility
  </span>
</label>
<label class="adb-toggle" for="toggle-input2">
  <input checked class="adb-toggle--input" id="toggle-input2" type="checkbox">
  <span class="adb-toggle--control"></span>
  <span class="adb-toggle--value">
    Product Visibility
  </span>
</label>

Multiple-Options Selectors (Checkboxes)

Default Styles 

<label class="adb-selector adb-js-checkbox" for="guide-checkbox-default1">
  <span class="adb-selector--input">
    <input checked id="guide-checkbox-default1" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Show as primary pricing plan
  </span>
</label>
<label class="adb-selector adb-js-checkbox" for="guide-checkbox-default2">
  <span class="adb-selector--input">
    <input id="guide-checkbox-default2" type="checkbox">
  </span>
  <span class="adb-selector--value">
    This edition will be selected when a customer chooses free trial
  </span>
</label>
<label class="adb-selector adb-js-checkbox" for="guide-checkbox-default3">
  <span class="adb-selector--input">
    <input disabled id="guide-checkbox-default3" type="checkbox">
  </span>
  <span class="adb-selector--value">
    This edition can only be bought as a bundle.
  </span>
</label>

<label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline1">
  <span class="adb-selector--input">
    <input checked id="guide-checkbox-inline1" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Inline option 1
  </span>
</label>
<label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline2">
  <span class="adb-selector--input">
    <input id="guide-checkbox-inline2" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Inline option 2
  </span>
</label>
<label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline3">
  <span class="adb-selector--input">
    <input id="guide-checkbox-inline3" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Inline option 3
  </span>
</label>

<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-bar1">
  <span class="adb-selector--input">
    <input checked id="guide-checkbox-bar1" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Option 1
  </span>
</label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-bar2">
  <span class="adb-selector--input">
    <input id="guide-checkbox-bar2" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Option 2
  </span>
</label>

<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-symbol1">
  <span class="adb-selector--input">
    <input checked id="guide-checkbox-symbol1" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Option 1
  </span>
  <span class="adb-selector--affix">
    <i class="adb-icon__star"></i>
  </span>
</label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-symbol2">
  <span class="adb-selector--input">
    <input id="guide-checkbox-symbol2" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Option 2
  </span>
  <span class="adb-selector--affix">
    <i class="adb-icon__star"></i>
  </span>
</label>

Multi-Select Field

<ul class="adb-js-checkboxes_field adb-checkboxes_field">
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category1">
      <span class="adb-selector--input">
        <input id="editor-categories-category1" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 1
      </span>
    </label>
    <ul class="adb-checkboxes_field--item_list">
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category6">
          <span class="adb-selector--input">
            <input id="editor-categories-category6" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 1
          </span>
        </label>
      </li>
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category7">
          <span class="adb-selector--input">
            <input id="editor-categories-category7" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 2
          </span>
        </label>
      </li>
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category8">
          <span class="adb-selector--input">
            <input id="editor-categories-category8" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 3
          </span>
        </label>
      </li>
    </ul>
  </li>
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category2">
      <span class="adb-selector--input">
        <input id="editor-categories-category2" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 2
      </span>
    </label>
    <ul class="adb-checkboxes_field--item_list">
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category9">
          <span class="adb-selector--input">
            <input id="editor-categories-category9" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 1
          </span>
        </label>
      </li>
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category10">
          <span class="adb-selector--input">
            <input id="editor-categories-category10" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 2
          </span>
        </label>
      </li>
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category11">
          <span class="adb-selector--input">
            <input id="editor-categories-category11" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 3
          </span>
        </label>
      </li>
    </ul>
  </li>
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category3">
      <span class="adb-selector--input">
        <input id="editor-categories-category3" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 3
      </span>
    </label>
  </li>
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category4">
      <span class="adb-selector--input">
        <input id="editor-categories-category4" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 4
      </span>
    </label>
  </li>
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category5">
      <span class="adb-selector--input">
        <input id="editor-categories-category5" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 5
      </span>
    </label>
  </li>
</ul>

Tiered Multi-Select Field

<div class="adb-tags_field adb-js-tags_field">
  <div class="adb-tags_field--inputs">
    <ul class="adb-tags_field--categories">
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category1" id="category1-link">
          Industry
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category2" id="category2-link">
          Type
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category3" id="category3-link">
          Attribute
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
    </ul>
    <div class="adb-tags_field--subcategories">
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category1">
        <label class="adb-selector adb-js-checkbox" for="subcategory7">
          <span class="adb-selector--input">
            <input id="subcategory7" type="checkbox" value="Real Estate">
          </span>
          <span class="adb-selector--value">
            Real Estate
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory8">
          <span class="adb-selector--input">
            <input id="subcategory8" type="checkbox" value="Law">
          </span>
          <span class="adb-selector--value">
            Law
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory9">
          <span class="adb-selector--input">
            <input id="subcategory9" type="checkbox" value="Education">
          </span>
          <span class="adb-selector--value">
            Education
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory10">
          <span class="adb-selector--input">
            <input id="subcategory10" type="checkbox" value="Salon">
          </span>
          <span class="adb-selector--value">
            Salon
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory11">
          <span class="adb-selector--input">
            <input id="subcategory11" type="checkbox" value="Fitness">
          </span>
          <span class="adb-selector--value">
            Fitness
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory12">
          <span class="adb-selector--input">
            <input id="subcategory12" type="checkbox" value="Health Care">
          </span>
          <span class="adb-selector--value">
            Health Care
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory13">
          <span class="adb-selector--input">
            <input id="subcategory13" type="checkbox" value="Hotel">
          </span>
          <span class="adb-selector--value">
            Hotel
          </span>
        </label>
      </div>
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category2">
        <label class="adb-selector adb-js-checkbox" for="subcategory3">
          <span class="adb-selector--input">
            <input id="subcategory3" type="checkbox" value="Customer Relationship Management">
          </span>
          <span class="adb-selector--value">
            Customer Relationship Management
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory4">
          <span class="adb-selector--input">
            <input id="subcategory4" type="checkbox" value="Call Management">
          </span>
          <span class="adb-selector--value">
            Call Management
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory5">
          <span class="adb-selector--input">
            <input id="subcategory5" type="checkbox" value="Live Chat">
          </span>
          <span class="adb-selector--value">
            Live Chat
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory6">
          <span class="adb-selector--input">
            <input id="subcategory6" type="checkbox" value="Scheduling and Appointments">
          </span>
          <span class="adb-selector--value">
            Scheduling and Appointments
          </span>
        </label>
      </div>
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category3">
        <label class="adb-selector adb-js-checkbox" for="subcategory1">
          <span class="adb-selector--input">
            <input id="subcategory1" type="checkbox" value="Conferencing">
          </span>
          <span class="adb-selector--value">
            Conferencing
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory2">
          <span class="adb-selector--input">
            <input id="subcategory2" type="checkbox" value="Email">
          </span>
          <span class="adb-selector--value">
            Email
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tags adb-tags_field--tags adb-js-tags_field--tags"></div>
</div>

Selectable Table Rows

Edition Included Price
Gold Edition 3 users
25 Gigabytes
  • $199.95 / user / month Free Trial
  • $180.00 / month for 1-25 users + $9.95.00 / email
  • $180.00 / month Quo nulla non aut vel vitae repellendus est + $9.95.00 / email Nam quae quae possimus tempore deserunt ipsum voluptatem molestias
Silver Edition 2 users
  • $79.95 / user / month + $0.00 / email / month 2-Month Contract
  • $199.95 / user / day + $0.00 / email / month 2-Day Contract
Bronze Edition 1 users
  • $9.95 / user / month for 1-25 users + $0.00 / email / month 
<table class="adb-table__actionable adb-table__multiline">
  <colgroup>
    <col span="1">
    <col width="30%">
    <col width="20%">
    <col width="50%">
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th>Edition</th>
      <th>Included</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr class="adb-js-radio">
      <td>
        <input checked id="purchase-pricing-plan1" name="purchase-pricing-plans" type="radio">
      </td>
      <td>Gold Edition</td>
      <td>
        3 users
        <br>
        25 Gigabytes
      </td>
      <td>
        <ul class="adb-list__feature">
          <li>
            <strong>$199.95 / user / month</strong>
            <span class="adb-badge adb-badge__free">Free Trial</span>
          </li>
          <li>
            <strong>$180.00 / month for 1-25 users</strong>
            <span class="adb-caption">+ $9.95.00 / email</span>
          </li>
          <li>
            <strong>
              $180.00 / month
              Distinctio nemo iusto ea minus repudiandae voluptas vel quo ut sapiente sapiente accusamus repellat
            </strong>
            <span class="adb-caption">
              + $9.95.00 / email
              Et earum accusamus et officiis
            </span>
          </li>
        </ul>
      </td>
    </tr>
    <tr class="adb-js-radio">
      <td>
        <input id="purchase-pricing-plan2" name="purchase-pricing-plans" type="radio">
      </td>
      <td>Silver Edition</td>
      <td>2 users</td>
      <td>
        <ul class="adb-list__feature">
          <li>
            <strong>$79.95 / user / month</strong>
            <span class="adb-caption">+ $0.00 / email / month</span>
            <span class="adb-badge adb-badge__info">2-Month Contract</span>
          </li>
          <li>
            <strong>$199.95 / user / day</strong>
            <span class="adb-caption">+ $0.00 / email / month</span>
            <span class="adb-badge adb-badge__info">2-Day Contract</span>
          </li>
        </ul>
      </td>
    </tr>
    <tr class="adb-js-radio">
      <td>
        <input id="purchase-pricing-plan3" name="purchase-pricing-plans" type="radio">
      </td>
      <td>Bronze Edition</td>
      <td>1 users</td>
      <td>
        <ul class="adb-list__feature">
          <li>
            <strong>$9.95 / user / month for 1-25 users</strong>
            <span class="adb-caption">+ $0.00 / email / month</span>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Toggleable Table Rows

Group Users Origin Group Membership

Design

voluptatem doloribus voluptate tempora voluptatibus
24 Internal

Marketing

enim ducimus dolore non illum
182 LDAP

Event Planning

cumque exercitationem dolorum aut vitae
12 Internal

Trump Fan Club

mollitia non et deleniti itaque
42 LDAP

Ciabatto's

sunt esse eum at eum
8 Internal

Engineering

voluptas eligendi recusandae ut maiores
8 Internal 
<div class="adb-table" data-toggle-rows>
  <table>
    <colgroup>
      <col span="1" width="40%">
      <col span="1" width="20%">
      <col span="1" width="20%">
      <col span="1" width="20%">
    </colgroup>
    <thead>
      <tr>
        <th class="adb-is-active" data-sort data-sort-order="descending">
          Group
        </th>
        <th data-sort>
          Users
        </th>
        <th>Origin</th>
        <th>Group Membership</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Design
            </a>

          </h4>
          <div class="adb-summary--details">
            corporis delectus dicta eveniet accusantium
          </div>
        </td>
        <td>
          24
        </td>
        <td>
          Internal
        </td>
        <td>
          <label class="adb-toggle" for="user-group1">
            <input checked class="adb-toggle--input" id="user-group1" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Marketing
            </a>

          </h4>
          <div class="adb-summary--details">
            rerum consectetur maiores est ab
          </div>
        </td>
        <td>
          182
        </td>
        <td>
          LDAP
        </td>
        <td>
          <label class="adb-toggle" for="user-group2">
            <input checked class="adb-toggle--input" id="user-group2" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Event Planning
            </a>

          </h4>
          <div class="adb-summary--details">
            minima aut et tenetur necessitatibus
          </div>
        </td>
        <td>
          12
        </td>
        <td>
          Internal
        </td>
        <td>
          <label class="adb-toggle" for="user-group3">
            <input class="adb-toggle--input" id="user-group3" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-table--card">
          <div class="adb-table--card_text adb-summary">
            <h4 class="adb-summary--title">
                            <a data-truncate="line" href="#">Trump Fan Club
              </a>

            </h4>
            <div class="adb-summary--details">
              accusantium quam aut optio excepturi
            </div>
          </div>
        </td>
        <td>
          42
        </td>
        <td>
          LDAP
        </td>
        <td>
          <label class="adb-toggle" for="user-group4">
            <input class="adb-toggle--input" id="user-group4" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-table--card">
          <div class="adb-table--card_text adb-summary">
            <h4 class="adb-summary--title">
                            <a data-truncate="line" href="#">Ciabatto's
              </a>

            </h4>
            <div class="adb-summary--details">
              eos error exercitationem maiores adipisci
            </div>
          </div>
        </td>
        <td>
          8
        </td>
        <td>
          Internal
        </td>
        <td>
          <label class="adb-toggle" for="user-group5">
            <input class="adb-toggle--input" id="user-group5" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-table--card">
          <div class="adb-table--card_text adb-summary">
            <h4 class="adb-summary--title">
                            <a data-truncate="line" href="#">Engineering
              </a>

            </h4>
            <div class="adb-summary--details">
              nihil eaque odit quibusdam quia
            </div>
          </div>
        </td>
        <td>
          8
        </td>
        <td>
          Internal
        </td>
        <td>
          <label class="adb-toggle" for="user-group6">
            <input class="adb-toggle--input" id="user-group6" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
    </tbody>
  </table>
</div>