Callout
Visually distinct aside for tips, warnings, and contextual notes — gentler than Alert
SSR mode
Examples
Info (default) with title and body
Did you know?
Sitecore Blok tokens are fully compatible with Tailwind CSS v4 and cascade naturally through your design system.
Warning with icon
Heads up
Saving will overwrite your current draft. Make sure you have a backup before continuing.
Danger — title only
This action cannot be undone.
Success — borderless
All systems operational
Every service is running within normal parameters.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Callout | Visually distinct aside for tips, warnings, and contextual notes. Softer than Alert — intended for supplementary information rather than critical errors. Uses the shared Tone enum and ToneClasses helper for tonal Tailwind classes. Wrapper-styling. |
Callout
Visually distinct aside for tips, warnings, and contextual notes. Softer than Alert — intended for supplementary information rather than critical errors. Uses the shared Tone enum and ToneClasses helper for tonal Tailwind classes. Wrapper-styling.
| Property | Type | Required | Description |
|---|---|---|---|
| Title | string? | Optional heading rendered in text-sm font-semibold. Omit to suppress. | |
| ChildContent | RenderFragment? | Body slot for the callout text or any inline content. Rendered in text-sm. | |
| Tone | Tone | Tonal style. Default: Tone.Info. Other values: Success, Warning, Danger, Neutral. Drives background, foreground, and border colours via ToneClasses. | |
| IconSvg | string? | SVG path string for an optional leading icon. Rendered at size-5 shrink-0 mt-0.5. Omit to suppress. | |
| Borders | bool | Toggles border, the tonal border colour, and rounded-lg. Default: true. | |
| Gutters | bool | Toggles p-4 gap-3 on the wrapper. Default: true. |