Callout

Overview

Inline highlight block for tips, warnings, or contextual notes within content flow.

<script lang="ts">
  import Callout from '@lostgradient/cinder/callout';
</script>

<Callout />

Live preview

Use when

Drawing attention to tangential information nested inside prose, documentation, or article content.
Calling out a tip, note, or caveat that belongs next to the content it qualifies.

Avoid when

Announcing a transient or urgent status — use alert or banner instead.
Communicating a page-wide system message — use banner so it reads as a landmark region.

Inline aside highlighting a tip next to body content.

All four semantic variant styles for inline callouts.

Props for callout
Name	Type	Default	Required	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`		Visual + semantic variant. Default `'info'`.
`semantic`	`'aside' \| 'note'`	`'aside'`		Root semantics. Default `'aside'`; use `'note'` for static note semantics without a complementary landmark.
`title`	`text`			Optional title rendered as a `<p class="cinder-callout__title">`. Rendered as a paragraph rather than a heading element so the callout does not inject an entry into the document outline. If a callout genuinely participates in the outline (e.g. it titles a standalone section), wrap it in a `<section>` with its own heading rather than promoting this prop to `<h*>`. When supplied and no `aria-label` or `aria-labelledby` is passed on rest props, the title also becomes the `aria-label` of the root element so the landmark or note has an accessible name.
`icon`	`snippet`			Optional decorative icon rendered inside an `aria-hidden` wrapper. The icon is a second visual channel alongside variant color — it helps satisfy WCAG 1.4.1 (Use of Color) by ensuring the variant is conveyed by more than color alone. The accessible meaning still lives in `title` and/or `children`; the icon must not be the only carrier of information.
`children`	`snippet`		req	Callout body content.