List
List, as it sounds is a group of items. These are commonly used across many apps & websites like list of products in shpping websites or newsfeed in your social media apps.
List with bullet
- Item 1
- Item 2
- Item 3
<ul class="list">
<li class="list-item">
Item 1
</li>
<li class="list-item">
Item 2
</li>
<li class="list-item">
Item 3
</li>
</ul>
List without bullet
- Item 1
- Item 2
- Item 3
<ul class="list list-no-bullet">
<li class="list-item">
Item 1
</li>
<li class="list-item">
Item 2
</li>
<li class="list-item">
Item 3
</li>
</ul>
Numbered list
- Item 1
- Item 2
- Item 3
<ul class="list list-numbered">
<li class="list-item">
Item 1
</li>
<li class="list-item">
Item 2
</li>
<li class="list-item">
Item 3
</li>
</ul>
Stacked list
These can be used to show notifications in any app.
- this is a notification
- this is a notification
- this is a notification
<ul class="list list-no-bullet list-stack">
<li class="list-item list-item-stack">
this is a notification
</li>
<li class="list-item list-item-stack">
this is a notification
</li>
<li class="list-item list-item-stack">
this is a notification
</li>
</ul>