--- layout: typographyLayout title: Svelte Lists - Flowbite breadcrumb_title: Lists dir: Typography description: 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 --- Home {dir} {breadcrumb_title} {title} {description} Li Ul 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. ```html ``` Use this example to create a default unordered list of items. ```svelte example 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., ! @ # ?
    •  ``` This example can be used to apply custom icons instead of the default bullets for the list items. ```svelte example 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., ! @ # ?
    • ``` Use this example to nested another list of items inside the parent list element. ```svelte example
  • 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.
    • ``` Use the `list="none"` prop to disable the list style bullets or numbers. ```svelte example 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., ! @ # ?
    •  ``` Use the `tag="ol"` prop to create an ordered list of items with numbers. ```svelte example Top students:
  • Bonnie Green with 70 points
  • Jese Leos with 63 points
  • Leslie Livingston with 57 points
    •  ``` This example can be used to nest multiple lists into each other. ```svelte example
  • 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.
    • ``` Create a description list by using the `tag="dl"` prop and set the term and name with the following example. ```svelte 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
    ``` Use this example to create a list of items with custom SVG icons instead of the default bullets. ```svelte example
  • Individual configuration
  • No setup, or hidden fees
  • Team size: 1 developer
  • Premium support: 6 months
  • Free updates: 6 months
    • ``` This example can be used to show more details for each list item such as the user’s name, email and profile picture. ```svelte example
  • Neil profile

    Neil Sims

    email@flowbite.com

    $320
  • Bonnie profile

    Bonnie Green

    email@flowbite.com

    $3467
  • Michael profile

    Michael Gough

    email@flowbite.com

    $67
  • Thomas profile

    Thomas Lean

    email@flowbite.com

    $2367
  • Lana profile

    Lana Byrd

    email@flowbite.com

    $367
    • ``` Use this example to create a horizontally aligned list of items. ```svelte example
  • About
  • Premium
  • Campaigns
  • Blog
  • Affiliate Program
  • FAQs
    • ``` The component has the following props, type, and default values. See types page for type information. List Li Span DescriptionList