Description list
Lists the details of a record as label and value pairs, one below the other. Suits read-only summaries such as order, license, or customer details.
Basic usage
The shortest way is to pass a [label => value] array with :items. Values are escaped, so they are not interpreted as HTML. On wide screens the label sits on the left and the value on the right; on narrow screens the label moves above the value.
<acun:description-list :items="[
'Customer name' => 'Ayşe Yılmaz',
'Customer no.' => 'CUS-10482',
'Membership' => 'Premium',
'Orders' => '5',
'Address' => 'No. 14, Moda St., Kadıköy / Istanbul',
]" />| Prop | Values |
|---|---|
items | ['Label' => 'Value', …] |
Rich values
If a value needs a badge, a link, or several lines, build the list from acun:description-list.item rows. The label is passed with label, and the value goes in the slot.
<acun:description-list>
<acun:description-list.item label="Status">
<acun:badge variant="success">Delivered</acun:badge>
</acun:description-list.item>
<acun:description-list.item label="Delivered on">
September 12, 2026, 09:42 · <a href="#" class="font-medium text-brand-600 hover:underline dark:text-brand-400">Track shipment</a>
</acun:description-list.item>
<acun:description-list.item label="Notes">
<p>Left with the building attendant; the doorbell does not work.</p>
<p class="mt-1 text-gray-500 dark:text-zinc-400">Mehmet Kaya · September 3, 2026</p>
</acun:description-list.item>
</acun:description-list>| Prop | Values |
|---|---|
label | Row label |
Array and rows together
:items and the slot can be used together: the plain values from the array come first, followed by the rows in the slot. Write simple fields with the array and the ones that need a custom look with acun:description-list.item.
<acun:description-list :items="['License no.' => 'AC-2026-0412', 'Company' => 'Acme Software', 'Expiry date' => 'December 31, 2026']">
<acun:description-list.item label="Status">
<acun:badge variant="warning">Awaiting renewal</acun:badge>
</acun:description-list.item>
</acun:description-list>Inside a card
On detail pages, put the list inside an acun:card with a title. class can be added to both the list and the rows; -my-3 in the example balances the spacing of the first and last rows against the card's padding.
<acun:card title="Customer details" subtitle="Last updated: September 3, 2026">
<acun:description-list class="-my-3" :items="[
'Customer name' => 'Ayşe Yılmaz',
'Phone' => '0 (216) 000 00 00',
'Membership' => 'Premium',
]" />
<acun:slot:footer>
<acun:button size="sm" variant="ghost">Edit</acun:button>
</acun:slot:footer>
</acun:card>| Prop | Values |
|---|---|
class | Added to the list or to a row |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
items | [] | label => value; values are escaped |
description-list.item: label | — | Required; the row label |