Get boba!
boba Version 1.7.1

Lists

Lists are useful for organizing groups of information.

Unordered List

For nonsequential lists.
  • Option 1
  • Option 2
    • Option A
    • Option B
    • Option C
  • Option 3
<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <ul>
        <li>Option 4</li>
        <li>Option 5</li>
        <li>Option 6</li>
    </ul>
    <li>Option 3</li>
</ul>

Ordered List

For sequential lists.
  1. Option 1
  2. Option 2
    1. Option A
    2. Option B
    3. Option C
  3. Option 3
<ol>
    <li>Option 1</li>
    <li>Option 2</li>
    <ol>
        <li>Option 4</li>
        <li>Option 5</li>
        <li>Option 6</li>
    </ol>
    <li>Option 3</li>
</ol>

Styles

Quickly change the look of your lists with ease.

Clarification

Although these styles work on both ordered and unordered lists, it is recommended that you use these styles only with unordered lists (i.e. with ul tags) for better semantic readability in your markup.

Inverted

Hollow out your bullets using the .inverted-bullets class.
  • Option 1
  • Option 2
    • Option A
    • Option B
    • Option C
  • Option 3
<ul class="inverted-bullets">
    <li>Option 1</li>
    <li>Option 2</li>
    <ul class="inverted-bullets">
        <li>Option 4</li>
        <li>Option 5</li>
        <li>Option 6</li>
    </ul>
    <li>Option 3</li>
</ul>

Square

Make your bullets square using the .square-bullets class.
  • Option 1
  • Option 2
    • Option A
    • Option B
    • Option C
  • Option 3
<ul class="square-bullets">
    <li>Option 1</li>
    <li>Option 2</li>
    <ul class="square-bullets">
        <li>Option 4</li>
        <li>Option 5</li>
        <li>Option 6</li>
    </ul>
    <li>Option 3</li>
</ul>

No Bullets

Hide your bullet points while retaining your other list styles using the .no-bullets class.

Tip

If you want to use lists without bullet points, consider using descriptions instead!

  • Option 1
  • Option 2
    • Option A
    • Option B
    • Option C
  • Option 3
<ul class="no-bullets">
    <li>Option 1</li>
    <li>Option 2</li>
    <ul class="no-bullets">
        <li>Option 4</li>
        <li>Option 5</li>
        <li>Option 6</li>
    </ul>
    <li>Option 3</li>
</ul>