Data List

Semantic key-value pairs rendered as a native <dl> (definition list). Ideal for displaying record details, settings summaries, or any structured label + value content.

Basic Usage

<x-wirekit::data-list>
    <x-wirekit::data-list.item label="Name">John Doe</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Email">john.doe@mail</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Plan">Pro ($29/mo)</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Joined">June 1, 2024</x-wirekit::data-list.item>
</x-wirekit::data-list>

Layouts

Horizontal (default)

Labels on the left, values on the right. Items separated by dividers:

<x-wirekit::data-list layout="horizontal">
    <x-wirekit::data-list.item label="Status">Active</x-wirekit::data-list.item>
</x-wirekit::data-list>

Stacked

Labels above values, each item spaced vertically:

<x-wirekit::data-list layout="stacked">
    <x-wirekit::data-list.item label="Description">A long description that wraps naturally in a stacked layout without being constrained by a side-by-side arrangement.</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Category">Engineering</x-wirekit::data-list.item>
</x-wirekit::data-list>

Grid

Two-column grid on desktop, stacked on mobile:

<x-wirekit::data-list layout="grid">
    <x-wirekit::data-list.item label="First Name">John</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Last Name">Doe</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Email">john.doe@mail</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Phone">+1 (555) 123-4567</x-wirekit::data-list.item>
</x-wirekit::data-list>

Summary

The totals shape — an invoice subtotal block, a cart summary, an order overview. The label takes whatever width is left over; the value is as wide as its own content and sits flush right, so amounts line up under one another along a single column edge. Values are set in tabular figures, so digits occupy equal widths and the decimal points stack:

<x-wirekit::data-list layout="summary">
    <x-wirekit::data-list.item label="Subtotal">$1,240.00</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Shipping">$12.50</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Tax (19%)">$238.08</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Total">$1,490.58</x-wirekit::data-list.item>
</x-wirekit::data-list>

Use it wherever a value is a quantity rather than a description. grid cannot express this shape — its two tracks are equal, so the amount is handed half the row and floats in the middle of its own whitespace — and horizontal cannot either, because its label track is a fixed third of the width, so a long label wraps while the center of the row sits empty.

Two deliberate differences from the other three layouts:

• No row separators, and no per-item padding. Row rhythm comes from the grid's row gap instead. A totals block rules the line above the grand total, not every line — add that rule yourself where it belongs.
• A class on an item has no visual effect. The item's wrapper is display: contents here, so that its <dt> and <dd> can be the grid's own items. Style the value through the slot content instead.

Detail

The mirror of summary, and the commoner of the two: the label is as wide as its own text and the value takes the rest. This is the ordinary detail list — a customer, a payment method, a shipping option — where the value is a description rather than a quantity:

<x-wirekit::data-list layout="detail">
    <x-wirekit::data-list.item label="Customer">Dana Ortiz</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Payment method">Credit card ending 4242</x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Shipping">Standard, 3–5 business days</x-wirekit::data-list.item>
</x-wirekit::data-list>

grid is the tempting wrong choice here. Its two tracks are equal, so a short label like "Shipping" is handed half the row and the value the other half, leaving the two standing apart with the middle of the row empty.

It shares summary's grid mechanics — the items become the list's own grid cells, so the value column is one track measured across every row — and deliberately not its alignment. A summary value is an amount and sits flush right in tabular figures so the digits stack; a detail value is prose, and right-aligning a sentence strands it against the far edge.

Rich Values

The value slot accepts any content, including other WireKit components:

<x-wirekit::data-list>
    <x-wirekit::data-list.item label="Status"><x-wirekit::badge intent="success">Active</x-wirekit::badge></x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Plan"><x-wirekit::badge>Pro</x-wirekit::badge></x-wirekit::data-list.item>
    <x-wirekit::data-list.item label="Next billing">December 1, 2024</x-wirekit::data-list.item>
</x-wirekit::data-list>

Props

Container

Item

Accessibility

• Uses native <dl>, <dt>, <dd> HTML elements — screen readers announce content as a definition list.
• No ARIA attributes needed — the semantic HTML provides the accessibility contract.
• Label text styled with muted color but readable at WCAG AA contrast ratios via design tokens.

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

• Don't pass items with HTML in label/value. The component HTML-escapes both — passing <strong> renders as text. Use named slots when you need rich content per row.
• Don't reach for summary when the value is prose. It sizes the value track to the content, so a sentence pushes the label into a narrow column. stacked is the layout for long values.

Design Tokens