IDescriptionList ​

Term and value pairs — a details panel, an order summary, a record's metadata.

<IDescriptionList
  :items="[
    { term: 'Invoice', description: 'INV-2048' },
    { term: 'Issued', description: '12 August 2026' },
    { term: 'Due', description: '11 September 2026' },
    { term: 'Amount', description: '€4,280.00' },
  ]"
/>

Orientation ​

vertical stacks the description under its term. horizontal puts them side by side, with the terms sharing one column — the columns are a subgrid, so every value lines up however long the terms run.

<IDescriptionList :items="items" />
<IDescriptionList orientation="horizontal" :items="items" />

Divided ​

divided rules the rows apart instead of spacing them, for a long list where the eye needs the row boundary.

<IDescriptionList
  orientation="horizontal"
  divided
  :items="items"
/>

Slots ​

The term and description slots take over the rendering of every row, each receiving the item and its index.

<IDescriptionList orientation="horizontal" divided :items="items">
  <template #description="{ item }">
    <IBadge v-if="item.key === 'status'" variant="success">{{ item.description }}</IBadge>
    <span v-else-if="item.key === 'reference'" class="font-mono text-xs">{{ item.description }}</span>
    <template v-else>{{ item.description }}</template>
  </template>
</IDescriptionList>

The default slot renders after the items, for a row that does not fit the items shape at all. Write it as <div><dt>…</dt><dd>…</dd></div> so it keeps the row layout.

Props ​

key is only an identity — it names the row for the slots and keys the render. Rows fall back to their term when it is absent, so give a key when two rows share a term.

Slots ​