Callout Expandable

Fetch pattern JSON: curl https://webspire.de/patterns/callout/expandable.json

expandable.html

<details class="ws-callout group rounded-lg border border-[var(--ws-callout-border)] bg-[var(--ws-callout-bg)] open:pb-4" open>
  <summary class="flex cursor-pointer items-center gap-3 rounded-lg px-4 py-3 text-[var(--ws-callout-text)] marker:content-[''] [&::-webkit-details-marker]:hidden">
    <svg class="h-5 w-5 shrink-0 text-[var(--ws-callout-icon)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/>
    </svg>
    <span class="flex-1 text-sm font-semibold">Overview</span>
    <svg class="h-4 w-4 shrink-0 text-[var(--ws-callout-text-soft)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
    </svg>
  </summary>
  <div class="px-4 pt-1 text-sm leading-relaxed text-[var(--ws-callout-text-soft)]">
    <p>This content is collapsible. Use the <code>&lt;details&gt;</code> element for native expand/collapse without JavaScript. Works with keyboard navigation and screen readers out of the box.</p>
  </div>
</details>

Details

Family

callout

Tier

enhanced

Kind

component

Extends

callout/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

calloutexpandablecollapsibledetailssummaryadmonitionknowledge-base

Slots

Name	Required	Description
icon	No	SVG icon in the summary bar.
title	Yes	Callout title text in summary.
content	Yes	Collapsible content area.

Expandable callout using native <details>/<summary>. Chevron rotates on open via group-open:rotate-180. No JavaScript, fully keyboard accessible, screen reader compatible. Combine multiple at the top of pillar articles for Abstract + TLDR + Audience callout stacks (Obsidian/Notion style).