List Component

Table of Contents

Usage

Et Lorem et veniam amet et aliquip. Esse veniam ut tempor aute commodo ex exercitation veniam esse in et. Fugiat laboris commodo ipsum incididunt pariatur cupidatat sunt quis aliqua.

Unordered List

Set the type to unordered or leave it blank to render a unordered list.

  • Eiusmod tempor commodo est velit irure irure eu sit anim.
  • Eiusmod tempor commodo est velit irure irure eu sit anim.
<script>
  import { List, ListItem } from "$lib/components";
</script>

<List type="unordered">
  <ListItem>Eiusmod tempor commodo est velit irure irure eu sit anim.</ListItem>
  <ListItem>Eiusmod tempor commodo est velit irure irure eu sit anim.</ListItem>
</List>

Ordered List

Set the type to ordered to render a ordered list.

  1. Eiusmod tempor commodo est velit irure irure eu sit anim.
  2. Eiusmod tempor commodo est velit irure irure eu sit anim.
<script>
  import { List, ListItem } from "$lib/components";
</script>

<List type="ordered">
  <ListItem>Eiusmod tempor commodo est velit irure irure eu sit anim.</ListItem>
  <ListItem>Eiusmod tempor commodo est velit irure irure eu sit anim.</ListItem>
</List>

Use the href and title attribute to set a link. External links automatically open in a new tab.

<script>
  import { List, ListItem } from "$lib/components";
</script>

<List>
  <ListItem href="https://svelte.dev/" title="Svelte">Svelte</ListItem>
  <ListItem href="https://kit.svelte.dev/" title="SvelteKit">SvelteKit</ListItem
  >
</List>

Nested List

You can nest multiple lists, even unordered and ordered ones. Use the nested attribute to identify the nested list.

  1. List Item 1
    • List Item 1.1
    • List Item 1.2
  2. List Item 2
<script>
  import { List, ListItem } from "$lib/components";
</script>

<List type="ordered">
  <ListItem>
    List Item 1
    <List nested>
      <ListItem>List Item 1.1</ListItem>
      <ListItem>List Item 1.2</ListItem>
    </List>
  </ListItem>
  <ListItem>List Item 2</ListItem>
</List>