{"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":"2024-10-10T14:03:38","modified_gmt":"2024-10-10T18:03:38","slug":"stat-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-3-featured-content-blocks\/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>Module 3.3 \u2013 Mastery: Featured Content Cards: Stat Cards<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/block-library\/featured-content\/stat-cards\/\">Examples: Stat Cards<\/a><\/div>\n<\/div>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Stat cards allow you to display quick bits of interesting info. This could include stats about your programs, achievements, or research initiatives. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"178\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-09.58.30@2x-1024x178.png\" alt=\"Stat cards\" class=\"wp-image-1546\" style=\"width:639px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-09.58.30@2x-1024x178.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-09.58.30@2x-320x55.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-09.58.30@2x-512x89.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-09.58.30@2x-768x133.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-09.58.30@2x-1536x266.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-09.58.30@2x.png 1742w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-by-Step<\/h2>\n\n\n\n<p><strong class=\"myprefix-text-bold\">1.<\/strong> <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-essential-text-blocks\/module-3-blocks-overview\/#addblock\">Add the Stat cards block using the block menu.<\/a><\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e380cdc1d40&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e380cdc1d40\" class=\"wp-block-image size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"148\" height=\"152\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.00.25@2x.png\" alt=\"Add stat cards\" class=\"wp-image-1547\" style=\"width:91px;height:auto\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">2.<\/strong> Click inside each card to enter a description and a statistic for that element.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"438\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.01.41@2x.png\" alt=\"Stat card editing\" class=\"wp-image-1549\" style=\"width:213px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.01.41@2x.png 564w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.01.41@2x-320x249.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.01.41@2x-512x398.png 512w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">3. <\/strong>In the stat card block options you can add a header, change the block background to gray, choose the number of columns (two, three, or four), and change choose whether to have the statistic above or below the description..<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"644\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/10\/CleanShot-2024-10-10-at-14.01.05@2x.png\" alt=\"\" class=\"wp-image-4416\" style=\"width:248px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/10\/CleanShot-2024-10-10-at-14.01.05@2x.png 548w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/10\/CleanShot-2024-10-10-at-14.01.05@2x-512x602.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/10\/CleanShot-2024-10-10-at-14.01.05@2x-320x376.png 320w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/qhnaQ5MFcCo\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/div>\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>In this video, we are going to explore using Stat Cards for your website\u2019s content.<\/p>\n\n\n\n<p>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>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>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>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>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>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>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>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>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<p>Now that you have learned how to work with the stat cards block, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a stat card block to your page.<\/li>\n\n\n\n<li>Add a description and stat for each element.<\/li>\n\n\n\n<li>Experiment with the options: add a header, change the number of columns, and reverse the content.<\/li>\n\n\n\n<li>Publish and view your page!<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-4-embed-blocks\/\">Next: Module 4 &#8211; Embed Blocks<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Stat cards allow you to display quick bits of interesting info. This could include stats about your programs, achievements, or research initiatives. Step-by-Step 1. Add the Stat cards block using the block menu. 2. Click inside each card to enter a description and a statistic for that element. 3. In the stat card block options [&hellip;]<\/p>\n","protected":false},"author":4,"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":[11],"class_list":["post-1511","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_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\/4"}],"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}]}}