Callout

Usage

<SCallout type="tip" title="Tip">
  Pass <code>icon="false"</code> to drop the leading icon entirely.
</SCallout>

type picks both the accent color and the default icon - note (the default), tip, warning, and danger, matching the four admonition levels most docs sites converge on. It shares Alert's soft surface and semantic color treatment. Hovering it, or focusing content inside it, reveals a 2px striped border in that color. Unlike Alert, a callout has no variant/closable - it is meant to sit inline in prose and has no dismiss behavior.

In markdown

Every Selaras component is already globally registered under its S-prefixed name (this module's own addComponentsDir call, src/module.ts) - unlike Prose's two enhanced components, nothing else needs wiring for @nuxt/content to resolve a plain ::s-component-name{...} block directly to it. A prop goes in the block's own {...} attrs; a named slot (title here) is a #slot-name line inside the block, @nuxtjs/mdc's own convention (MDCSlot) - and the block's own body becomes the default slot:

::s-callout{type="warning"}
#title
Heads up
This changes how the export command behaves - check the migration notes first.
::

The same pattern works for any already-shipped component, props and named slots included - not just the two proven here. Alert, for one, works identically:

::s-alert{color="info"}
#title
Heads up
#description
This changes how the export command behaves - check the migration notes first.
::

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's Callout's own theme file:

Global and scoped theme recipes use ui.callout.

Props

Slots