logo-icon
STWUI

List

List is used to display content related to a single subject.

Basic

  • Calvin Hawkins

    calvin.hawkins@example.com

  • Kristen Ramos

    kristen.ramos@example.com

  • Ted Fox

    ted.fox@example.com


svelte 
<script lang="ts">
   import { List } from 'stwui';

   const items = [
		{
			avatar:
				'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Calvin Hawkins',
			description: 'calvin.hawkins@example.com'
		},
		{
			avatar:
				'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Kristen Ramos',
			description: 'kristen.ramos@example.com'
		},
		{
			avatar:
				'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Ted Fox',
			description: 'ted.fox@example.com'
		}
	];
</script>

<List>
   {#each items as item}
      <List.Item>
         <List.Item.Leading slot="leading">
            <List.Item.Leading.Avatar slot="avatar" src={item.avatar} />
         </List.Item.Leading>
         <List.Item.Content slot="content">
            <List.Item.Content.Title slot="title">{item.title}</List.Item.Content.Title>
            <List.Item.Content.Description slot="description">
               {item.description}
            </List.Item.Content.Description>
         </List.Item.Content>
      </List.Item>
   {/each}
</List>
No Dividers & Icon

  • Calvin Hawkins

    calvin.hawkins@example.com

  • Kristen Ramos

    kristen.ramos@example.com

  • Ted Fox

    ted.fox@example.com


svelte 
<script lang="ts">
   import { List } from 'stwui';

	const account = "svg-path";
	const print = "svg-path";
	const info = "svg-path";

   const items = [
		{
			data: account,
			title: 'Calvin Hawkins',
			description: 'calvin.hawkins@example.com'
		},
		{
			data: print,
			title: 'Kristen Ramos',
			description: 'kristen.ramos@example.com'
		},
		{
			data: info,
			title: 'Ted Fox',
			description: 'ted.fox@example.com'
		}
	];
</script>

<List divided={false}>
   {#each items as item}
      <List.Item>
         <List.Item.Leading slot="leading">
				<List.Item.Leading.Icon slot="icon" data={item.data} />
         </List.Item.Leading>
         <List.Item.Content slot="content">
            <List.Item.Content.Title slot="title">{item.title}</List.Item.Content.Title>
            <List.Item.Content.Description slot="description">
               {item.description}
            </List.Item.Content.Description>
         </List.Item.Content>
      </List.Item>
   {/each}
</List>
With Extra

  • Calvin Hawkins

    calvin.hawkins@example.com

  • Kristen Ramos

    kristen.ramos@example.com

  • Ted Fox

    ted.fox@example.com


svelte 
<script lang="ts">
   import { List, Button } from 'stwui';

   const items = [
		{
			avatar:
				'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Calvin Hawkins',
			description: 'calvin.hawkins@example.com'
		},
		{
			avatar:
				'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Kristen Ramos',
			description: 'kristen.ramos@example.com'
		},
		{
			avatar:
				'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Ted Fox',
			description: 'ted.fox@example.com'
		}
	];
</script>

<List>
   {#each items as item}
      <List.Item>
         <List.Item.Leading slot="leading">
            <List.Item.Leading.Avatar slot="avatar" src={item.avatar} />
         </List.Item.Leading>
         <List.Item.Content slot="content">
            <List.Item.Content.Title slot="title">{item.title}</List.Item.Content.Title>
            <List.Item.Content.Description slot="description">
               {item.description}
            </List.Item.Content.Description>
         </List.Item.Content>
         <List.Item.Extra slot="extra" placement="start">
            <Button type="primary" shape="pill" on:click={() => console.log('clicking extra!')}>
               Extra
            </Button>
         </List.Item.Extra>
      </List.Item>
   {/each}
</List>
List Edge to Edge

  • Calvin Hawkins

    calvin.hawkins@example.com

  • Kristen Ramos

    kristen.ramos@example.com

  • Ted Fox

    ted.fox@example.com


svelte 
<script lang="ts">
   import { List } from 'stwui';

   const items = [
		{
			avatar:
				'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Calvin Hawkins',
			description: 'calvin.hawkins@example.com'
		},
		{
			avatar:
				'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Kristen Ramos',
			description: 'kristen.ramos@example.com'
		},
		{
			avatar:
				'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Ted Fox',
			description: 'ted.fox@example.com'
		}
	];
</script>

<List edgeToEdge>
   {#each items as item}
      <List.Item>
         <List.Item.Leading slot="leading">
            <List.Item.Leading.Avatar slot="avatar" src={item.avatar} />
         </List.Item.Leading>
         <List.Item.Content slot="content">
            <List.Item.Content.Title slot="title">{item.title}</List.Item.Content.Title>
            <List.Item.Content.Description slot="description">
               {item.description}
            </List.Item.Content.Description>
         </List.Item.Content>
      </List.Item>
   {/each}
</List>
List Bordered

  • Calvin Hawkins

    calvin.hawkins@example.com

  • Kristen Ramos

    kristen.ramos@example.com

  • Ted Fox

    ted.fox@example.com


svelte 
<script lang="ts">
   import { List } from 'stwui';

   const items = [
		{
			avatar:
				'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Calvin Hawkins',
			description: 'calvin.hawkins@example.com'
		},
		{
			avatar:
				'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Kristen Ramos',
			description: 'kristen.ramos@example.com'
		},
		{
			avatar:
				'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			title: 'Ted Fox',
			description: 'ted.fox@example.com'
		}
	];
</script>

<List bordered>
   {#each items as item}
      <List.Item>
         <List.Item.Leading slot="leading">
            <List.Item.Leading.Avatar slot="avatar" src={item.avatar} />
         </List.Item.Leading>
         <List.Item.Content slot="content">
            <List.Item.Content.Title slot="title">{item.title}</List.Item.Content.Title>
            <List.Item.Content.Description slot="description">
               {item.description}
            </List.Item.Content.Description>
         </List.Item.Content>
      </List.Item>
   {/each}
</List>
List No Avatar

  • Calvin Hawkins

    calvin.hawkins@example.com

  • Kristen Ramos

    kristen.ramos@example.com

  • Ted Fox

    ted.fox@example.com


svelte 
<script lang="ts">
   import { List } from 'stwui';

   const items = [
		{
			title: 'Calvin Hawkins',
			description: 'calvin.hawkins@example.com'
		},
		{
			title: 'Kristen Ramos',
			description: 'kristen.ramos@example.com'
		},
		{
			title: 'Ted Fox',
			description: 'ted.fox@example.com'
		}
	];
</script>

<List>
   {#each items as item}
      <List.Item>
         <List.Item.Content slot="content">
            <List.Item.Content.Title slot="title">{item.title}</List.Item.Content.Title>
            <List.Item.Content.Description slot="description">
               {item.description}
            </List.Item.Content.Description>
         </List.Item.Content>
      </List.Item>
   {/each}
</List>
List Just Title

  • Calvin Hawkins

  • Kristen Ramos

  • Ted Fox


svelte 
<script lang="ts">
   import { List } from 'stwui';

   const items = [
		{
			title: 'Calvin Hawkins',
		},
		{
			title: 'Kristen Ramos',
		},
		{
			title: 'Ted Fox',
		}
	];
</script>

<List>
   {#each items as item}
      <List.Item>
         <List.Item.Content slot="content">
            <List.Item.Content.Title slot="title">{item.title}</List.Item.Content.Title>
         </List.Item.Content>
      </List.Item>
   {/each}
</List>
List Just Description

  • calvin.hawkins@example.com

  • kristen.ramos@example.com

  • ted.fox@example.com


svelte 
<script lang="ts">
   import { List } from 'stwui';
   
   const items = [
		{
			description: 'calvin.hawkins@example.com'
		},
		{
			description: 'kristen.ramos@example.com'
		},
		{
			description: 'ted.fox@example.com'
		}
	];
</script>

<List>
   {#each items as item}
      <List.Item>
         <List.Item.Content slot="content">
            <List.Item.Content.Description slot="description">
               {item.description}
            </List.Item.Content.Description>
         </List.Item.Content>
      </List.Item>
   {/each}
</List>

List Props

divided boolean true
bordered boolean false
edgeToEdge boolean false

List Slots

default <List.Item />

List.Item Slots

leading <List.Item.Leading slot="leading" />
content <List.Item.Content slot="content" />
default <List.Item.Extra slot="extra" />

List.Item.Leading Slots

icon <List.Item.Leading.Icon slot="icon" />
avatar <List.Item.Leading.Avatar slot="avatar" />
default

List.Item.Leading.Icon Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor

List.Item.Leading.Avatar Props

src string
alt user-avatar
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' md

List.Item.Content Slots

default

List.Item.Content.Title Slots

default

List.Item.Content.Description Slots

default

List.Item.Extra Props

placement 'start' | 'center' | 'end' start

List.Item.Extra Slots

default