Components

Description List

A semantic key/value list (term/description) — horizontal or vertical, with an optional bordered style.

php artisan blatui:add description-list

Full name: Sofia Carter
Email: [email protected]
Plan: Pro (annual)
Member since: March 2024

<x-ui.description-list class="w-full max-w-md">
    <x-ui.description-item term="Full name">Sofia Carter</x-ui.description-item>
    <x-ui.description-item term="Email">[email protected]</x-ui.description-item>
    <x-ui.description-item term="Plan">Pro (annual)</x-ui.description-item>
    <x-ui.description-item term="Member since">March 2024</x-ui.description-item>
</x-ui.description-list>

Bordered

Invoice: #INV-2048
Status: Paid
Amount: $1,200.00
Due date: June 30, 2026

<x-ui.description-list :bordered="true" class="w-full max-w-md">
    <x-ui.description-item term="Invoice">#INV-2048</x-ui.description-item>
    <x-ui.description-item term="Status">Paid</x-ui.description-item>
    <x-ui.description-item term="Amount">$1,200.00</x-ui.description-item>
    <x-ui.description-item term="Due date">June 30, 2026</x-ui.description-item>
</x-ui.description-list>

Vertical

Shipping address: 128 Maple Street
Brooklyn, NY 11201
Delivery method: Express (2-day)
Order total: $148.00

<x-ui.description-list layout="vertical" class="w-full max-w-md">
    <x-ui.description-item term="Shipping address">
        128 Maple Street<br>
        Brooklyn, NY 11201
    </x-ui.description-item>
    <x-ui.description-item term="Delivery method">Express (2-day)</x-ui.description-item>
    <x-ui.description-item term="Order total">$148.00</x-ui.description-item>
</x-ui.description-list>

API Reference

Props, slots and exposed methods for <x-ui.description-list>.

Props

Prop	Type	Default	Description
`layout`	`string`	`'horizontal'`	Row layout. "horizontal" puts the term and value side by side (a grid from the sm breakpoint up); "vertical" stacks the value under the term. Each <x-ui.description-item> inherits this automatically. `horizontal` `vertical`
`bordered`	`bool`	`false`	Wrap the list in a bordered card surface with dividers between rows. When false, rows simply stack with a vertical gap.

Slots

Slot	Description
`default`	One <x-ui.description-item term="..."> per row. Each item exposes a "term" prop (or a term slot for richer markup) and renders its value from the default slot. Items inherit the list's layout and bordered props, so you set those once on the list.