Skip to main content

Lists

Component status:Beta
Lists are used to group and organize content.

List Types#

Unordered List#

  • List item 1
    • List item 1A
    • List item 1B
  • List item 2
  • List item 3
    • List item 3A
      • List item 3Ai
      • List item 3Aii
    • List item 3B
<ul class="bux-list-ul">
<li>
List item 1
<ul>
<li>List item 1A</li>
<li>List item 1B</li>
</ul>
</li>
<li>List item 2</li>
<li>
List item 3
<ul>
<li>
List item 3A
<ul>
<li>List item 3Ai</li>
<li>List item 3Aii</li>
</ul>
</li>
<li>List item 3B</li>
</ul>
</li>
</ul>

Ordered List#

  1. List item 1
    1. List item 1A
    2. List item 1B
  2. List item 2
  3. List item 3
    1. List item 3A
      1. List item 3Ai
      2. List item 3Aii
    2. List item 3B
<ol class="bux-list-ol">
<li>
List item 1
<ol>
<li>List item 1A</li>
<li>List item 1B</li>
</ol>
</li>
<li>List item 2</li>
<li>
List item 3
<ol>
<li>
List item 3A
<ol>
<li>List item 3Ai</li>
<li>List item 3Aii</li>
</ol>
</li>
<li>List item 3B</li>
</ol>
</li>
</ol>

Description List#

Term 1
This is the definition of the first term.
Term 2
This is the definition of the second term.
Term 3
This is the definition of the third term.
<dl class="bux-dl">
<dt>Term 1</dt>
<dd>This is the definition of the first term.</dd>
<dt>Term 2</dt>
<dd>This is the definition of the second term.</dd>
<dt>Term 3</dt>
<dd>This is the definition of the third term.</dd>
</dl>

When to use#

  • Use unordered lists <ul> when your collection has no specific order.
  • Use ordered lists <ol> when you want to display content in some specific order like ranking or a series of steps in a process.
  • Use description lists <dl> to display groups of terms with descriptions like a glossary or other metadata.

Resources#