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>