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>

Examples

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>

Component data