The description list components.

With items (short-cut form)

iex> assigns = %{}
...> render ~H"""
...> <.ui_dl>
...>   <.ui_dl_item label="Length" value="8" />
...>   <.ui_dl_item label="Inserted at">2007-01-02</.ui_dl_item>
...> </.ui_dl>
...> """
"""
<dl class="a-dl">
  <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
    <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s">
      Length
    </dt>
    <dd class="u-col-span-2">
      8
    </dd>
  </div>
  <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
    <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s">
      Inserted at
    </dt>
    <dd class="u-col-span-2">
      2007-01-02
    </dd>
  </div>
</dl>
"""

With items (short-cut and long form) and extra attributes

iex> assigns = %{}
...> render ~H"""
...> <.ui_dl class="extra" data-foo="baz">
...>   <.ui_dl_item label="Length" class="u-fg-brand-2">8</.ui_dl_item>
...>   <.ui_dl_item>
...>     <.ui_dt class="u-fg-brand-1" data-foo="bar">Some</.ui_dt>
...>     <.ui_dd class="u-fg-brand-1" data-foo="bar">Tag</.ui_dd>
...>   </.ui_dl_item>
...>   <.ui_dl_item>
...>     <.ui_dt><pre>Tag</pre></.ui_dt>
...>     <.ui_dd>Value</.ui_dd>
...>   </.ui_dl_item>
...> </.ui_dl>
...> """
"""
<dl class="a-dl extra" data-foo="baz">
  <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l u-fg-brand-2">
    <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s">
      Length
    </dt>
    <dd class="u-col-span-2">
      8
    </dd>
  </div>
  <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
    <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s u-fg-brand-1" data-foo="bar">
      Some
    </dt>
    <dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
      Tag
    </dd>
  </div>
  <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
    <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s">
      <pre>
        Tag
      </pre>
    </dt>
    <dd class="u-col-span-2">
      Value
    </dd>
  </div>
</dl>
"""