"Use a single primary action; make others secondary/outline."
5. Content Guidance
One clear primary action. A second action should be lower-emphasis (outline/secondary).
Action labels are verb-first ("Talk to us", "Download the guide").
Keep supporting text to 1–2 lines; put fine print in the disclaimer.
Use the on-brand (dark) variant to make a closing CTA stand out from the page.
6. Semantic HTML
<div class="caat-cta">
<h2 class="caat-title caat-title--h2">Ready to offer a better pension?</h2>
<p class="caat-cta__text">Talk to our team…</p>
<div class="caat-cta__actions">
<a class="caat-button caat-button--primary caat-button--lg">Talk to us</a>
<a class="caat-button caat-button--outline-primary caat-button--lg">Download the guide</a>
</div>
<p class="caat-cta__disclaimer">…</p>
</div>
7. CSS Contract
Selector
Purpose
.caat-cta
Centered wrapper
.caat-cta__text
Supporting copy (measure-capped)
.caat-cta__actions
Button row (centered, wraps)
.caat-cta__disclaimer
Fine print with top rule
8. Accessibility
Requirement
Implementation
Heading level
Use the correct <h*> for the page outline (not chosen for size).
Actions
Real Buttons (links or buttons) with visible focus.
Contrast
On-brand variant uses inverse text (AA on navy); disclaimer muted meets AA.
Disclaimer
Marked role="note" when it's a legal note.
9. SEO
Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.
10. Analytics
Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.
11. AEM Implementation Notes
Resource type: caat/components/cta; actions delegate to the Button component.
Often placed as the last component in a page, inside a .caat-section (optionally --brand).
12. Dialog Model (cq:dialog)
Simplified model — shows field intent and Granite UI resource types, not the literal cq:dialog node tree (e.g. select options are authored as child items nodes).