CTA-04
Under review Centered framed CTA
A large rounded outline with a threshold marker crossing its top edge, a sans headline at display scale, and one oversized action. The last thing on a long page.
Use it when
A large rounded outline with a threshold marker crossing its top edge, a sans headline at display scale, and one oversized action. The last thing on a long page.
- Category
- Calls to action
- Layout archetype
- Inset panel
- Page position
- closing
- Purpose
- convert
- Field
- light
- Interaction
- static
- Motifs
- Quiet field
Content it requires
- A heading of 8 to 12 words
- A body of 18 to 30 words
- Exactly one action
Do not use it when
- One action. Adding a secondary link makes this CTA-01 with less room.
- Terminal position only. Mid-page it stops the read without offering anywhere to go.
- The marker label must name a real threshold. A marker measuring nothing is ornament that looks like information.
- Shares the inset archetype with TRU-04 and EDU-07. Never two on one page.
Variants
note re-enables a caveat line for pages that legally need one. Off by default.
Implementation
src/components/patterns/CtaDecisionPanel.astro
---
import CtaDecisionPanel from '../components/patterns/CtaDecisionPanel.astro';
---
<CtaDecisionPanel />Import directly. Do not route production through patternComponents.
Production usage
Not yet used on a production page. Nothing here has been proven in front of a customer.
Accessibility
- Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
- No interactive controls beyond links and buttons inherited from the design system.
- Colour never carries meaning alone: every state marker is paired with text.
- Motion respects prefers-reduced-motion.