Use callouts to highlight important information, warnings, tips, and notes. They draw attention to content that readers should not miss.
Basic callout
<wc-callout type="info" title="Good to know">
DocsLit generates a search index automatically on every build.
</wc-callout>
DocsLit generates a search index automatically on every build.
Callout types
Use info callouts for supplementary information that adds context.
Use tip callouts for best practices and recommendations.
Use warning callouts for potential issues the reader should be aware of.
Use error callouts for critical issues that can cause failures.
Use success callouts to confirm that something works as expected.
Use note callouts for general remarks and observations.
Attributes
The visual style of the callout. Options: `info`, `tip`, `warning`, `error`, `success`, `note`.
The heading text displayed at the top of the callout. If omitted, the callout shows only the body content.
Without a title
You can omit the title for a simpler presentation:
<wc-callout type="tip">
Write one idea per sentence. Your readers will thank you.
</wc-callout>
Write one idea per sentence. Your readers will thank you.
Markdown inside callouts
Callouts support full Markdown content including bold, italic, lists, links, and code:
<wc-callout type="info" title="Supported Markdown">
You can use:
- **Bold** and *italic* text
- `inline code` and [links](../getting-started/introduction)
- Nested lists and other formatting
</wc-callout>
Banners are dismissible notifications that span the full width of the content area. Use them for announcements or temporary notices.
<wc-banner type="info">
DocsLit v0.2 is now available. See the changelog for details.
</wc-banner>
DocsLit v0.2 is now available. See the changelog for details.
The visual style. Options: `info`, `warning`, `error`, `success`, `neutral`. Defaults to `neutral`.