Skip to content

Overview

The Description List component renders structured key-value data using semantic HTML <dl>, <dt>, and <dd> elements. It is ideal for displaying entity details, profile information, order summaries, or any data that follows a label-value pattern. Each item can use either a value prop or the default slot for rich content.

Use description lists for:

  • Customer or user profiles
  • Order and invoice details
  • Settings summaries
  • Metadata displays

Basic Usage

Name
Jane Doe
Email
[email protected]
<x-aura::description-list>
    <x-aura::description-list.item label="Name" value="Jane Doe" />
    <x-aura::description-list.item label="Email" value="[email protected]" />
</x-aura::description-list>

Props

Description List

Prop Type Default Description
-- -- -- The wrapper accepts no specific props. Pass classes via class attribute.

Description List Item

Prop Type Default Description
label string '' The key/term displayed as <dt>
value string|null null The value displayed as <dd>. If null, the default slot is used.

Variants/Examples

Customer Details

Full Name
Jane Doe
Email
[email protected]
Phone
+1 (555) 123-4567
Address
123 Main St, New York, NY 10001
<x-aura::description-list>
    <x-aura::description-list.item label="Full Name" value="Jane Doe" />
    <x-aura::description-list.item label="Email" value="[email protected]" />
    <x-aura::description-list.item label="Phone" value="+1 (555) 123-4567" />
    <x-aura::description-list.item label="Address" value="123 Main St, New York, NY 10001" />
</x-aura::description-list>

With Rich Content via Slot

When you need more than plain text in the value, use the default slot instead of the value prop.

Status
Active
Assigned To
BS
Bob Smith
Tags
Laravel PHP 
<x-aura::description-list>
    <x-aura::description-list.item label="Status">
        <x-aura::badge variant="success" dot>Active</x-aura::badge>
    </x-aura::description-list.item>

    <x-aura::description-list.item label="Assigned To">
        <div class="flex items-center gap-2">
            <x-aura::avatar name="Bob Smith" size="xs" />
            <span>Bob Smith</span>
        </div>
    </x-aura::description-list.item>

    <x-aura::description-list.item label="Tags">
        <div class="flex gap-1">
            <x-aura::badge variant="info" size="sm">Laravel</x-aura::badge>
            <x-aura::badge variant="info" size="sm">PHP</x-aura::badge>
        </div>
    </x-aura::description-list.item>
</x-aura::description-list>

Order Summary

Order #12345

Order Date
February 15, 2026
Payment Method
Visa ending in 4242
Subtotal
$99.00
Tax
$8.91
Total
$107.91
<x-aura::card>
    <x-slot:header>
        <x-aura::card.title>Order #12345</x-aura::card.title>
    </x-slot:header>

    <x-aura::description-list>
        <x-aura::description-list.item label="Order Date" value="February 15, 2026" />
        <x-aura::description-list.item label="Payment Method" value="Visa ending in 4242" />
        <x-aura::description-list.item label="Subtotal" value="$99.00" />
        <x-aura::description-list.item label="Tax" value="$8.91" />
        <x-aura::description-list.item label="Total" value="$107.91" />
    </x-aura::description-list>
</x-aura::card>

Dynamic Data from Controller

// Controller
$details = [
    ['label' => 'Company', 'value' => $company->name],
    ['label' => 'VAT Number', 'value' => $company->vat],
    ['label' => 'Country', 'value' => $company->country],
];

return view('company.show', compact('details'));

<x-aura::description-list>
    @foreach($details as $detail)
        <x-aura::description-list.item
            :label="$detail['label']"
            :value="$detail['value']"
        />
    @endforeach
</x-aura::description-list>

Slots

Description List

Slot Description
Default Contains <x-aura::description-list.item> children

Description List Item

Slot Description
Default Rich content for the value. Used when value prop is null.

Accessibility

  • Uses semantic HTML: <dl> for the list, <dt> for terms, <dd> for values.
  • Screen readers announce the label-value relationship correctly via the <dl> structure.
  • No interactive elements by default; the component is a pure data display.
  • Ensure sufficient color contrast for both labels and values in light and dark modes.