C50 Top statistic

Displays an important metric in a visually prominent space, which can be wrapped in color to help it stand out, along with related supplemental information.

Component requirements

Top 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.
• Number of columns: Dropdown. 1/2/3/4. Default: 4.
• 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)

Top statistic item

Required:

• Top statistic: Text field
• Support copy: Rich text field.

Content guidance

This component allows copy only on the bottom and numbers on the top.

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. See example.

Bottom support copy and CTA

• An optional opportunity to connect to supporting documents 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. Don't use 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: Displaying a C50 Top Statistic on a denim background, configured with three columns and all content enabled. Stat items are presented in various ways.