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.
List Item
Supporting line textList Item
Supporting line textList Item
Supporting line textList Item
Supporting line textList Item
Supporting line textList Item
Supporting line textList Item
Supporting line textList Item
Supporting line textList Item
A
List Item
B
List Item
List Item
List Item
List Item
List Item
List Item
home
List Item
person
List Item
settings
List Item
power_settings_new
List Item
<!-- 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>