STWUI

GET STARTED

COMPONENTS

ACTIONS

UTILITIES

TYPES

List

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