Detail list
A <dl> of a record's fields, laid out inline or stacked. A blank value renders as an em dash, so call sites don't each need .presence || "—".
Inline
Labels beside values. Notes is blank, so it shows an em dash.
- Name
- Ada Lovelace
- Role
- Engineer
- Notes
- —
<%= detail_list do |list| %>
<% list.item "Name", "Ada Lovelace" %>
<% list.item "Role", "Engineer" %>
<% list.item "Notes", nil %>
<% end %>Stacked
Small uppercase labels above values, two columns on wide screens.
- Client ID
- abc123
- Scopes
- read write
- Redirect URIs
- https://example.com/callback
<%= detail_list variant: :stacked do |list| %>
<% list.item "Client ID", "abc123", class: "font-mono" %>
<% list.item "Scopes", "read write" %>
<% list.item "Redirect URIs", span: :full do %>
https://example.com/callback
<% end %>
<% end %>