Lists

Lists are implemented using different approaches:

• Using the native <ul> element
• Combining [role=list] with elements like <div>, <section>, etc.

The choice of element depends on the context and the desired behavior of the button.

Basic Usage

See code

<section class="d-flex">
  <ul>
    <li>Item 1</li>
    <li aria-current="true">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <div role="list">
    <div role="listitem">
      Item 1
    </div>
    <div aria-current="true" role="listitem">
      Item 2
    </div>
    <div role="listitem">
      Item 3
    </div>
    <div role="listitem">
      Item 4
    </div>
  </div>
</section>

As a Card List

See more at Card List

See code

<section class="auto-grid">
  <ul class="card">
    <li>Item 1</li>
    <li aria-current="true">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <div class="card" role="list">
    <div role="listitem">
      Item 1
    </div>
    <div aria-current="true" role="listitem">
      Item 2
    </div>
    <div role="listitem">
      Item 3
    </div>
    <div role="listitem">
      Item 4
    </div>
  </div>
</section>