dl

A label and value list for detail pages. Empty values show a dash.

Example

ID
seg_lapsed_2025
Owner
Example Admin
Notes
-
Per-user limit
1
Global limit
500
Scope
Once per event
Track redemption
On

Laravel

<x-admin::dl :items="['ID' => 'seg_lapsed_2025', 'Owner' => 'Example Admin', 'Notes' => null]" />
<x-admin::dl :columns="2" class="mt" :items="['Per-user limit' => '1', 'Global limit' => '500', 'Scope' => 'Once per event', 'Track redemption' => 'On']" />

Props

PropRequiredDefaultOptions
items[]
columns1

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Dl } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<dl class="adm-dl">
            <dt>ID</dt>
        <dd>seg_lapsed_2025</dd>
            <dt>Owner</dt>
        <dd>Example Admin</dd>
            <dt>Notes</dt>
        <dd>-</dd>
        
</dl>
<dl class="adm-dl adm-dl--cols-2 mt">
            <dt>Per-user limit</dt>
        <dd>1</dd>
            <dt>Global limit</dt>
        <dd>500</dd>
            <dt>Scope</dt>
        <dd>Once per event</dd>
            <dt>Track redemption</dt>
        <dd>On</dd>
        
</dl>