# `PhiaUi.Components.Layout.DescriptionList`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/description_list.ex#L1)

Semantic `<dl>/<dt>/<dd>` key-value display component.

Three layout variants:

- `:vertical` — term stacked above description (default)
- `:horizontal` — term and description side-by-side, separated by divider lines
- `:grid` — two-column grid for dense data displays

## Sub-components

- `dl_item/1` — wraps a term+description pair
- `dl_term/1` — renders `<dt>` with muted label styling
- `dl_description/1` — renders `<dd>` with foreground value styling

## Examples

    <%!-- Vertical (default) --%>
    <.description_list>
      <.dl_item>
        <:term>Status</:term>
        <:description>Active</:description>
      </.dl_item>
      <.dl_item>
        <:term>Plan</:term>
        <:description>Pro</:description>
      </.dl_item>
    </.description_list>

    <%!-- Horizontal with dividers --%>
    <.description_list variant={:horizontal}>
      <.dl_item>
        <:term>Created</:term>
        <:description>Jan 1, 2026</:description>
      </.dl_item>
    </.description_list>

    <%!-- Grid layout --%>
    <.description_list variant={:grid}>
      <.dl_item>
        <:term>Owner</:term>
        <:description>Jane Doe</:description>
      </.dl_item>
      <.dl_item>
        <:term>Team</:term>
        <:description>Engineering</:description>
      </.dl_item>
    </.description_list>

# `description_list`

Renders a semantic description list.
## Attributes

* `variant` (`:atom`) - Layout variant. Defaults to `:vertical`. Must be one of `:vertical`, `:horizontal`, or `:grid`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<dl>` element.
## Slots

* `inner_block` (required) - One or more `dl_item/1` components.

# `dl_description`

Renders a `<dd>` description value.
## Attributes

* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `dl_item`

Renders a key-value pair within a `description_list`.
## Attributes

* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the wrapper element.
## Slots

* `term` (required) - The key/label (`<dt>`).
* `description` (required) - The value (`<dd>`).

# `dl_term`

Renders a `<dt>` term label.
## Attributes

* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*