cta-hero
image
CTA Block

Action buttons in every style.

Primary, secondary, and outline button styles with icons, sizing options, and flexible grouping for any call to action.
inline-text-overlay
16.0
10.0
9.0
16.0
style
u-sp-none, u-section-gap-none, rhea-section-container
cta-usage

When to use

  • Primary actions — the most important action on a page or section. Use cta-primary style.
  • Secondary actions — alternative or less prominent actions. Use cta-secondary or cta-outline.
  • Button pairs — primary + secondary side by side in a CTA Group for choice scenarios.
  • Downloads/external links — use icon buttons with arrow or download icon.

Key decisions

  • Style hierarchy: Only one cta-primary per section. Use cta-secondary or cta-outline for additional actions.
  • Size: cta-size-default for inline, cta-size-large for hero CTAs, cta-size-small for compact spaces.
  • Width: cta-width-full for mobile-first or form-submit buttons, cta-width-auto for inline.
  • Grouping: Use CTA Group for button pairs. Align center for hero CTAs, left for content sections.
style
u-sp-default, rhea-section-container
cta-options

All authoring options

CTA content

ctaLink: destination URL (aem-content)
ctaContent: button label (richtext)
ctaTarget: _blank for external
ctaIcon: DAM reference for icon
ctaIconAlt: icon alt text
ctaA11yContent: screen reader text
ctaDisabled: boolean

Appearance

classes_ctaStyle: cta-primary | cta-secondary | cta-outline | cta-text-link
classes_ctaSize: cta-size-small | cta-size-default | cta-size-large
classes_ctaWidth: cta-width-auto | cta-width-full
classes_ctaIconPosition: cta-icon-left | cta-icon-right

CTA Group

classes_ctaGroupAlign: cta-group-left | cta-group-center | cta-group-right
classes_ctaGroupDirection: cta-group-row | cta-group-column
classes_ctaGroupGap: cta-group-gap-small | cta-group-gap-default | cta-group-gap-large

Analytics

trackClick: boolean
trackClick_meta: text

style
u-sp-default, rhea-section-container