Skip to main content

List group

Overview

Heads up! List groups are deprecated and will be removed in the next version of the Style Kit.

Use the .bsk-list-group class for displaying stacked content, either as a minimal list, or more advanced custom layout.

Use the .bsk-list-group-item for items within a list group, see the details of each.

Supported elements

Different variants are designed for different supporting elements, as documented. Other elements may be used, but are not supported and may not look right.

Variants

Basic list group

Use the .bsk-list-group class with a <ul> element.

Use the .bsk-list-group-item class with <li> elements.

  • List group item
  • Another list group item
<ul class="bsk-list-group">
  <li class="bsk-list-group-item">List group item</li>
  <li class="bsk-list-group-item">Another list group item</li>
</ul>

Linked list group

use the .bsk-list-group class with a <div> element.

Use the .bsk-list-group-item class with <a> elements.

<div class="bsk-list-group">
  <a href="#" class="bsk-list-group-item">list group item</a>
  <a href="#" class="bsk-list-group-item">Another list group item</a>
</div>

Contextual colours

The standard contextual colours can be used for context by adding these classes:

Standard Context List Group Contextual Class
Success .bsk-list-group-item-success
Warning .bsk-list-group-item-warning
Danger .bsk-list-group-item-danger
Info .bsk-list-group-item-info
  • Successful list group item
  • Warning list group item
  • Danger list group item
  • Info list group item
<ul class="bsk-list-group">
  <li class="bsk-list-group-item bsk-list-group-item-success">Successful list group item</li>
  <li class="bsk-list-group-item bsk-list-group-item-warning">Warning list group item</li>
  <li class="bsk-list-group-item bsk-list-group-item-danger">Danger list group item</li>
  <li class="bsk-list-group-item bsk-list-group-item-info">Info list group item</li>
</ul>

Button list group

use the .bsk-list-group class with a <div> element.

Use the .bsk-list-group-item class with <button> elements.

<div class="bsk-list-group">
  <button type="button" class="bsk-list-group-item">Active list group item</button>
  <button type="button" class="bsk-list-group-item">Another list group item</button>
</div>

States

Active item

Add the .bsk-active class to the list group item currently active, to highlight where the end user is in the site.

Make sure to include a <span class="bsk-sr-only">(current)</span> element as well.
This provides a non-visual indication of the currently active item, suitable for assistive technologies.

Back to top

  • Active list group item
  • Another list group item
<!-- Basic list group -->
<ul class="bsk-list-group">
  <li class="bsk-list-group-item bsk-active">Active list group item</li>
  <li class="bsk-list-group-item">Another list group item</li>
</ul>

<!-- Link list group -->
<div class="bsk-list-group">
  <a href="#" class="bsk-list-group-item bsk-active">Active list group item</a>
  <a href="#" class="bsk-list-group-item">Another list group item</a>
</div>

<!-- Button list group -->
<div class="bsk-list-group">
  <button type="button" class="bsk-list-group-item bsk-active">List group item</button>
  <button type="button" class="bsk-list-group-item">Another list group item</button>
</div>

Disabled item

Add the .bsk-disabled class to list group items which cannot be used.

It is not safe to rely on this state to prevent users activating disabled actions

Browsers may not enforce these properties, or users may trivially edit the DOM. Server side protections must be used for dangerous actions.

  • List group item
  • Disabled list group item
<!-- Basic list group -->
<ul class="bsk-list-group">
  <li class="bsk-list-group-item">List group item</li>
  <li class="bsk-list-group-item disabled">Disabled list group item</li>
</ul>

<!-- Link list group -->
<div class="bsk-list-group">
  <a href="#" class="bsk-list-group-item">List group item</a>
  <a href="#" class="bsk-list-group-item bsk-disabled">Disabled list group item</a>
</div>

<!-- Button list group -->
<div class="bsk-list-group">
  <button type="button" class="bsk-list-group-item">List group item</button>
  <button type="button" class="bsk-list-group-item bsk-disabled">Disabled list group item</button>
</div>

Components

Badges

Badges can be used within list items, in all list group variants, and will be aligned to the right.

  • List group item 4
  • Another list group item 4
<!-- Basic list group -->
<ul class="bsk-list-group">
  <li class="bsk-list-group-item">List group item <span class="bsk-badge">4</span></li>
  <li class="bsk-list-group-item">Another list group item <span class="bsk-badge">4</span></li>
</ul>

<!-- Link list group -->
<div class="bsk-list-group">
  <a href="#" class="bsk-list-group-item">List group item <span class="bsk-badge">4</span></a>
  <a href="#" class="bsk-list-group-item">Another list group item <span class="bsk-badge">4</span></a>
</div>

<!-- Button list group -->
<div class="bsk-list-group">
  <button type="button" class="bsk-list-group-item">List group item <span class="bsk-badge">4</span></button>
  <button type="button" class="bsk-list-group-item">Another list group item <span class="bsk-badge">4</span></button>
</div>