Lists
Lists are widely used to display a list of items uniformly. There are different types of lists as per one's requirement and usage.
Spaced Lists
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5
<ul class="list-style">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
Stacked Lists
Stacked Lists are useful when we want to display notifications in the app. It helps user to go through them quickly.
-
Order Placed Successfully!10m agoHey Virat, your order of Samsung A72 is successful and will be delivered in 3 business days.
-
Order Delivered Successfully!1h ago
Hey Rohit, your order HP pavilion gaming laptop is being delivered Successfully.
-
Order Placed Successfully!30m ago
Hey Manish, your order of Bose headphones is successful and will be delivered in 5 business days.
<ul class="stacked-list list-style mt">
<li class="stacked-list-item">
<div class="list-info">
<img src="/images/favicon.png" alt="" width="50px" height="50px" />
<div class="list-msg-info">Order Placed Successfully!</div>
<div class="msg-delivery-info">10m ago</div>
</div>
<p>Hey Virat, your order of Samsung A72 is successful and will be delivered
in 3 business days.</p>
</li>
<li class="stacked-list-item">
<div class="list-info">
<img src="/images/favicon.png" alt="" width="50px" height="50px" />
<div class="list-msg-info">Order Delivered Successfully!</div>
<div class="msg-delivery-info">1h ago</div>
</div>
<p>Hey Rohit, your order HP pavilion gaming laptop is being
delivered Successfully.</p>
</li>
<li class="stacked-list-item">
<div class="list-info">
<img src="/images/favicon.png" alt="" width="50px" height="50px" />
<div class="list-msg-info">Order Placed Successfully!</div>
<div class="msg-delivery-info">30m ago</div>
</div>
<p>Hey Manish, your order of Bose headphones is successful and will
be delivered in 5 business days.</p>
</li>
</ul>