10k
99%
75+
Statistic Cards (Stat Card)
A statistics card component acts as a versatile and visually appealing feature to present numerical data in a concise and engaging format on your pages. Whether you’re showcasing graduation and academic performance metrics, student demographics data, or any other quantitative information, the statistics card component offers a clear and structured way to convey important data points to your users.
When To Use This Component
This component should be used when you want to prominently display numerical data or facts related to the page information.
USAGE EXAMPLES
- Showcase enrollment and demographics statistics like diversity metrics, international student percentages, and student-to-faculty ratios.
- Present financial aid and scholarship information like financial aid distribution, scholarship availability and average financial aid packages.
Component Dos & Don’ts
There might be a time when you don’t know whether to use a statistics card component or not. Here are some examples of how to effectively use a statistics card component at Charlotte and when you shouldn’t use one:
DO
Use the statistics card component when you want to feature data or facts whose numerical values are the most important part.
DON’T
If the information you want to present isn’t mostly numerical, consider using a component like the icon cards.
Component Design Options
Below you will find an interactive example of the statistics card component and its various design options.
Editable Parts – section
- Title (optional)
- Description (optional)
- Button Text and Link (optional)
Editable Parts – component
- Stat (large text) – up to 6 characters
- Stat Title
- Stat Description (optional)
- Stat Button Text and Link (optional)
Show Block Heading: Show / Hide
Background Color: Gray, Black, White
Button Color: Green / Gold
Header Title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis tenetur vero aut sit ducimus nulla perferendis!