Svelte Lists - Flowbite
Use the list component to show an unordered or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite
Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.
Setup #
<script>
import { List, Li } from 'flowbite-svelte';
</script>
Unordored list #
Use this example to create a default unordered list of items.
Password requirements
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
- Svelte
<script>
import { Li, List, Heading } from 'flowbite-svelte';
</script>
<Heading tag="h2" customSize="text-lg font-semibold" class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
>Password requirements</Heading>
<List tag="ul" class="space-y-1">
<Li>At least 10 characters (and up to 100 characters)</Li>
<Li>At least one lowercase character</Li>
<Li>Inclusion of at least one special character, e.g., ! @ # ?</Li>
</List>
icons #
This example can be used to apply custom icons instead of the default bullets for the list items.
Password requirements
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
- Svelte
<script>
import { List, Li, Heading } from 'flowbite-svelte';
</script>
<Heading tag="h2" customSize="text-lg font-semibold" class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
>Password requirements</Heading>
<List tag="ul" class="space-y-1" list="none">
<Li icon>
<svg
class="w-4 h-4 mr-1.5 text-green-500 dark:text-green-400 flex-shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" /></svg>
At least 10 characters (and up to 100 characters)
</Li>
<Li icon>
<svg
class="w-4 h-4 mr-1.5 text-green-500 dark:text-green-400 flex-shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" /></svg>
At least one lowercase character
</Li>
<Li icon>
<svg
class="w-4 h-4 mr-1.5 text-gray-400 flex-shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd" /></svg>
Inclusion of at least one special character, e.g., ! @ # ?
</Li>
</List>
Nested #
Use this example to nested another list of items inside the parent list element.
- List item one
- You might feel like you are being really "organized" o
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
- List item two
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
- List item three
- Again please don't nest lists if you want
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
- Svelte
<script>
import { List, Li } from 'flowbite-svelte';
</script>
<List tag="ul" class="space-y-4">
<Li
>List item one
<List tag="ol" class="pl-5 mt-2 space-y-1">
<Li>You might feel like you are being really "organized" o</Li>
<Li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</Li>
<Li>Nesting tons of folders in your source code is also not helpful.</Li>
</List>
</Li>
<Li
>List item two
<List tag="ol" class="pl-5 mt-2 space-y-1">
<Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
<Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
<Li>If you nest four levels deep you belong in prison.</Li>
</List>
</Li>
<Li
>List item three
<List tag="ol" class="pl-5 mt-2 space-y-1">
<Li>Again please don't nest lists if you want</Li>
<Li>Nobody wants to look at this.</Li>
<Li>I'm upset that we even have to bother styling this.</Li>
</List>
</Li>
</List>
Unstyled #
Use the list="none"
prop to disable the list style bullets or numbers.
Password requirements
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
- Svelte
<script>
import { List, Li, Heading } from 'flowbite-svelte';
</script>
<Heading tag="h2" customSize="text-lg font-semibold" class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
>Password requirements</Heading>
<List tag="ul" class="space-y-1" list="none">
<Li>At least 10 characters (and up to 100 characters)</Li>
<Li>At least one lowercase character</Li>
<Li>Inclusion of at least one special character, e.g., ! @ # ?</Li>
</List>
Ordered list #
Use the tag="ol"
prop to create an ordered list of items with numbers.
Top students:
- Bonnie Green with 70 points
- Jese Leos with 63 points
- Leslie Livingston with 57 points
- Svelte
<script>
import { List, Li, Span, Heading } from 'flowbite-svelte';
</script>
<Heading tag="h2" customSize="text-lg font-semibold" class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
>Top students:</Heading>
<List tag="ul" class="space-y-1">
<Li><Span>Bonnie Green</Span> with <Span>70</Span> points</Li>
<Li><Span>Jese Leos</Span> with <Span>63</Span> points</Li>
<Li><Span>Leslie Livingston</Span> with <Span>57</Span> points</Li>
</List>
Nested #
This example can be used to nest multiple lists into each other.
- List item one
- You might feel like you are being really "organized" o
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
- List item two
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
- List item three
- Again please don't nest lists if you want
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
- Svelte
<script>
import { List, Li } from 'flowbite-svelte';
</script>
<List tag="ol" list="decimal">
<Li
>List item one
<List tag="ul" class="pl-5 mt-2 space-y-1">
<Li>You might feel like you are being really "organized" o</Li>
<Li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</Li>
<Li>Nesting tons of folders in your source code is also not helpful.</Li>
</List>
</Li>
<Li
>List item two
<List tag="ul" class="pl-5 mt-2 space-y-1">
<Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
<Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
<Li>If you nest four levels deep you belong in prison.</Li>
</List>
</Li>
<Li
>List item three
<List tag="ul" class="pl-5 mt-2 space-y-1">
<Li>Again please don't nest lists if you want</Li>
<Li>Nobody wants to look at this.</Li>
<Li>I'm upset that we even have to bother styling this.</Li>
</List>
</Li>
</List>
Description List #
Create a description list by using the tag="dl"
prop and set the term and name with the following example.
- Email address
- yourname@flowbite.com
- Home address
- 92 Miles Drive, Newark, NJ 07103, California, USA
- Phone number
- +00 123 456 789 / +12 345 678
- Svelte
<script>
import { List, Li, DescriptionList } from 'flowbite-svelte';
</script>
<List tag="dl" color="text-gray-900 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>
List with icon #
Use this example to create a list of items with custom SVG icons instead of the default bullets.
- Individual configuration
- No setup, or hidden fees
- Team size: 1 developer
- Premium support: 6 months
- Free updates: 6 months
- Svelte
<script>
import { List, Li, Span } from 'flowbite-svelte';
</script>
<List tag="ul" class="mb-8 space-y-4" list="none">
<Li icon class="space-x-3">
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" /></svg>
Individual configuration
</Li>
<Li icon class="space-x-3">
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" /></svg>
No setup, or hidden fees
</Li>
<Li icon class="space-x-3">
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" /></svg>
Team size: <Span>1 developer</Span>
</Li>
<Li icon class="space-x-3">
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" /></svg>
Premium support: <Span>6 months</Span>
</Li>
<Li icon class="space-x-3">
<svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" /></svg>
Free updates: <Span>6 months</Span>
</Li>
</List>
Advanced layout #
This example can be used to show more details for each list item such as the user’s name, email and profile picture.
Neil Sims
email@flowbite.com
$320Bonnie Green
email@flowbite.com
$3467Michael Gough
email@flowbite.com
$67Thomas Lean
email@flowbite.com
$2367Lana Byrd
email@flowbite.com
$367
- Svelte
<script>
import { List, Li } from 'flowbite-svelte';
</script>
<List tag="ul" class="divide-y divide-gray-200 dark:divide-gray-700">
<Li class="pb-3 sm:pb-4" icon>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
src="/images/profile-picture-1.webp"
alt="Neil profile" />
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">Neil Sims</p>
<p class="text-sm text-gray-500 truncate 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" icon>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
src="/images/profile-picture-2.webp"
alt="Bonnie profile" />
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">Bonnie Green</p>
<p class="text-sm text-gray-500 truncate 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" icon>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
src="/images/profile-picture-3.webp"
alt="Michael profile" />
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">Michael Gough</p>
<p class="text-sm text-gray-500 truncate 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" icon>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
src="/images/profile-picture-4.webp"
alt="Thomas profile" />
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">Thomas Lean</p>
<p class="text-sm text-gray-500 truncate 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" icon>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
src="/images/profile-picture-5.webp"
alt="Lana profile" />
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">Lana Byrd</p>
<p class="text-sm text-gray-500 truncate 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>
Horizontal List #
Use this example to create a horizontally aligned list of items.
- Svelte
<script>
import { List, Li, A } from 'flowbite-svelte';
</script>
<List tag="ul" list="none" ulClass="flex flex-wrap justify-center items-center mb-6">
<Li>
<A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white"
>About</A>
</Li>
<Li>
<A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white"
>Premium</A>
</Li>
<Li>
<A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white"
>Campaigns</A>
</Li>
<Li>
<A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white"
>Blog</A>
</Li>
<Li>
<A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white"
>Affiliate Program</A>
</Li>
<Li>
<A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white"
>FAQs</A>
</Li>
</List>
Props #
The component has the following props, type, and default values. See types page for type information.
List
Name | Type | Default |
---|---|---|
tag | 'ul' | 'ol' | 'dl' | 'ul' |
list | 'disc' | 'none' | 'decimal' | 'disc' |
position | 'inside' | 'outside' | 'inside' |
color | string | 'text-gray-500 dark:text-gray-400' |
olClass | string | 'list-decimal list-inside' |
ulClass | string | 'max-w-md' |
dlClass | string | 'max-w-md divide-y divide-gray-200 dark:divide-gray-700' |
Li
Name | Type | Default |
---|---|---|
icon | boolean | false |
liClass | string | '' |
Span
Name | Type | Default |
---|---|---|
italic | boolean | false |
underline | boolean | false |
linethrough | boolean | false |
uppercase | boolean | false |
gradient | boolean | false |
highlight | boolean | false |
highlightClass | string | 'text-blue-600 dark:text-blue-500' |
decorationClass | string | 'decoration-2 decoration-blue-400 dark:decoration-blue-600' |
gradientClass | string | 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400' |
DescriptionList
Name | Type | Default |
---|---|---|
tag | 'dt' | 'dd' | |
dtClass | string | 'text-gray-500 md:text-lg dark:text-gray-400' |
ddClass | string | 'text-lg font-semibold' |