CTA Compact
The CTA Compact is a small, self-contained call-to-action designed to live inside the article sidebar. It promotes newsletter subscriptions, downloadable guides, or other conversion actions without disrupting the reading experience. The warm background (#F9DFAE, --semantic-color-surface-warm) provides gentle visual distinction from the surrounding content.
This component uses naluma design system tokens (Plus Jakarta Sans font, burnt sienna palette).
BEM class: .tinnitus-cta-compact
Specifications
Section titled “Specifications”| Property | Value |
|---|---|
| Width | Fills parent (typically 280px sidebar) |
| Layout | flex column |
| Gap | 12px |
| Padding | 20px |
| Border radius | 8px |
| Background | #F9DFAE (--semantic-color-surface-warm) |
Elements
Section titled “Elements”Title (__title)
Section titled “Title (__title)”| Property | Value |
|---|---|
| Font size | 16px |
| Font weight | 600 |
| Color | #3D2E2A (--semantic-color-text-primary) |
| Line height | 1.3 |
Description (__description)
Section titled “Description (__description)”| Property | Value |
|---|---|
| Font size | 14px |
| Font weight | 400 |
| Color | #7A6560 (--semantic-color-text-secondary) |
| Line height | 1.5 |
Button (__button)
Section titled “Button (__button)”| Property | Value |
|---|---|
| Font size | 14px |
| Font weight | 600 |
| Padding | 10px 20px |
| Border radius | 6px |
| Background | #A55838 (--semantic-color-action-primary) |
| Text color | #FFFFFF |
| Hover background | #914D31 (--semantic-color-action-primary-hover) |
| Alignment | flex-start (left-aligned, not stretched) |
Showcase
Section titled “Showcase”Default
Stay informed
Get the latest tinnitus research and coping strategies delivered to your inbox.
SubscribeAlternative content
Free tinnitus guide
Download our comprehensive guide to understanding and managing tinnitus symptoms.
Download PDFIn sidebar context (280px)
Usage Guidelines
Section titled “Usage Guidelines”- One CTA per sidebar. Placing multiple CTAs creates decision fatigue. If both a newsletter and a download are needed, alternate between article pages.
- Keep titles to 3-4 words. The compact width (280px) means long titles wrap awkwardly. “Stay informed” works better than “Subscribe to our weekly newsletter.”
- Description should be one sentence. The CTA is a nudge, not a sales pitch. One clear sentence explaining the value is sufficient.
- Button text should be an action verb. “Subscribe”, “Download”, “Get started” — not “Learn more” or “Click here”.