Statistic Callout
The Statistic Callout component is designed to highlight key facts, figures, or metrics. It draws user attention to important data points in a clear, visually prominent way, making complex information more digestible.
Core Features
- Displays a statistic or key figure with optional supporting text.
- Icon support available to reinforce meaning or add visual emphasis.
- Background color options allow the callout to stand out within different layouts.
- Designed for emphasis within a page to quickly communicate impact.
Content Guidelines
- Number/Value & Statistic: Keep concise and impactful (e.g., 10K+ Members, 95% Satisfaction).
- Label / Supporting Text (Optional): Provide brief context
- Icon (Optional): Use relevant icons to reinforce the message
- Keep text short; this component should emphasize recognition over detail.
Style System Options
Background Colors (applied at Component level)
- Light Purple
- Blue
- Green
- Yellow
- Orange
- Dark Purple
Orientation
- Right (rounded corners top right/bottom left)
- Left (rounded corners top left/bottom right)
100%
-
$1.5 Million Risus Nec Feugiat In Fermentum test one twoo three
50/50
-
$1.41
Million In K-12
-
$1.48 Million In Community And Economic Development
-
$1.41
Million In K-12
-
$1.48 Million In Community And Economic Development
33/33/33
-
$1.41 Million In K-12
-
$1.35 Million In Higher Education
-
$1.48 Million In Community And Economic Development
-
$1.41 Million In K-12
-
$1.35 Million In Higher Education
-
$1.48 Million In Community And Economic Development