Callouts
A themed box that draws attention to a piece of information. Add .callout to a block element — ideally an <aside>, with role="alert" if it needs to be announced.
A callout is its own surface: a nested .text-muted, <figcaption> or .font-size-small re-tints against the callout fill rather than the page, and it flips in dark mode.
Example
- .callout-heading — an uppercase eyebrow heading (any <h*> level; sized independently).
- Any <a> inside a .callout is tinted to match it automatically — no class needed.
Colours
Add one modifier: .primary, .secondary, .success, .warning, .error, or .soft (a plain neutral callout lifted one step off the canvas). Each retints the fill, border, heading and any link together, and flips with the theme.
Icons
Add .has-icon for a leading icon, drawn as a mask (see Icons). The default glyph is an info i; .warning, .error and .success each bring their own, and .icon-help swaps in a question mark. Override any of them per instance — or in a scoped rule — with --jf-icon: url("…").
- First child is a .callout-heading — the icon sits beside that heading and the body text flows full-width beneath it.
- Anything else first — the whole callout is indented past the icon.
Text tiers
Because the callout is its own surface, .text-muted and .text-subtle re-mix toward the callout fill, not the page — so secondary and hint text stay legible on any variant.
Overriding
- One callout / a scoped rule — set the --jf-callout-* custom properties (tabled below) on .callout itself, on your own modifier class, or on any ancestor.
- A new colour everywhere — add a family to the $colors map; .callout.{family} is generated for it.
- Shape — the Sass variables below, before import.
Variables
Sass variables
| Name | Default | Notes |
|---|---|---|
| $generate-callouts | true | Emit the .callout CSS at all. |
| $callout-padding | token(space-md) | Inner padding. The .has-icon indent is computed from it. |
| $callout-border-radius | token(radius-none) (0) | Corner radius. |
| $callout-border-width | 1px 1px 1px get-size(0.5) | Border width, as a four-value shorthand — the thick inline-start edge is the default look. Set all four to 1px for an evenly-bordered box. |
| $callout-border-style | solid | Border style. |
Custom properties
| Name | Default | Notes |
|---|---|---|
| --jf-callout-bg-color | var(--jf-color-surface) | Fill. The callout is its own surface, so set this with --jf-callout-color as a pair. |
| --jf-callout-color | var(--jf-color-text) | Body text colour. |
| --jf-callout-border-color | neutral / muted | Border colour. |
| --jf-callout-heading-color | neutral / strong | .callout-heading colour — and the .has-icon glyph, which is painted from it. |
| --jf-callout-link-color | neutral / emphasis | Colour of any <a> inside the callout. No class needed. |
| --jf-callout-link-color-hover | neutral / strong | Link colour on hover / focus. |
| --jf-icon | an info glyph | The .has-icon mask. .warning / .error / .success / .icon-help each set their own; override per instance with --jf-icon: url("…"). |