callout alert notice info-box message callout alert notice admonition info-box aside neutral callout or notice box highlight important information
Callout Base
Fetch pattern JSON:
curl https://webspire.de/patterns/callout/base.json base.html
<aside role="note" aria-label="Callout" class="ws-callout flex gap-4 rounded-lg border-l-4 border-[var(--ws-callout-border)] bg-[var(--ws-callout-bg)] p-4">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-callout-icon)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
</svg>
<div>
<p class="font-semibold text-[var(--ws-callout-text)]">Note</p>
<p class="mt-1 text-sm text-[var(--ws-callout-text-soft)]">This is a neutral callout for general information. Use it to highlight important details without implying urgency or status.</p>
</div>
</aside>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
calloutalertnoticeinfo-boxmessage
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Leading icon for the callout. |
| title | Yes | Callout heading text. |
| body | Yes | Callout message content. |
Neutral callout with a left accent border, info icon, title, and body text. Use as a baseline for documentation notes or general-purpose highlighted content.