List

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

Usage

svelte

import { List } from 'stwui';
// OR
import List from 'stwui/list'; // for tree shaking

Default

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>

with 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>

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
placeholder	boolean	true

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

List Class Identifiers

stwui-list

stwui-list-item

stwui-list-item-leading

stwui-list-item-leading-avatar-wrapper

stwui-list-item-leading-avatar

stwui-list-item-leading-avatar-placeholder-wrapper

stwui-list-item-leading-avatar-placeholder

stwui-list-item-content

stwui-list-item-content-title

stwui-list-item-content-description

stwui-list-item-extra

GET STARTED

COMPONENTS

ACTIONS

UTILITIES

TYPES

List

Usage

Default

Calvin Hawkins

Kristen Ramos

Ted Fox

No Dividers & Icon

Calvin Hawkins

Kristen Ramos

Ted Fox

With Extra

Calvin Hawkins

Kristen Ramos

Ted Fox

with Edge to Edge

Calvin Hawkins

Kristen Ramos

Ted Fox

Bordered

Calvin Hawkins

Kristen Ramos

Ted Fox

List No Avatar

Calvin Hawkins

Kristen Ramos

Ted Fox

List Just Title

Calvin Hawkins

Kristen Ramos

Ted Fox

List Just Description

List Props

List Slots

List.Item Slots

List.Item.Leading Slots

List.Item.Leading.Icon Props

List.Item.Leading.Avatar Props

List.Item.Content Slots

List.Item.Content.Title Slots

List.Item.Content.Description Slots

List.Item.Extra Props

List.Item.Extra Slots

List Class Identifiers