Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3
List
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.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., ! @ # ?
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., ! @ # ?
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.
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., ! @ # ?
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
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.
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
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
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
$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