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

List Item
List Item (link)


      <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>

Numeric List Item
Numeric List Item
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>

Un ordered list (native)

Creating an un-ordered list style

Class	Type
`un-order-list`	List	Use in cases list items begin with an icon

List Item
List Item
List Item


      <ul class="un-order-list">

        <li>

          <span class="text"><p class="text u-margin-block-start-8">List Item</p></span>

        </li>

        <li>

          <span class="text"><p class="text u-margin-block-start-8">List Item</p></span>

        </li>

        <li>

          <span class="text"><p class="text u-margin-block-start-8">List Item</p></span>

        </li>

      </ul>