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 flex-col py-2 rounded-xl overflow-hidden bg-surface-100 dark:bg-surfacedark-100">
  <!-- lists & image -->
  <div class="min-h-[3.5rem] flex flex-row items-center gap-4 py-2 px-6">
    <div class="w-14 h-auto flex items-center justify-center 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 flex-col 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 flex-row items-center gap-4 py-3 pr-6">
    <div class="h-14 flex items-center justify-center 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 flex-col 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 flex-row items-center gap-4 py-2 px-6">
    <div class="w-10 h-10 flex items-center justify-center rounded-full 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 rounded-full">
    </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:mr-3 rtl:ml-3" checked="">
  </div>

  <!-- list & initial -->
  <div class="min-h-[3.5rem] flex flex-row items-center gap-4 py-2 px-6">
    <div class="w-10 h-10 flex items-center justify-center rounded-full 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:mr-3 rtl:ml-3" checked="">
  </div>

  <!-- list & check -->
  <div class="min-h-[3.5rem] flex flex-row items-center gap-4 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:mr-3 rtl:ml-3" checked="">
  </div>

  <!-- list & icon  -->
  <div class="min-h-[3.5rem] flex flex-row items-center gap-4 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 flex-row items-center gap-4 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 items-center justify-center rounded-full  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>