Detail List

Label/value list showing object properties.

html

<div class="detail-list detail-list--stacked" style="--accent:#241430;--label-w:96px;">
  <h3 class="detail-list__heading">Order details</h3>
  <dl class="detail-list__dl">
    <div class="detail-list__row"><dt>Order</dt><dd>#1042</dd></div>
    <div class="detail-list__row"><dt>Customer</dt><dd>A. Whitfield</dd></div>
    <div class="detail-list__row"><dt>Status</dt><dd>Shipped</dd></div>
    
    <div class="detail-list__row"><dt>Note</dt><dd>Left at the front desk</dd></div>
    
  </dl>
</div>
<style>
.detail-list { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 340px; width: 340px; padding: 18px; border-radius: 12px; box-sizing: border-box; }
.detail-list__heading { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.detail-list__dl { margin: 0; }
.detail-list__row { padding: 8px 0; border-bottom: 1px solid #24143014; }
.detail-list__row:last-child { border-bottom: none; }
.detail-list__row dt { color: var(--accent); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.detail-list__row dd { margin: 2px 0 0; }
.detail-list--inline .detail-list__row { display: flex; gap: 12px; align-items: baseline; }
.detail-list--inline .detail-list__row dt { flex: 0 0 var(--label-w); text-transform: none; font-size: 13px; }
.detail-list--inline .detail-list__row dd { margin: 0; }
.detail-list--grid .detail-list__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.detail-list--grid .detail-list__row { border-bottom: none; padding: 0; }
</style>

tailwind

<div class="detail-list-tw detail-list-tw--stacked font-sans text-sm text-[#241430] bg-[#FAF7F2] max-w-[340px] w-[340px] p-[18px] rounded-xl box-border" style="--accent:#241430;--label-w:96px;">
  <h3 class="m-0 mb-3 text-[15px] font-bold">Order details</h3>
  <dl class="detail-list-tw__dl m-0">
    <div class="detail-list-tw__row py-2 border-b border-[#24143014]"><dt class="m-0 text-xs font-semibold uppercase tracking-wide" style="color:#241430">Order</dt><dd class="mt-0.5 mb-0">#1042</dd></div>
    <div class="detail-list-tw__row py-2 border-b border-[#24143014]"><dt class="m-0 text-xs font-semibold uppercase tracking-wide" style="color:#241430">Customer</dt><dd class="mt-0.5 mb-0">A. Whitfield</dd></div>
    <div class="detail-list-tw__row py-2 border-b border-[#24143014]"><dt class="m-0 text-xs font-semibold uppercase tracking-wide" style="color:#241430">Status</dt><dd class="mt-0.5 mb-0">Shipped</dd></div>
    
    <div class="detail-list-tw__row py-2"><dt class="m-0 text-xs font-semibold uppercase tracking-wide" style="color:#241430">Note</dt><dd class="mt-0.5 mb-0">Left at the front desk</dd></div>
    
  </dl>
</div>
<style>
.detail-list-tw--inline .detail-list-tw__row { display:flex; gap:12px; align-items:baseline; }
.detail-list-tw--inline .detail-list-tw__row dt { flex:0 0 var(--label-w); text-transform:none; font-size:13px; }
.detail-list-tw--grid .detail-list-tw__dl { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.detail-list-tw--grid .detail-list-tw__row { border-bottom:none; padding:0; }
</style>

react

export function DetailList({
  heading = "Order details",
  layout = "stacked",
  accent = "#241430",
  showNote = true,
  labelWidth = 96,
}) {
  const rows = [["Order", "#1042"], ["Customer", "A. Whitfield"], ["Status", "Shipped"]];
  if (showNote) rows.push(["Note", "Left at the front desk"]);
  const inline = layout === "inline";
  const grid = layout === "grid";
  const dlStyle = grid ? { margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 16px" } : { margin: 0 };
  const rowStyle = inline
    ? { display: "flex", gap: 12, alignItems: "baseline", padding: "8px 0", borderBottom: "1px solid #24143014" }
    : grid
    ? { padding: 0 }
    : { padding: "8px 0", borderBottom: "1px solid #24143014" };
  const dtStyle = { color: accent, fontWeight: 600, fontSize: inline ? 13 : 12, textTransform: inline ? "none" : "uppercase", letterSpacing: ".03em", margin: 0, flex: inline ? `0 0 ${labelWidth}px` : undefined };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", maxWidth: 340, width: 340, padding: 18, borderRadius: 12, boxSizing: "border-box" }}>
      <h3 style={{ margin: "0 0 12px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
      <dl style={dlStyle}>
        {rows.map(([label, value]) => (
          <div key={label} style={rowStyle}>
            <dt style={dtStyle}>{label}</dt>
            <dd style={{ margin: inline ? 0 : "2px 0 0" }}>{value}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}