Description list

Shows one record's details as label and value pairs: a customer, an order, a quote.

<script setup lang="ts">
import { FsDescriptionList } from '@fivespark/ui'

const items = [
  { label: 'Klant', content: 'Acme Bouw BV' },
  { label: 'Offertenummer', content: 'OF-2026-0142' },
  { label: 'Totaal', content: '€ 1.250,00' },
]
</script>

<template>
  <FsDescriptionList :items class="w-full max-w-xl" />
</template>

Usage

<script setup lang="ts">
import { FsDescriptionList } from '@fivespark/ui'

const items = [
  { label: 'Klant', content: 'Acme Bouw BV' },
  { label: 'Totaal', content: '€ 1.250,00' },
]
</script>

<template>
  <FsDescriptionList :items />
</template>

content is text, already formatted by your page. Figures compared across records belong in a Table; key figures with a change are a Stat.

Examples

Value as markup

Give an item a value instead of content and fill the slot of that name: a badge, a link, an avatar with a name.

<script setup lang="ts">
import { FsBadge, FsDescriptionList, FsLink } from '@fivespark/ui'

const items = [
  { label: 'Klant', value: 'klant' },
  { label: 'Status', value: 'status' },
  { label: 'Totaal', content: '€ 1.250,00' },
]
</script>

<template>
  <FsDescriptionList :items class="w-full max-w-xl">
    <template #klant><FsLink to="/klanten/acme-bouw">Acme Bouw BV</FsLink></template>
    <template #status><FsBadge tone="success" label="Geaccepteerd" /></template>
  </FsDescriptionList>
</template>

Missing value

An item without content, or with an empty one, shows a dash that screen readers read as "Geen gegevens".

<script setup lang="ts">
import { FsDescriptionList } from '@fivespark/ui'

const items = [
  { label: 'Klant', content: 'Acme Bouw BV' },
  { label: 'Referentie' },
  { label: 'Opmerking', content: '' },
]
</script>

<template>
  <FsDescriptionList :items class="w-full max-w-xl" />
</template>

Several lines and long values

A line break in content is kept, so an address stays on two lines. Long values wrap instead of widening the list.

<script setup lang="ts">
import { FsDescriptionList } from '@fivespark/ui'

const items = [
  { label: 'Klant', content: 'Acme Bouw BV' },
  { label: 'Afleveradres', content: 'Lange Voorhout 1\n2514 EA Den Haag' },
  { label: 'E-mailadres facturatie', content: 'facturatie@acme-installatietechniek.nl' },
]
</script>

<template>
  <FsDescriptionList :items class="w-full max-w-xl" />
</template>

In a card

The list draws nothing of its own, so put it in a card or a drawer, which bring the title. Below 32rem of its own width, each label sits above its value.

<script setup lang="ts">
import { FsCard, FsDescriptionList } from '@fivespark/ui'

const items = [
  { label: 'Klant', content: 'Acme Bouw BV' },
  { label: 'Geldig tot', content: '30 november 2026' },
  { label: 'Totaal', content: '€ 1.250,00' },
]
</script>

<template>
  <FsCard title="Offerte OF-2026-0142" class="w-full max-w-xl">
    <FsDescriptionList :items />
  </FsCard>
</template>

API Reference

FsDescriptionList

Prop	Type	Default	Description
items	DescriptionListItem[]	required	The items, in order. `content` is the value as text, already formatted; `value`, on an item whose value is more than text, names the slot that takes its place.