Lists

Definition

List group component is used to display a series of content. Default and active state. Update the icon to switch from multi-select to single-select list. Best practice is to position interactive elements (i.e. checkbox or radio button) on the left followed by text.

Currently there are 3 variations, each with an active & focused state:

Default
Icon
Badge

Description

When building the list, in order to get the intended focus primary color on the whole list item, the developer needs to add a tabindex="0" as an attribute on the .list-group-item element.

The .active class will make the list item highlighted in the primary color. The focus color happens temporarily while the item is focused. If present, a badge or icon will also invert.

Accessibility considerations

Do not use numbers other than 0 for the tabindex.

Examples

Comma-separated list

The comma-separated list adds commas and space into an unordered list. There is no punctuation at the end of the list. The list will wrap when there is not enough space.

Pizza
Tacos
Bibimbop
Fish & chips
Sushi

Pizza
Tacos
Bibimbop
Fish & chips
Sushi

<ul class="list-comma-separated">
  <li>Pizza</li>
  <li>Tacos</li>
  <li>Bibimbop</li>
  <li>Fish & chips</li>
  <li>Sushi</li>
</ul>

List group with badge

List item title 1

List item subtitle

12
List item title 2

List item subtitle
List item title
List item title
List item title

8


    <ul class="list-group col-md-4">
      <li class="list-group-item active" tabindex="0">
        <div class="d-flex gap-3">
          <div>
            <div class="fw-bold">List item title 1</div>
            <div>List item subtitle</div>
          </div>
          <div class="ms-auto">
            <span class="badge badge-counter text-bg-primary">12</span>
          </div>
        </div>
      </li>
      <li class="list-group-item" tabindex="0">
        <div class="d-flex gap-3">
          <div>
            <div class="fw-bold">List item title 2</div>
            <div>List item subtitle</div>
          </div>
        </div>
      </li>
      <li class="list-group-item" tabindex="0">
        <div class="d-flex gap-3">
          <div>
            <div>List item title</div>
          </div>
        </div>
      </li>
      <li class="list-group-item" tabindex="0">
        <div class="d-flex gap-3">
          <div>
            <div>List item title</div>
          </div>
        </div>
      </li>
      <li class="list-group-item" tabindex="0">
        <div class="d-flex gap-3">
          <div>
            <div>List item title</div>
          </div>
          <div class="ms-auto">
            <span class="badge badge-counter text-bg-primary">8</span>
          </div>
        </div>
      </li>
    </ul>

List group with checkboxes

BSI 1: Description
BSI_1
BSI 2: Description
BSI_2
BSI 3: Description
BSI_3
BSI 4: Icon to the right
BSI_4
BSI 5: Description
BSI_5
BSI 6: Description
BSI_6


  <ul class="list-group col-md-6">
    <li class="list-group-item" tabindex="0">
      <div class="d-flex gap-3">
        <input type="checkbox" class="form-check-input" id="checkbox1" />
        <div>
          <label for="checkbox1" class="fw-bold">BSI 1: Description</label>
          <div>BSI_1</div>
        </div>
      </div>
    </li>
    <li class="list-group-item" tabindex="0">
      <div class="d-flex gap-3">
        <input type="checkbox" class="form-check-input" id="checkbox2" />
        <div>
          <label for="checkbox2" class="fw-bold">BSI 2: Description</label>
          <div>BSI_2</div>
        </div>
      </div>
    </li>
    <li class="list-group-item active" tabindex="0">
      <div class="d-flex gap-3">
        <input type="checkbox" class="form-check-input" id="checkbox3" />
        <div>
          <label for="checkbox3" class="fw-bold">BSI 3: Description</label>
          <div>BSI_3</div>
        </div>
      </div>
    </li>
    <li class="list-group-item" tabindex="0">
      <div class="d-flex gap-3">
        <input type="checkbox" class="form-check-input" id="checkbox4" />
        <div>
          <label for="checkbox4" class="fw-bold">BSI 4: Icon to the right</label>
          <div>BSI_4</div>
        </div>
        <div class="ms-auto">
          <i class="fas fa-flag"></i>
        </div>
      </div>
    </li>
    <li class="list-group-item" tabindex="0">
      <div class="d-flex gap-3">
        <input type="checkbox" class="form-check-input" id="checkbox5" />
        <div>
          <label for="checkbox5" class="fw-bold">BSI 5: Description</label>
          <div>BSI_5</div>
        </div>
      </div>
    </li>
    <li class="list-group-item active" tabindex="0">
      <div class="d-flex gap-3">
        <input type="checkbox" class="form-check-input" id="checkbox6" />
        <div>
          <label for="checkbox6" class="fw-bold">BSI 6: Description</label>
          <div>BSI_6</div>
        </div>
        <div class="ms-auto">
          <i class="fas fa-scroll-old"></i>
        </div>
      </div>
    </li>
  </ul>

Variables and Development

// Bootstrap overrides
$list-group-color: $grey-500; 
$list-group-border-radius: 0;
$list-group-active-bg: $grey-10;
$list-group-active-color: $list-group-color;

This element also adjusts code in the badge element, for the focus to work correctly. When updating the badge to native Bootstrap badge element, update/remove that then-deprecated code.