C51 Side statistic

Shows an important metric positioned to the side of content in a visually pronounced layout (on mobile, it appears above the text), with related information and optional CTA.

 

Component requirements

Side statistic wrapper

Required:

• Headline: Text field.
• Headline tag: Dropdown. H2/H3/H4/P/C03-Headline. Default: P.
• Content alignment: Dropdown. Left/Center. Default: Center.
• CTA alignment: Dropdown. Left/Center. Default: Center.
• Background color: Dropdown. White/White smoke/Teal/Denim. Default: white. 

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)

Side statistic item

Required:

• Statistic: Text field.

• Support copy: Rich text field.

Optional:

• Stat prefix: Text field. Appears before the stat.
• Stat suffix: Text field. Appears after the stat.

 

Content guidance

This component allows copy on the left and numbers on the right. Example.

Headline

• The headline should directly and clearly state what the statistics are about.
• Use H2 tag.

Top support copy

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

Stats

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

Bottom support copy

• An optional opportunity to 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 C51 example on a denim background, with all content and CTA enabled.