List Group

Selectable list for navigation or selection. Keep af-list-group-item on the li. For interactive rows, nest an a or button inside each item — do not make the li itself the control. For settings/account section nav (filled, responsive), use Nav Pills instead.

Markup

Selection (in-page): nest button type="button". Put layout utilities on the control.

• Active item
• Item 2
• Disabled item
• Item 4

<ul class="af-list-group">
  <li class="af-list-group-item af-is-active">
    <button type="button">Active item</button>
  </li>
  <li class="af-list-group-item">
    <button type="button">Item 2</button>
  </li>
  <li class="af-list-group-item af-is-disabled">
    <button type="button" disabled>Disabled item</button>
  </li>
  <li class="af-list-group-item">
    <button type="button">Item 4</button>
  </li>
</ul>

As links

Navigation: nest a. Mark the current page with aria-current="page".

• Inbox 12
• Sent
• Drafts 2

<nav aria-label="Folders">
  <ul class="af-list-group">
    <li class="af-list-group-item af-is-active">
      <a href="#inbox" class="af-justify-between" aria-current="page">
        Inbox
        <span class="af-badge">12</span>
      </a>
    </li>
    <li class="af-list-group-item">
      <a href="#sent">Sent</a>
    </li>
    <li class="af-list-group-item">
      <a href="#drafts" class="af-justify-between">
        Drafts
        <span class="af-badge af-is-secondary">2</span>
      </a>
    </li>
  </ul>
</nav>

States

• af-is-active — Selected item (soft primary fill); place on the li
• af-is-disabled — Non-interactive item; or disabled / aria-disabled="true" on the nested control