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

 

Content guidance

This component allows copy above and below the number.

Headline

  • Directly and clearly state what the statistics are about
  • Use H2 tag

Top supporting copy

This is optional and can be used to contextualize the connection between the headline and the statistics

Statistics

Best practice is to use numerals for statistics with brief copy explaining the statistic. Example.

Bottom support copy

  • Connect to supporting pages or target actions like making a donation or opening a contact form
  • For the CTA button copy, use sentence case
  • CTAs should be descriptive and clearly state what action users should take. Avoid using general phrases such as “click here” or “read more”
  • CTAs should be kept to 30 characters or fewer

 

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

C52 HERO stat headline (required)

Top support copy. Lorem ipsum dolor. (optional)
Top text (optional)10000Bottom text (optional)
20000
Bottom support copy. Lorem ipsum dolor. (optional)
CTA example (optional)