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.

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.