Statistic Card

A paragraph component for highlighting statistical data with or without animation.

Summary

Statistic Cards provide a count figure and can be plain or animated.

Example Statistic Card

Statistic Card

How To

  • 1

    Insert a New Statistic Card

    • Add a new Band with the desired number of columns to your Landing Page or Site Page.
    • Choose the column where the Statistic Card will be placed and select the Choose Component icon.
    • In the Choose Component dialogue box, select Statistic Card.

    Note: To edit an existing Statistic Card, skip this step and select the Edit button for the Statistic Card indicated by the pencil icon. 

  • 2

    Edit Statistic Card Information

    Provide Information for a New Statistic Card: 

     Fields marked with an asterisk (*) are required.

    1. Top Title — Adds a title above the Statistic Card.
    2. Statistic Value (*) — Enter a value. The figure must be an integer or decimal value if Animation Counter is selected. To use animation, the Statistic Value field must be an integer or decimal without commas.
    3. Statistic Prefix — For example, $ (dollar sign).
    4. Statistic Suffix — For example, K (as in 100K to denote 100 thousand).
    5. Title (*) — The Title appears below the figure. (In this example, "Amount Raised").
    6. Description — The Description appears below the Title. (In this example, "In Fiscal Year 2021-2022").

    Top Title field.

    Statistic Card fields.

  • 3

    Statistic Card - No Animation

    To have a plain Statistic Card with no animation:

    • Under Animation, choose None (the default position).

    No animation.

  • 4

    Statistic Card - With Animation

    To animate the Statistic Card:

    •  Under Animation, choose Counter.
    • Counter Duration — Enter the number of seconds for the animation figure. To use animation, the Statistic Value field must be an integer or decimal without commas.

    Animation Counter and Duration.

     

  • 5

    Additional Text

    •  Text — Text entered here appears below the text entered in the Description field.

    Text field.