Callouts

Highlighted asides for notes, warnings, errors, and tips. data-callout on any block element.

Callouts draw attention to information that sits adjacent to the main flow — without interrupting it. A left-border accent in four semantic colours, applied via data-callout. An optional data-callout-title span labels the type.

Variants

Four variants, each with a distinct accent colour:

Note

Informational. The default. Blue left border. Use for supplementary context the reader should notice but that doesn't demand action.

Tip

A better way. Green left border. Use for optimisations, shortcuts, or best practices.

Warning

Proceed with care. Orange left border. Use when something can go wrong if the reader isn't paying attention.

Error

This will break. Red left border. Use for hard constraints, deprecated patterns, or known failure modes.

<div data-callout="note">
  <span data-callout-title>Note</span>
  <p>Informational content.</p>
</div>

<div data-callout="tip">
  <span data-callout-title>Tip</span>
  <p>A better way.</p>
</div>

<div data-callout="warning">
  <span data-callout-title>Warning</span>
  <p>Proceed with care.</p>
</div>

<div data-callout="error">
  <span data-callout-title>Error</span>
  <p>This will break.</p>
</div>

Value

The data-callout attribute value is semantic — warning means "take care", not "make it orange". The colour is a consequence of the meaning, not the other way around.

Without a title

data-callout-title is optional. Omit it for a quieter aside.

This callout has no title. It reads as a quiet sidebar — still accented, but less emphatic. Good for parenthetical context that doesn't need labelling.

<div data-callout="note">
  <p>No title needed here.</p>
</div>

Inline callout

A callout can wrap a single line — no <p> required.

Shortcut Use Ctrl+Shift+P to open the command palette.

<div data-callout="tip">
  <span data-callout-title>Shortcut</span>
  Use <kbd>Ctrl+Shift+P</kbd> to open the command palette.
</div>

Rich content

Callouts can hold any block content — lists, code, links.

Before deploying

Back up the database
Run migrations in a staging environment first
Confirm rollback plan with the team

<div data-callout="warning">
  <span data-callout-title>Before deploying</span>
  <ul>
    <li>Back up the database</li>
    <li>Run migrations in a staging environment first</li>
    <li>Confirm rollback plan with the team</li>
  </ul>
</div>

Reference

Attribute	Values	Notes
`data-callout`	`note` `tip` `warning` `error`	On any block element. Default (bare) = note style.
`data-callout-title`	—	On a `<span>` inside the callout. Optional.