DescriptionList | tcpsystems/ui

Examples

Deployment

Service: Acumen
Region: Falkenstein
Revision: a83c21f

Deployment.svelte

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

<DescriptionList items={[
	{ term: 'Service', value: 'Acumen' },
	{ term: 'Region', value: 'Falkenstein' },
	{ term: 'Revision', value: 'a83c21f', mono: true }
]} />

Invoice rules

Invoice: INV-2026-1042
Due date: 30 November 2026
Total: €240.00

Invoice rules.svelte

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

<DescriptionList variant="rules" items={[
	{ term: 'Invoice', value: 'INV-2026-1042' },
	{ term: 'Due date', value: '30 November 2026' },
	{ term: 'Total', value: '€240.00' }
]} />

API

Import

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

Prop	Type	Default
`items`	`{ term: string; value: string; mono?: boolean }[]`	none
`variant?`	`'rows' \| 'rules'`	`'rows'`

Hook	Kind
`.tcp-rules`	Root class