C52 HERO statistic

C52 HERO statistic component highlights one or more metrics in a large, visually prominent space with related descriptions, designed to capture maximum attention.

Component requirements

HERO statistic wrapper

Required:

• Headline: Text field.
• Headline tag: Dropdown. H2/H3/H4/P/C03-Headline. Default: P.
• Number of columns: Dropdown. 1/2/3/4. Default. 4.
• Number of columns mobile: Dropdown. 1/2. Default. 1.
• Content alignment: Dropdown. Left/Center. Default: Center.
• CTA alignment: Dropdown. Left/Center. Default: Center.
• Background color: Dropdown. White/White smoke/Teal/Denim. Default: white.
• Show column dividers: Checkbox. Default: Unchecked.

Optional:

• Support copy: Rich text field.

• Support bottom copy: Rich text field.

• CTA: Text field along with associated link type (internal/external/anchor/email/phone)

HERO statistic item

Required:

• Statistic number: Text field

Optional:

• Top text: Text field
• Prefix: Text field
• Suffix: Text field
• Superscript suffix: Text field
• Bottom text: Text field

ADA requirements

• CTA should have descriptive, helpful link text instead of generic phrases like "Read More" or "Learn More"
• Text should be readable by screen readers and structured semantically.

Component examples

Example: Shown is a C52 example on a white smoke background, with all content and CTA enabled. Headline is set as H3. Stat divider is checked. Second stat does not include any additional props