{"id":1511,"date":"2023-11-08T15:44:08","date_gmt":"2023-11-08T20:44:08","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1511"},"modified":"2026-08-10T21:20:18","modified_gmt":"2026-08-11T01:20:18","slug":"stat-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced-training\/advanced-training-module-3-featured-content\/stat-cards\/","title":{"rendered":"Stat Cards"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Stat Cards\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Advanced Training Module 3: Featured Content<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Stat Cards are commonly used to showcase:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Student enrolment<\/li>\n\n\n\n<li>Research funding<\/li>\n\n\n\n<li>Awards and achievements<\/li>\n\n\n\n<li>Program statistics<\/li>\n\n\n\n<li>Community impact<\/li>\n\n\n\n<li>Organizational milestones<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When used effectively, Stat Cards can quickly communicate credibility, scale, and success.<\/p>\n\n\n\n<h2 id=\"when-to-use-stat-cards\" class=\"wp-block-heading\">When to Use Stat Cards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use Stat Cards when a number tells an important story.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<h3 id=\"academic-programs\" class=\"wp-block-heading\">Academic Programs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>100+<\/strong><br>Programs and concentrations<\/p>\n\n\n\n<h3 id=\"research\" class=\"wp-block-heading\">Research<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>$25M<\/strong><br>Annual research funding<\/p>\n\n\n\n<h3 id=\"students\" class=\"wp-block-heading\">Students<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>30,000+<\/strong><br>Students enrolled<\/p>\n\n\n\n<h3 id=\"community-impact\" class=\"wp-block-heading\">Community Impact<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5,000+<\/strong><br>Event attendees each year<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Numbers often communicate impact more effectively than long paragraphs of text.<\/p>\n\n\n\n<h2 id=\"why-stat-cards-work\" class=\"wp-block-heading\">Why Stat Cards Work<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Visitors tend to scan webpages rather than read every word.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Large, visually prominent statistics help visitors quickly identify key messages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>10 Research Centres<\/code> is often easier to understand at a glance than: <code>Our department is home to ten active research centres.<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Stat Cards help emphasize information that supports your goals and reinforces important messages.<\/p>\n\n\n\n<h2 id=\"adding-a-stat-cards-block\" class=\"wp-block-heading\">Adding a Stat Cards Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add a Stat Cards block:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> button and search for <strong>Stat Cards<\/strong>.<\/li>\n\n\n\n<li>Select the block.<\/li>\n\n\n\n<li>Enter a statistic for each card.<\/li>\n\n\n\n<li>Add a short description.<\/li>\n\n\n\n<li>Configure the display options.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Multiple cards can be displayed together in a single row.<\/p>\n\n\n\n<h2 id=\"creating-effective-stat-cards\" class=\"wp-block-heading\">Creating Effective Stat Cards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each card contains two primary elements.<\/p>\n\n\n\n<h3 id=\"statistic\" class=\"wp-block-heading\">Statistic<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The number, percentage, dollar amount, or figure you want visitors to notice. The statistic should be concise and immediately understandable.<\/p>\n\n\n\n<h3 id=\"description\" class=\"wp-block-heading\">Description<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A short explanation provides context for the number. Descriptions should be brief and easy to scan.<\/p>\n\n\n\n<h2 id=\"choosing-meaningful-statistics\" class=\"wp-block-heading\">Choosing Meaningful Statistics<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The best statistics are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Relevant to your audience<\/li>\n\n\n\n<li>Easy to understand<\/li>\n\n\n\n<li>Verifiable and accurate<\/li>\n\n\n\n<li>Aligned with your goals<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Good examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Programs Offered<\/li>\n\n\n\n<li>\u2705 Students Enrolled<\/li>\n\n\n\n<li>\u2705 Research Funding<\/li>\n\n\n\n<li>\u2705 Awards Received<\/li>\n\n\n\n<li>\u2705 Years of Service<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Less effective examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u274c Statistics without context<\/li>\n\n\n\n<li>\u274c Numbers that are outdated<\/li>\n\n\n\n<li>\u274c Metrics that are difficult for visitors to interpret<\/li>\n<\/ul>\n\n\n\n<h2 id=\"layout-options\" class=\"wp-block-heading\">Layout Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Stat Cards block includes several display settings.<\/p>\n\n\n\n<h3 id=\"block-heading\" class=\"wp-block-heading\">Block Heading<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add a title above the collection of statistics.<\/p>\n\n\n\n<h3 id=\"number-of-columns\" class=\"wp-block-heading\">Number of Columns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how many cards appear in a row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>2 columns<\/li>\n\n\n\n<li>3 columns<\/li>\n\n\n\n<li>4 columns<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The appropriate number depends on the amount of content and page width.<\/p>\n\n\n\n<h3 id=\"background-colour\" class=\"wp-block-heading\">Background Colour<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Many layouts support:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>White background<\/li>\n\n\n\n<li>Grey background<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Background colours can help separate the section from surrounding content.<\/p>\n\n\n\n<h3 id=\"statistic-position\" class=\"wp-block-heading\">Statistic Position<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on your configuration, you may be able to display:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Statistic above the description<\/li>\n\n\n\n<li>Statistic below the description<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In most cases, placing the statistic first helps draw attention to the number.<\/p>\n\n\n\n<h2 id=\"common-uses\" class=\"wp-block-heading\">Common Uses<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Stat Cards work particularly well for:<\/p>\n\n\n\n<h3 id=\"recruitment-pages\" class=\"wp-block-heading\">Recruitment Pages<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Employment rates<\/li>\n\n\n\n<li>Enrollment figures<\/li>\n\n\n\n<li>Program counts<\/li>\n<\/ul>\n\n\n\n<h3 id=\"research-pages\" class=\"wp-block-heading\">Research Pages<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Funding totals<\/li>\n\n\n\n<li>Publications<\/li>\n\n\n\n<li>Research projects<\/li>\n<\/ul>\n\n\n\n<h3 id=\"department-homepages\" class=\"wp-block-heading\">Department Homepages<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Student numbers<\/li>\n\n\n\n<li>Faculty numbers<\/li>\n\n\n\n<li>Years of service<\/li>\n<\/ul>\n\n\n\n<h3 id=\"annual-reports\" class=\"wp-block-heading\">Annual Reports<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Organizational performance<\/li>\n\n\n\n<li>Key achievements<\/li>\n\n\n\n<li>Impact metrics<\/li>\n<\/ul>\n\n\n\n<h2 id=\"best-practices\" class=\"wp-block-heading\">Best Practices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use Accurate Data<\/strong><br>Statistics should be current and factually correct. Review them regularly to ensure they remain relevant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Focus on Important Numbers<\/strong><br>Avoid displaying statistics simply because they exist. Choose numbers that reinforce your key messages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Keep Descriptions Short<\/strong><br>The statistic should be the primary visual focus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Provide Context<\/strong><br>A number without explanation may not be meaningful. Always include a short description.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Limit the Number of Statistics<\/strong><br>Three or four strong statistics often have more impact than a large collection of figures.<\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio w-screen ml-offset-center cu-max-w-child-7xl px-4 md:px-6 lg:px-12\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"cutheme Mastery Training - Stat Cards\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/qhnaQ5MFcCo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-stat-cards\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Stat Cards\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-stat-cards\">\n            \n\n<p class=\"wp-block-paragraph\">In this video, we are going to explore using Stat Cards for your website\u2019s content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we have explained the purpose of a Stat Cards block and how it can improve your website\u2019s content, we will now show you how to add them to your pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019s on your page, you can enter the information you want into each card.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From there you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a header<\/li>\n\n\n\n<li>Add a description<\/li>\n\n\n\n<li>Choose background colours<\/li>\n\n\n\n<li>Change your column amount<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And by finishing those steps, we have now successfully added Icon Cards to a page.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a Stat Cards block to a page.<\/li>\n\n\n\n<li>Create three statistics related to your department, service, or program.<\/li>\n\n\n\n<li>Add descriptions for each statistic.<\/li>\n\n\n\n<li>Add a heading for the block.<\/li>\n\n\n\n<li>Experiment with different column layouts.<\/li>\n\n\n\n<li>Change the statistic position and compare the results.<\/li>\n\n\n\n<li>Preview the page and review the visual impact.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Highlight important statistics, achievements, and key metrics using visually engaging Stat Cards.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":2059,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[69],"class_list":["post-1511","page","type-page","status-publish","hentry","cu_page_type-advanced-training-module-3"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":4,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1511\/revisions"}],"predecessor-version":[{"id":4418,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1511\/revisions\/4418"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2059"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=1511"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}