callout info information notice blue callout info information blue notice details blue info callout informational notice box
Callout Info
Fetch pattern JSON:
curl https://webspire.de/patterns/callout/info.json info.html
<aside role="note" aria-label="Information" class="ws-callout flex gap-4 rounded-lg border-l-4 border-[var(--ws-color-info)] bg-[var(--ws-color-info-soft)] p-4">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-color-info)]" 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-color-info)]">Information</p>
<p class="mt-1 text-sm text-[var(--ws-callout-text-soft)]">This is an informational callout. Use it to provide additional context or supplementary details that help the reader understand the topic better.</p>
</div>
</aside>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
calloutinfoinformationnoticeblue
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Leading info icon. |
| title | Yes | Callout heading text. |
| body | Yes | Callout message content. |
Blue-themed informational callout extending the base. Ideal for supplementary context, helpful details, or documentation notes that provide extra background.