List
Setup
<script>
import { List, Li } from "svelte-5-ui-lib";
import { CheckCircleSolid } from "flowbite-svelte-icons";
</script>
Interactive List Builder
List title
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
<List>
<Li>Item 1</Li>
<Li>Item 2</Li>
<Li>Item 3</Li>
</List>Description list
- Email address
- yourname@flowbite.com
- Home address
- 92 Miles Drive, Newark, NJ 07103, California, USA
- Phone number
- +00 123 456 789 / +12 345 678
<script lang="ts">
import { List, DescriptionList } from 'svelte-5-ui-lib';
</script>
<List tag="dl" class="divide-y divide-gray-200 text-gray-900 dark:divide-gray-700 dark:text-white">
<div class="flex flex-col pb-3">
<DescriptionList tag="dt" class="mb-1">Email address</DescriptionList>
<DescriptionList tag="dd">yourname@flowbite.com</DescriptionList>
</div>
<div class="flex flex-col pb-3">
<DescriptionList tag="dt" class="mb-1">Home address</DescriptionList>
<DescriptionList tag="dd">92 Miles Drive, Newark, NJ 07103, California, USA</DescriptionList>
</div>
<div class="flex flex-col pb-3">
<DescriptionList tag="dt" class="mb-1">Phone number</DescriptionList>
<DescriptionList tag="dd">+00 123 456 789 / +12 345 678</DescriptionList>
</div>
</List>
Horizontal list
<script lang="ts">
import { List, Li, A } from 'svelte-5-ui-lib';
</script>
<List tag="ul" class="flex flex-wrap items-center justify-center">
<Li>
<A href="/" class="me-4 text-red-700 hover:underline md:me-6 dark:text-red-200">About</A>
</Li>
<Li>
<A href="/" class="me-4 text-blue-700 hover:underline md:me-6 dark:text-blue-200">Premium</A>
</Li>
<Li>
<A href="/" class="me-4 text-green-700 hover:underline md:me-6 dark:text-green-200">Campaigns</A>
</Li>
<Li>
<A href="/" class="me-4 text-yellow-700 hover:underline md:me-6 dark:text-yellow-200">Blog</A>
</Li>
<Li>
<A href="/" class="me-4 text-gray-700 hover:underline md:me-6 dark:text-gray-200">Affiliate Program</A>
</Li>
<Li>
<A href="/" class="me-4 text-pink-700 hover:underline md:me-6 dark:text-pink-200">FAQs</A>
</Li>
</List>
Advanced layout
Neil Sims
email@flowbite.com
$320
Bonnie Green
email@flowbite.com
$3467
Michael Gough
email@flowbite.com
$67
Thomas Lean
email@flowbite.com
$2367
Lana Byrd
email@flowbite.com
$367
<script lang="ts">
import { List, Li } from 'svelte-5-ui-lib';
</script>
<List tag="dl" class="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
<Li class="pb-3 sm:pb-4">
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="/images/profile-picture-1.webp" alt="Neil profile" />
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
<p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
</div>
</Li>
<Li class="py-3 sm:py-4">
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="/images/profile-picture-2.webp" alt="Bonnie profile" />
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
<p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
</div>
</Li>
<Li class="py-3 sm:py-4">
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="/images/profile-picture-3.webp" alt="Michael profile" />
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
<p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
</div>
</Li>
<Li class="py-3 sm:py-4">
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="/images/profile-picture-4.webp" alt="Thomas profile" />
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
<p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
</div>
</Li>
<Li class="py-3 sm:py-4">
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="/images/profile-picture-5.webp" alt="Lana profile" />
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
<p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
</div>
</Li>
</List>