# Callout

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

```html
<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) |

```html
<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>
```