Callout

Draw attention to a note, tip, warning, or danger.

Highlight something the reader shouldn’t miss. Four intents, each with its own icon and color. The body stays on the page’s normal text color so it’s always legible.

Note

This is a note, neutral informational context.

Tip

This is a tip, a helpful shortcut or best practice.

Warning

This is a warning, so proceed carefully.

Danger

This is a danger callout: something here can break or lose data.

Usage

Import it and pick a variant. The default is note; pass title to override the heading. Leave blank lines around the content so mdsvex parses the markdown inside (bold, links, code). Without them it renders as literal text.

			<script>
	import { Callout } from 'svelte-docsmith';
</script>

<Callout variant="tip" title="One more thing">

You can override the heading with the `title` prop, and use **markdown**
inside, including `code` and [links](/docs/theming).

</Callout>

API reference

variant 'note''tip''warning''danger' default 'note'

Visual intent.

title string default the variant

Heading above the body.