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 oskasdadiaa py-2 rounded-xl overflow-hidden bg-surface-100 dark:bg-surfacedark-100">
  <!-- lists & image -->
  <div class="min-h-[3.5rem] flex lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2 px-6">
    <div class="w-14 h-auto flex pdskdmsdnjw jkuthslatgh 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 oskasdadiaa 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 lsdfdfsdafd pdskdmsdnjw pajskalamsn py-3 pe-6">
    <div class="h-14 flex pdskdmsdnjw jkuthslatgh 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 oskasdadiaa 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 lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2 px-6">
    <div class="w-10 h-10 flex pdskdmsdnjw jkuthslatgh ropjaksldnk 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 ropjaksldnk">
    </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 lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2 px-6">
    <div class="w-10 h-10 flex pdskdmsdnjw jkuthslatgh ropjaksldnk 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 lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2 px-6">
    <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 lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2 px-6 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-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 lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2 px-6 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-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 pdskdmsdnjw jkuthslatgh ropjaksldnk  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>