List

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. In modern web development, lists are workhorse elements, frequently used for navigation as well as general content.

Unordered Lists

List with bullets

In the default unordered list the bullets are in circle shape.

  • list item 1
  • list item 2
  • list item 3
  • list item 1
  • list item 2
  • list item 3
  • list item 1
  • list item 2
  • list item 3
<!-- default list -->
<ul class="unorderd-list">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<!-- circular bullets -->
<ul class="circle-list">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<!-- square bullets -->
<ul class="square-list">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
view raw unordered-bullet-list.html hosted with ❤ by GitHub

List with no bullets

Unordered list with no bullets can be used on navigation. Use .no-bullets class to remove bullets .

  • list item 1
  • list item 2
  • list item 3
<ul class="no-bullet">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
view raw no-bullet-ul.list hosted with ❤ by GitHub

Ordered List

Ordered Bullet List

Ordered list can be used for any steps that must go in particular order. There are many types of bullets that we can use in ordered list.

  1. List item 1
  2. List item 2
  3. List item 3
  1. List item 1
  2. List item 2
  3. List item 3
  1. List item 1
  2. List item 2
  3. List item 3
  1. List item 1
  2. List item 2
  3. List item 3
  1. List item 1
  2. List item 2
  3. List item 3
<ol class="ordered-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<ol class="upper-alpha-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<ol class="lower-alpha-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<ol class="upper-roman-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<ol class="lower-roman-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
view raw ordered-list.html hosted with ❤ by GitHub

Reversed ordered list

  1. List item 1
  2. List item 2
  3. List item 3
<ol class="ordered-list" reversed>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
view raw reversed-list.html hosted with ❤ by GitHub

Inline List

  • list item 1
  • list item 2
  • list item 3
<ul class="no-bullet inline-list">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
view raw inline-list.html hosted with ❤ by GitHub

Notification Stacked List

For notification stacked list you can use unorder list with no bullets by adding .no-bullet class as shown above and add any content you want inside the li to show notifications. Here is example of snackbar notification list.

  • Can't send this photo. Retry in 5 seconds.

  • Can't send this photo. Retry in 5 seconds.

  • Can't send this photo. Retry in 5 seconds.

<ul class="stacked-notification-list no-bullet">
<li>
<div class="snackbar p-sm">
<div class="snackbar-message">
<p>Can't send this photo. Retry in 5 seconds.</p>
</div>
<div class="snackbar-actions">
<button class="btn">RETRY</button>
<button class="btn">
<i class="fas fa-times" title="close"></i>
</button>
</div>
</div>
</li>
<li>
<div class="snackbar p-sm">
<div class="snackbar-message">
<p>Can't send this photo. Retry in 5 seconds.</p>
</div>
<div class="snackbar-actions">
<button class="btn">RETRY</button>
<button class="btn">
<i class="fas fa-times" title="close"></i>
</button>
</div>
</div>
</li>
<li>
<div class="snackbar p-sm">
<div class="snackbar-message">
<p>Can't send this photo. Retry in 5 seconds.</p>
</div>
<div class="snackbar-actions">
<button class="btn">RETRY</button>
<button class="btn">
<i class="fas fa-times" title="close"></i>
</button>
</div>
</div>
</li>
</ul>
view raw notification-stacked-list.html hosted with ❤ by GitHub
Image Modal