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.

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.