Description List
x-bladewind::description-list and
x-bladewind::description-list.item present label/value pairs (a profile, a
record's details, an order summary) as a real semantic <dl>, stacked on
mobile and laid out label-beside-value from the sm breakpoint up.
- Full name
- Jane Cooper
- Email address
- jane.cooper@example.com
- Role
- Admin
markup
<x-bladewind::description-list>
<x-bladewind::description-list.item label="Full name">Jane Cooper</x-bladewind::description-list.item>
<x-bladewind::description-list.item label="Email address">jane.cooper@example.com</x-bladewind::description-list.item>
<x-bladewind::description-list.item label="Role">Admin</x-bladewind::description-list.item>
</x-bladewind::description-list>Action slots
Give an item an action slot for a control shown beside its value: an edit link,
a copy button, anything.
- Email address
- jane.cooper@example.com Edit
markup
<x-bladewind::description-list.item label="Email address">
jane.cooper@example.com
<x-slot:action>
<a href="#">Edit</a>
</x-slot:action>
</x-bladewind::description-list.item>Striped rows
Set striped on the list to alternate a subtle background on every row; it
propagates from the list to each item automatically.
- Plan
- Pro
- Renews
- March 4, 2027
- Seats
- 12 of 20 used
markup
<x-bladewind::description-list striped="true">
...
</x-bladewind::description-list>Full List Of Attributes
Description List
| Option | Default | Available Values |
|---|---|---|
| divided | true | Horizontal rule between rows. |
| striped | false | Alternates a subtle background on every row. Propagates to items automatically. |
| class | (blank) | Additional CSS classes for the wrapper element. |
Description List with all attributes defined
markup
<x-bladewind::description-list
divided="true"
striped="true"
class="ml-2">Description List Item
| Option | Default | Available Values |
|---|---|---|
| label | (blank) | The row's label. |
| action | (none) | A named slot rendered beside the value. |
| class | (blank) | Additional CSS classes for the row. |
Description List Item with all attributes defined
markup
<x-bladewind::description-list.item
label="Email address"
class="ml-2">
jane.cooper@example.com
<x-slot:action>
<a href="#">Edit</a>
</x-slot:action>
</x-bladewind::description-list.item>The source file for this component is available in
resources > views > components > bladewind > description-list > index.blade.php,
resources > views > components > bladewind > description-list > item.blade.php