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>