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>