Lists

Lists are made up of multiple rows of items that can contain text, buttons, toggles, icons etc. Lists generally contain items with similar data content.

Avatar List

ShivangHey! I was wondering.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.

ShivangHey! I was wondering...

  
<div class="k-list">
<li class="list-item avatar-item">
  <div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
  <div class="item-content"><span class="item-text">Shivang</span><span class="item-subtext">Hey! I was wondering.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.</span></div>
</li>
<li class="list-item avatar-item">
  <div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
  <div class="item-content"><span class="item-text">Shivang</span><span class="item-subtext">Hey! I was wondering...</span></div>
</li>
<li class="list-item avatar-item">
  <div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
  <div class="item-content"><span class="item-text">Shivang</span><span class="item-subtext">Hey! I was wondering...</span></div>
</li>
<li class="list-item avatar-item">
  <div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
  <div class="item-content"><span class="item-text">Shivang</span><span class="item-subtext">Hey! I was wondering...</span></div>
</li></div>

Simple List

ShivangHey! I was wondering.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.

ShivangHey! I was wondering...

  
<div class="k-list">
<li class="list-item">
  <div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
  <div class="item-content"><span class="item-text">Shivang</span><span class="item-subtext">Hey! I was wondering.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.Lorem ipsum dolor sit amat.</span></div>
</li>
<li class="list-item">
  <div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
  <div class="item-content"><span class="item-text">Shivang</span><span class="item-subtext">Hey! I was wondering...</span></div>
</li>
<li class="list-item">
  <div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
  <div class="item-content"><span class="item-text">Shivang</span><span class="item-subtext">Hey! I was wondering...</span></div>
</li>
<li class="list-item">
  <div class="avatar avatar-sm"><img src="https://picsum.photos/100" /></div>
  <div class="item-content"><span class="item-text">Shivang</span><span class="item-subtext">Hey! I was wondering...</span></div>
</li></div>