Stat Cards
Advanced Training Module 3: Featured Content
Stat Cards are designed to highlight numbers, metrics, achievements, and key facts in a visually engaging way. They help visitors quickly understand important information by presenting statistics as prominent design elements rather than burying them within paragraphs of text.
Stat Cards are commonly used to showcase:
- Student enrolment
- Research funding
- Awards and achievements
- Program statistics
- Community impact
- Organizational milestones
When used effectively, Stat Cards can quickly communicate credibility, scale, and success.
When to Use Stat Cards
Use Stat Cards when a number tells an important story.
Examples include:
Academic Programs
100+
Programs and concentrations
Research
$25M
Annual research funding
Students
30,000+
Students enrolled
Community Impact
5,000+
Event attendees each year
Numbers often communicate impact more effectively than long paragraphs of text.
Why Stat Cards Work
Visitors tend to scan webpages rather than read every word.
Large, visually prominent statistics help visitors quickly identify key messages.
For example:
10 Research Centres is often easier to understand at a glance than: Our department is home to ten active research centres.
Stat Cards help emphasize information that supports your goals and reinforces important messages.
Adding a Stat Cards Block
To add a Stat Cards block:
- Click the + button and search for Stat Cards.
- Select the block.
- Enter a statistic for each card.
- Add a short description.
- Configure the display options.
- Save your changes.
Multiple cards can be displayed together in a single row.
Creating Effective Stat Cards
Each card contains two primary elements.
Statistic
The number, percentage, dollar amount, or figure you want visitors to notice. The statistic should be concise and immediately understandable.
Description
A short explanation provides context for the number. Descriptions should be brief and easy to scan.
Choosing Meaningful Statistics
The best statistics are:
- Relevant to your audience
- Easy to understand
- Verifiable and accurate
- Aligned with your goals
Good examples:
- ✅ Programs Offered
- ✅ Students Enrolled
- ✅ Research Funding
- ✅ Awards Received
- ✅ Years of Service
Less effective examples:
- ❌ Statistics without context
- ❌ Numbers that are outdated
- ❌ Metrics that are difficult for visitors to interpret
Layout Options
The Stat Cards block includes several display settings.
Block Heading
Add a title above the collection of statistics.
Number of Columns
Choose how many cards appear in a row.
Common options include:
- 2 columns
- 3 columns
- 4 columns
The appropriate number depends on the amount of content and page width.
Background Colour
Many layouts support:
- White background
- Grey background
Background colours can help separate the section from surrounding content.
Statistic Position
Depending on your configuration, you may be able to display:
- Statistic above the description
- Statistic below the description
In most cases, placing the statistic first helps draw attention to the number.
Common Uses
Stat Cards work particularly well for:
Recruitment Pages
- Employment rates
- Enrollment figures
- Program counts
Research Pages
- Funding totals
- Publications
- Research projects
Department Homepages
- Student numbers
- Faculty numbers
- Years of service
Annual Reports
- Organizational performance
- Key achievements
- Impact metrics
Best Practices
Use Accurate Data
Statistics should be current and factually correct. Review them regularly to ensure they remain relevant.
Focus on Important Numbers
Avoid displaying statistics simply because they exist. Choose numbers that reinforce your key messages.
Keep Descriptions Short
The statistic should be the primary visual focus.
Provide Context
A number without explanation may not be meaningful. Always include a short description.
Limit the Number of Statistics
Three or four strong statistics often have more impact than a large collection of figures.
-
In this video, we are going to explore using Stat Cards for your website’s content.
Stat Cards are a neat way to highlight certain statistics or data on your website. An example set of stat cards is shown in the screen in different customization options you can go for.
Now that we have explained the purpose of a Stat Cards block and how it can improve your website’s content, we will now show you how to add them to your pages.
First, you want to go into editing mode of the page you want to add a block into. Then navigate to the block menu and add the block to your page. Once it’s on your page, you can enter the information you want into each card.
If you want to add another card, select anywhere in the block. A blue plus button should appear on the bottom right of the block, click on that and a new card should appear.
Alternatively, you can also add another card by navigating in between each card, a similar button should appear and once you click on it, a new card will be added.
If you want to customize the block, you can do so by clicking on the card you want to edit, and a menu on the right should appear.
From there you can:
- Add a header
- Add a description
- Choose background colours
- Change your column amount
As well as change card specific appearances such as background colours, card shadows. Or if you want to invert the content orientation so that you can have your statistic on top of the card instead.
And by finishing those steps, we have now successfully added Icon Cards to a page.
Try it Out
- Add a Stat Cards block to a page.
- Create three statistics related to your department, service, or program.
- Add descriptions for each statistic.
- Add a heading for the block.
- Experiment with different column layouts.
- Change the statistic position and compare the results.
- Preview the page and review the visual impact.