Callout

A left-bordered notice block for tips, warnings, and status messages. This is callout.css in @layer components.

<div class="callout is-warning">
  <div class="callout-title">Heads up</div>
  <div class="callout-body">This action can't be undone.</div>
</div>

Parts

Class	Role
.callout	The block: a 3px left border, a soft tinted background, matching ink text, and rounded on the right
.callout-title	Semibold title line
.callout-body	Body text (inherits the callout's color)

Intents

A bare .callout uses the info treatment by default. The intent modifiers switch the border, tint, and ink together, each drawing from a status (or accent) triple:

Class	Color
is-info	Info (also the default)
is-success	Success
is-warning	Warning
is-danger	Danger
is-accent	Accent (your brand color)

<div class="callout is-success">
  <div class="callout-title">Saved</div>
  <div class="callout-body">Your changes are live.</div>
</div>

<div class="callout is-accent">
  <div class="callout-body">Upgrade to unlock team features.</div>
</div>