Callout
Callouts highlight notes, tips, warnings, and more. Import the component in a
page’s <script> block, then use it anywhere in your Markdown.
Variants
This is the default info callout.
A handy tip to make your life easier.
Everything worked, success!
Careful, this is a warning.
Something went wrong, this is an error.
Usage
Leave a blank line between the tags and the content so the inner text is parsed as Markdown (an mdsvex requirement):
<script> import { Callout } from '$lib';</script><Callout type="warn">Careful, this is a **warning** with a [link](/).</Callout>Types
| Type | Use for |
|---|---|
info (default) |
General notes and asides |
tip |
Helpful suggestions |
success |
Confirmations and positive notes |
warn / warning |
Things to be careful about |
error |
Errors and destructive warnings |
Custom title
Pass a title to override the default heading:
Pro tip
You can set any heading you like.
<Callout type="tip" title="Pro tip">You can set any heading you like.</Callout>