Callouts
Callout blocks are editorial emphasis elements within article content. They use the existing <blockquote> element with CSS classes (callout-takeaway, callout-warning, callout-info) to differentiate variants. Each variant has a 4px left indicator stripe and variant-specific title color.
Takeaway has no background — just a soft sage stripe and dark sage title for a clean, inviting look. Warning uses a deep terracotta stripe on a neutral background. Info uses a blue stripe on a neutral background.
Token file: tokens/component/callout.json
Callout — Takeaway
Key takeaway: Sound therapy combined with cognitive behavioral therapy shows 73% improvement rates in controlled trials, making it one of the most evidence-backed approaches for tinnitus management.
Callout — Warning
Important: Sudden hearing changes alongside tinnitus should be evaluated by a medical professional within 48 hours. This may indicate an underlying condition requiring immediate attention.
Callout — Info
Note: This study used a sample size of 120 participants across three clinics in Germany. Results may vary in populations with different tinnitus etiologies.
Key tokens
Section titled “Key tokens”| Token | Value | Purpose |
|---|---|---|
--component-callout-indicator-width | 4px | Left accent stripe |
--component-callout-variant-takeaway-indicator | feedback.success → #98D398 | Soft sage stripe |
--component-callout-variant-takeaway-title-color | feedback.success-text-strong → #1A3D1A | Dark sage title |
--component-callout-variant-warning-indicator | deep-terracotta → #D6643E | Warning stripe |
--component-callout-variant-warning-title-color | deep-terracotta → #D6643E | Warning title |
--component-callout-variant-info-indicator | feedback.info → #0284C7 | Info stripe |
--component-callout-variant-info-title-color | feedback.info → #0284C7 | Info title |
WordPress markup
Section titled “WordPress markup”<blockquote class="wp-block-quote callout-takeaway"> <p><strong>Key takeaway:</strong> Sound therapy combined with CBT shows 73% improvement rates.</p></blockquote>CSS selector: .wp-block-quote[class*="callout-"] as the base rule, with .callout-takeaway, .callout-warning, .callout-info for variant overrides.
Accessibility
Section titled “Accessibility”Bold lead text (<strong>Key takeaway:</strong>) labels the callout type non-visually. Color is never the sole differentiator.