Layout & Component Blocks
Statistics
Overview
The Statistics component is a visual element designed to quickly convey impact, results, or key facts in an engaging format. It combines a decorative background with a set of cards that highlight important metrics or achievements, making data more appealing and easy to digest.
When to Use
- Highlighting institutional achievements (e.g., rankings, awards, milestones).
- Presenting program outcomes like graduation rates or job placement stats.
- Sharing fast facts to build credibility on high-traffic pages.
- Reinforcing data-driven storytelling in reports or landing pages.
How To
Create the Statistic Component
- Select the Statistic component from the component list.
Add a Component Header
- To add a component header, click Add a Component Header button.
Add Statistic Item
This component requires three with a maximum of four statistics. The statistic component takes an icon, big text (number stat), and small text (supporting info).
- Select/upload the icon by clicking the Add Media button
- Add the number or the featured text in the Big Text field
- Add supporting text in the Small Text field
To Add Additional Statistic Items
- click Add Statistic button.
Save Component
- Once all statistics items are added, click Save button.
User Experience Best Practices
- Use numbers for impact: Statistics should feature clear, prominent numbers as the focal point. This is why we recommend to avoid vague phrases and to use numbers make the data feel concrete and credible.
- Use icons consistently: If you use icons, apply them uniformly across all cards. Icons should be visually aligned, stylistically consistent, and relevant to the stat they represent.
- Keep supporting text short and clear: The sentence under each stat should provide context without overwhelming the design. Aim for one concise line that explains the significance.