summary

Visible heading/control for a details element.

html

<details class="sum-el sum-el--arrow" style="--accent:#241430;">
  <summary class="sum-el__summary">Order #4471 — 3 items</summary>
  <p class="sum-el__body">2× Ceramic mug, 1× Saucer set. The <code>&lt;summary&gt;</code> is the only part that is always visible and clickable.</p>
</details>
<style>
.sum-el { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143025; border-radius: 10px; padding: 4px 16px; }
.sum-el__summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.sum-el__summary::-webkit-details-marker { display: none; }
.sum-el--arrow .sum-el__summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .sum-el--arrow .sum-el__summary::after { transition: transform .15s; }
}
.sum-el--arrow[open] .sum-el__summary::after { transform: rotate(45deg); }
.sum-el--plusminus .sum-el__summary::after { content: "+"; color: var(--accent); font-size: 18px; }
.sum-el--plusminus[open] .sum-el__summary::after { content: "–"; }
.sum-el--triangle .sum-el__summary::after { content: "▸"; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .sum-el--triangle .sum-el__summary::after { transition: transform .15s; }
}
.sum-el--triangle[open] .sum-el__summary::after { transform: rotate(90deg); display: inline-block; }
.sum-el__body { margin: 0 0 14px; font-size: 13px; color: #241430cc; }
.sum-el__body code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
</style>

tailwind

<details class="sum-tw sum-tw--arrow w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143025] rounded-[10px] px-4 py-1 [&_summary::-webkit-details-marker]:hidden">
  <summary class="list-none cursor-pointer py-3.5 font-bold flex justify-between items-center">Order #4471 — 3 items</summary>
  <p class="m-0 mb-3.5 text-[13px] text-[#241430]/80">2× Ceramic mug, 1× Saucer set. The <code class="bg-[#24143012] px-1.5 py-0.5 rounded">&lt;summary&gt;</code> is the only part that is always visible and clickable.</p>
</details>
<style>
.sum-tw--arrow summary::after { content: "▸"; float: right; color: #241430; }
.sum-tw--plusminus summary::after { content: "+"; float: right; color: #241430; }
.sum-tw--triangle summary::after { content: "▾"; float: right; color: #241430; }
</style>

react

export function SummaryElement({
  text = "Order #4471 — 3 items",
  markerStyle = "arrow",
  accent = "#241430",
  open = false,
}) {
  const markers = { arrow: "▸", plusminus: "+", triangle: "▾" };
  return (
    <details open={open} style={{ width: 300, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143025", borderRadius: 10, padding: "4px 16px" }}>
      <summary style={{ listStyle: "none", cursor: "pointer", padding: "13px 0", fontWeight: 700, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        {text}
        <span aria-hidden="true" style={{ color: accent }}>{markers[markerStyle] ?? "▸"}</span>
      </summary>
      <p style={{ margin: "0 0 14px", fontSize: 13, color: "#241430cc" }}>2× Ceramic mug, 1× Saucer set. The <code>&lt;summary&gt;</code> is the only part that is always visible and clickable.</p>
    </details>
  );
}