List

A list is a vertical grouping of related content.

Class Type
list List A class representing a list

Types

In the Appwrite console we use two types of list items:

Class Type
list-item List Item Use in cases list items begin with an icon
numeric-list-item Numeric List Item Use in cases list items begin with a number 
<ul class="list">
  <li class="list-item">
    <span class="icon-arrow-circle-right" aria-hidden="true"></span>
    <span class="text">List Item</span>
  </li>
  <li class="list-item">
    <span class="icon-arrow-circle-right" aria-hidden="true"></span>
    <a href="#" class="link"><span class="text">List Item (link)</span></a>
  </li>
  <li class="list-item">
    <span class="icon-arrow-circle-right" aria-hidden="true"></span>
    <button class="link"><span class="text">List Item (button)</span></button>
  </li>
</ul>
  • List Item
  • List Item
  • List Item
<ul class="list">
  <li class="list-item">
    <span class="icon-check" aria-hidden="true"></span>
    <span class="text">List Item</span>
  </li>
  <li class="list-item">
    <span class="icon-check" aria-hidden="true"></span>
    <span class="text">List Item</span>
  </li>
  <li class="list-item">
    <span class="icon-check" aria-hidden="true"></span>
    <span class="text">List Item</span>
  </li>
</ul>

  1. Numeric List Item

  2. Numeric List Item

  3. Numeric List Item
<ol class="numeric-list">
  <li class="numeric-list-item">
    <span class="text"><p class="text u-margin-block-start-8">Numeric List Item</p></span>
  </li>
  <li class="numeric-list-item">
    <span class="text"><p class="text u-margin-block-start-8">Numeric List Item</p></span>
  </li>
  <li class="numeric-list-item"><span class="text">Numeric List Item</span></li>
</ol>