MenuCaderno UI
npmGitHub
Theme

<cad-callout>

Callout

Add a tip, note, or warning to the page. Use Alert for status changes.

A page note

Link to the original article so you can find it again later.Read the guide

Message variants

Info

These notes cover the first chapter.

Success

All source links have been checked.

Warning

The next review has moved to Friday.

Danger

Remove the private contact details before sharing these notes.

API reference: <cad-callout>

headingheadingstring''variantvariantCadCalloutVariant'info'headingstringheadingnovariantCadCalloutVariantvariantyes(default)Callout body.actionOptional supporting link or action.iconOptional visual that replaces the intrinsic variant mark.titleVisible heading. Falls back to the `heading` attribute.actionCallout action container.baseCallout container.contentCallout body.iconCallout icon.stripeMargin marker.titleCallout heading.--cad-callout-bgPer-instance callout paper color.--cad-callout-inkPer-instance callout accent.

Accessibility

Callout is ordinary page content, not a live announcement. Explain the message in text rather than color alone.

MIT licensed. Built with Caderno UI.Report an issue
Back to top