PhiaUi.Components.Layout.DescriptionList (phia_ui v0.1.17)

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>

Summary

Functions

description_list(assigns)

Renders a semantic description list.

dl_description(assigns)

Renders a <dd> description value.

dl_item(assigns)

Renders a key-value pair within a description_list.

dl_term(assigns)

Renders a <dt> term label.

Functions

description_list(assigns)

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(assigns)

Renders a <dd> description value.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

dl_item(assigns)

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(assigns)

Renders a <dt> term label.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)