Components

Lists

Lists can be used at navigation bar, stacked notifications, article pages, etc.

Example of unordered list with bullets.

Add class according to bullet style. Copy html code below and add your desired list items.

  • list item1
  • list item2
  • list item3
  • list item1
  • list item2
  • list item3
  • list item1
  • list item2
  • list item3
<ul class="style-list spacer-1rem">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
<ul class="style-list list-style-square spacer-1rem">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
<ul class="style-list list-style-circle spacer-1rem">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
view raw listUl.html hosted with ❤ by GitHub

Example of Ordered List with bullets

Add class according to bullet style. Copy html code snippet from below and add your desired list items.

To reverse the order of ordered list, add reversed attribute to ol element.

  1. List item with numbers
  2. List item with numbers
  1. Reversed list item
  2. Reversed list item
  1. List item with alphabets
  2. List item with alphabets
  1. List item with roman
  2. List item with roman
  1. List item with alphabets
  2. List item with alphabets
  1. List item with roman
  2. List item with roman
<ol class="style-list">
<li>List item with numbers</li>
<li>List item with numbers</li>
</ol>
<!-- list with lowercase alphabet bullet and reversed list -->
<ol class="style-list list-style-smAlpha" reversed>
<li>Reversed list item</li>
<li>Reversed list item</li>
</ol>
<!-- list with lowercase alphabet bullet -->
<ol class="style-list list-style-smAlpha">
<li>List item with alphabets</li>
<li>List item with alphabets</li>
</ol>
<!-- list with lowercase roman bullet -->
<ol class="style-list list-style-smRoman">
<li>List item with roman</li>
<li>List item with roman</li>
</ol>
<!-- list with uppercase alphabet bullet -->
<ol class="style-list list-style-capAlpha">
<li>List item with alphabets</li>
<li>List item with alphabets</li>
</ol>
<!-- list with uppercase roman bullet -->
<ol class="style-list list-style-capRoman">
<li>List item with roman</li>
<li>List item with roman</li>
</ol>
view raw listOl.html hosted with ❤ by GitHub

Example of List with no bullets

If you want list stacked but with no bullet and indentation, then you can add list-style-none class.

  • list item1
  • list item2
  • list item3
;<ul class="style-list list-style-none">
<li class="spacer-1rem">list item1</li>
<li class="spacer-1rem">list item2</li>
<li class="spacer-1rem">list item3</li>
</ul>
view raw noBullets.html hosted with ❤ by GitHub

Example of List with inline items.

If you want list items in same line instead of stacked, you can add inline-list class to make it inline. And you can also add list-style-none class to remove bullets.

  • list item1
  • list item2
  • list item3
;<ul class="list-style-none inline-list">
<li class="list-inline-item">list item1</li>
<li class="list-inline-item">list item2</li>
<li class="list-inline-item">list item3</li>
</ul>
view raw inlineList.html hosted with ❤ by GitHub
Grid Simplified