List | tcpsystems/ui

Examples

Release checklist

Review the build logs
Confirm the health checks
Deploy to production

Release checklist.svelte

<script lang="ts">
	import List from '@tcpsystems/ui/foundation/List';
</script>

<List items={['Review the build logs', 'Confirm the health checks', 'Deploy to production']} />

Numbered steps

Create a release
Run the smoke tests
Promote the release

Numbered steps.svelte

<script lang="ts">
	import List from '@tcpsystems/ui/foundation/List';
</script>

<List marker="number" items={['Create a release', 'Run the smoke tests', 'Promote the release']} />

Unmarked team

Amira Chen — Owner
Lucas Silva — Maintainer
Priya Shah — Billing admin

Unmarked team.svelte

<script lang="ts">
	import List from '@tcpsystems/ui/foundation/List';
	import Text from '@tcpsystems/ui/foundation/Text';
</script>

<List marker="none">
	<li><Text as="span">Amira Chen</Text> — Owner</li>
	<li><Text as="span">Lucas Silva</Text> — Maintainer</li>
	<li><Text as="span">Priya Shah</Text> — Billing admin</li>
</List>

API

Import

import List from '@tcpsystems/ui/foundation/List';

Prop	Type	Default
`marker?`	`'disc' \| 'number' \| 'none'`	`'disc'`
`items?`	`string[]`	none

Snippet
`children`

Hook	Kind
`.tcp-list`	Root class
`data-marker`	Data attribute