Lists

Lists are continuous, vertical indexes of text or images. Lists consist of one or more list items, and can contain actions represented by icons and text. List items come in three sizes: one-line, two-line, and three-line.

media 2

List Item

Supporting line text
100+
media 2

List Item

Supporting line text
100+
media 2

List Item

Supporting line text
100+
media 2

List Item

Supporting line text
100+
media 2

List Item

Supporting line text
100+
media 2

List Item

Supporting line text
100+
media 2

List Item

Supporting line text
100+
media 2

List Item

Supporting line text
100+
avatar

List Item

A

List Item

B

List Item

avatar

List Item

List Item

List Item

List Item

List Item

home

List Item

person

List Item

settings

List Item

power_settings_new

List Item

home

Home

mail

Messages

11
person

Profile

settings

Settings

power_settings_new

Logout

            
<!-- Lists -->
<div class="w-full sm:w-[360px] flex ioajsklehsnm py-2 rounded-xl mklausjenrhtm bg-surface-100 dark:bg-surfacedark-100">
  <!-- lists & image -->
  <div class="min-h-[3.5rem] flex klsuaonrmcha layhetgsjdcb spoathnmkles py-2 dkslaoeyhnmj">
    <div class="w-14 h-auto flex layhetgsjdcb yhansklopals title-md font-bold bg-primary-600 text-white dark:bg-primary-200 dark:text-neutral-900">
      <img src="../src/img/media/media.png" alt="media 2" class="w-14 h-auto">
    </div>
    <div class="flex ioajsklehsnm flex-grow">
      <p class="tracking-[.03125em]">List Item</p>
      <span class="text-sm tracking-[0.25px]">Supporting line text</span>
    </div>
    <span class="text-[11px] leading-4 tracking-[.045em] font-medium">100+</span>
  </div>
  
  <!-- list & image 2 -->
  <div class="min-h-[88px] flex klsuaonrmcha layhetgsjdcb spoathnmkles py-3 pe-6">
    <div class="h-14 flex layhetgsjdcb yhansklopals title-md font-bold bg-primary-600 text-white dark:bg-primary-200 dark:text-neutral-900">
      <img src="../src/img/media/media.png" alt="media 2" class="h-14">
    </div>
    <div class="flex ioajsklehsnm flex-grow">
      <p class="tracking-[.03125em]">List Item</p>
      <span class="text-sm tracking-[0.25px]">Supporting line text</span>
    </div>
    <span class="text-[11px] leading-4 tracking-[.045em] font-medium">100+</span>
  </div>

  <!-- list & avatar -->
  <div class="min-h-[3.5rem] flex klsuaonrmcha layhetgsjdcb spoathnmkles py-2 dkslaoeyhnmj">
    <div class="w-10 h-10 flex layhetgsjdcb yhansklopals boalstehwqbj title-md font-bold bg-primary-600 text-white dark:bg-primary-200 dark:text-neutral-900">
      <img src="../src/img/avatar.png" alt="avatar" class="w-10 h-10 boalstehwqbj">
    </div>
    <p class="flex flex-grow">List Item</p>
    <input type="checkbox" name="checked-demo" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] ltr:me-3 rtl:ms-3" checked="">
  </div>

  <!-- list & initial -->
  <div class="min-h-[3.5rem] flex klsuaonrmcha layhetgsjdcb spoathnmkles py-2 dkslaoeyhnmj">
    <div class="w-10 h-10 flex layhetgsjdcb yhansklopals boalstehwqbj title-md font-bold bg-primary-600 text-white dark:bg-primary-200 dark:text-neutral-900">A</div>
    <p class="flex flex-grow">List Item</p>
    <input type="checkbox" name="checked-demo" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] ltr:me-3 rtl:ms-3" checked="">
  </div>

  <!-- list & check -->
  <div class="min-h-[3.5rem] flex klsuaonrmcha layhetgsjdcb spoathnmkles py-2 dkslaoeyhnmj">
    <p class="flex flex-grow">List Item</p>
    <input type="checkbox" name="checked-demo" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] ltr:me-3 rtl:ms-3" checked="">
  </div>

  <!-- list & icon  -->
  <div class="min-h-[3.5rem] flex klsuaonrmcha layhetgsjdcb spoathnmkles py-2 dkslaoeyhnmj hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
    <span class="material-symbols-outlined">home</span>
    <p class="flex flex-grow">Home</p>
  </div>

  <!-- list & badge -->
  <div class="min-h-[3.5rem] flex klsuaonrmcha layhetgsjdcb spoathnmkles py-2 dkslaoeyhnmj hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
    <span class="material-symbols-outlined">mail</span>
    <p class="flex flex-grow">Messages</p>
    <div class="min-w-[22px] px-1 h-4 flex layhetgsjdcb yhansklopals boalstehwqbj  text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">11</div>
  </div>
</div>