Callout
The Callout is a self-contained content block that draws soft attention without interrupting the reading flow. It uses the warm-wheat surface (semantic.color.surface.warm) to distinguish itself from the primary page background while staying within the Naluma earth palette. A Callout can carry a title, a short description, and an optional action button — or omit the button entirely for pure informational use.
Token source: tokens/component/callout.json
Showcase
Section titled “Showcase”Default — with button
Stay informed
Get the latest tinnitus research and coping strategies delivered to your inbox — no noise, just signal.
SubscribeInfo-only — no button
Did you know?
Around 15% of adults experience persistent tinnitus, yet the condition remains widely misunderstood. Sound therapy is one of the most evidence-backed approaches for long-term relief.
In sidebar context (280px)
Specifications
Section titled “Specifications”| Property | Token | Resolved value |
|---|---|---|
| Background | semantic.color.surface.warm | #F9DFAE (pale-wheat) |
| Border radius | primitive.radius.md | 8px |
| Padding | primitive.spacing.20 | 20px |
Title Typography
Section titled “Title Typography”| Property | Token | Resolved value |
|---|---|---|
| Font size | primitive.font-size.16 | 16px |
| Font weight | primitive.font-weight.semibold | 600 |
| Color | semantic.color.text.primary | #3D2E2A (warm-dark) |
Description Typography
Section titled “Description Typography”| Property | Token | Resolved value |
|---|---|---|
| Font size | primitive.font-size.14 | 14px |
| Color | semantic.color.text.primary | #3D2E2A (warm-dark) |
Button (slot)
Section titled “Button (slot)”The Callout button slot reuses the existing semantic action tokens rather than duplicating Button component tokens here. Background is semantic.color.action.primary (#A55838), hover is semantic.color.action.primary-hover (#914D31), label color is primitive.color.white.
Usage Guidelines
Section titled “Usage Guidelines”Sidebar CTA. The most common Callout placement is a WordPress sidebar — a 280px column where the warm surface naturally anchors an email subscription prompt or download offer. Keep the description to two sentences maximum at this width.
Onboarding prompts. In the app, Callouts work well inside onboarding flows to surface a single next action (e.g., “Set your first session goal”) without the visual weight of a full Card. Use the button-less variant when the action is implicit from context.
Empty states. An info-only Callout (title + description, no button) is suitable for empty-state panels — for example, when a user has no session history yet. The warm surface softens what would otherwise be a blank area without adding interactive noise.
One call-to-action per Callout. Never nest two buttons. If a scenario requires two actions, use a Card component with explicit primary/secondary button grouping instead.
WordPress
Section titled “WordPress”The CtaCompact WordPress pattern uses these exact tokens. Prior to this component being formalized, the CSS was duplicated across the CtaCompactShowcase.astro and related WP showcase files. Those files should now reference var(--component-callout-*) properties rather than re-declaring equivalent styles against semantic tokens directly.