callout tip success best-practice green callout tip success green best-practice recommendation green tip callout success notice box
Callout Tip
Fetch pattern JSON:
curl https://webspire.de/patterns/callout/tip.json tip.html
<aside role="note" aria-label="Tip" class="ws-callout flex gap-4 rounded-lg border-l-4 border-[var(--ws-color-success)] bg-[var(--ws-color-success-soft)] p-4">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-color-success)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<div>
<p class="font-semibold text-[var(--ws-color-success)]">Tip</p>
<p class="mt-1 text-sm text-[var(--ws-callout-text-soft)]">This is a tip callout for best practices and helpful suggestions. Use it to share recommendations that improve the reader's workflow or outcome.</p>
</div>
</aside>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
callouttipsuccessbest-practicegreen
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Leading checkmark or tip icon. |
| title | Yes | Callout heading text. |
| body | Yes | Callout message content. |
Green-themed callout for tips, best practices, and positive recommendations. Extends the base callout with a success-oriented color scheme and checkmark icon.