{"id":2080,"date":"2024-01-12T14:41:47","date_gmt":"2024-01-12T19:41:47","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2080"},"modified":"2026-08-10T21:18:14","modified_gmt":"2026-08-11T01:18:14","slug":"icon-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced-training\/advanced-training-module-3-featured-content\/icon-cards\/","title":{"rendered":"Icon 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                        Icon 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\">Icon Cards provide a simple and visually engaging way to highlight important information, resources, services, or actions on your website. Similar to Featured Cards, they combine a title, description, and call to action, but use icons instead of images to create a cleaner and more compact design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because they require less visual space than Featured Cards, Icon Cards work particularly well for presenting multiple options or pathways in a consistent, easy-to-scan format.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common uses include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quick links<\/li>\n\n\n\n<li>Service directories<\/li>\n\n\n\n<li>Resource hubs<\/li>\n\n\n\n<li>Contact options<\/li>\n\n\n\n<li>Website support resources<\/li>\n\n\n\n<li>Frequently accessed tools<\/li>\n<\/ul>\n\n\n\n<h2 id=\"when-to-use-icon-cards\" class=\"wp-block-heading\">When to Use Icon Cards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use Icon Cards when visitors need to choose between several options or destinations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<h3 id=\"student-resources\" class=\"wp-block-heading\">Student Resources<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Academic Support<\/li>\n\n\n\n<li>Awards &amp; Scholarships<\/li>\n\n\n\n<li>Career Services<\/li>\n<\/ul>\n\n\n\n<h3 id=\"website-services\" class=\"wp-block-heading\">Website Services<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Training<\/li>\n\n\n\n<li>Documentation<\/li>\n\n\n\n<li>Request Support<\/li>\n<\/ul>\n\n\n\n<h3 id=\"contact-options\" class=\"wp-block-heading\">Contact Options<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Email<\/li>\n\n\n\n<li>Phone<\/li>\n\n\n\n<li>Book a Meeting<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Icon Cards work best when the content is concise and action-oriented.<\/p>\n\n\n\n<h2 id=\"icon-cards-vs-featured-cards\" class=\"wp-block-heading\">Icon Cards vs Featured Cards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Although both blocks highlight content, they have different strengths.<\/p>\n\n\n\n<h3 id=\"featured-cards\" class=\"wp-block-heading\">Featured Cards<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Images<\/li>\n\n\n\n<li>Longer descriptions<\/li>\n\n\n\n<li>Visual storytelling<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Best for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Homepages<\/li>\n\n\n\n<li>Programs<\/li>\n\n\n\n<li>Services<\/li>\n\n\n\n<li>recruitment content<\/li>\n<\/ul>\n\n\n\n<h3 id=\"icon-cards\" class=\"wp-block-heading\">Icon Cards<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Icons<\/li>\n\n\n\n<li>Short descriptions<\/li>\n\n\n\n<li>Compact layouts<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Best for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quick links<\/li>\n\n\n\n<li>Resource directories<\/li>\n\n\n\n<li>Task-based navigation<\/li>\n\n\n\n<li>Support information<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If imagery is not essential, Icon Cards often provide a cleaner and more efficient layout.<\/p>\n\n\n\n<h2 id=\"adding-an-icon-cards-block\" class=\"wp-block-heading\">Adding an Icon Cards Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add an Icon Cards block:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> button and search for <strong>Icon Cards<\/strong>.<\/li>\n\n\n\n<li>Select the block.<\/li>\n\n\n\n<li>Add a title and description to each card.<\/li>\n\n\n\n<li>Select an icon.<\/li>\n\n\n\n<li>Add a button or link destination.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">A row of icon cards will be added to your page.<\/p>\n\n\n\n<h2 id=\"choosing-an-icon\" class=\"wp-block-heading\">Choosing an Icon<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each Icon Card includes an icon that helps communicate purpose visually.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose icons that clearly relate to the content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Content<\/th><th>Example Icon<\/th><\/tr><\/thead><tbody><tr><td>Contact Information<\/td><td>Phone or Email<\/td><\/tr><tr><td>Documentation<\/td><td>File or Book<\/td><\/tr><tr><td>Training<\/td><td>Graduation Cap<\/td><\/tr><tr><td>Support<\/td><td>Headset<\/td><\/tr><tr><td>Events<\/td><td>Calendar<\/td><\/tr><tr><td>News<\/td><td>Newspaper<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Icons should support the content, not replace clear text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Important:<\/strong> Never rely on icons alone. Visitors should still be able to understand the purpose of the card from its title and description.<\/p>\n\n\n\n<h2 id=\"creating-effective-icon-cards\" class=\"wp-block-heading\">Creating Effective Icon Cards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each card should contain three key elements.<\/p>\n\n\n\n<h3 id=\"title\" class=\"wp-block-heading\">Title<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use a concise, descriptive title.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Request Support<\/li>\n\n\n\n<li>Documentation<\/li>\n\n\n\n<li>Upcoming Events<\/li>\n\n\n\n<li>Contact Us<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Try to keep titles short and easy to scan.<\/p>\n\n\n\n<h3 id=\"description\" class=\"wp-block-heading\">Description<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A brief description provides additional context.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Example:<\/strong> Browse guides, tutorials, and training resources for managing your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descriptions should explain why the destination is useful.<\/p>\n\n\n\n<h3 id=\"call-to-action\" class=\"wp-block-heading\">Call to Action<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each card should guide visitors toward a destination.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Learn More<\/li>\n\n\n\n<li>View Resources<\/li>\n\n\n\n<li>Request Help<\/li>\n\n\n\n<li>Browse Events<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Keep button labels clear and action-oriented.<\/p>\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 Icon Cards block includes several display options.<\/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 heading above the group of cards.<\/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\">Control how many cards appear in each row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typical 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\">Choose a layout that balances readability and visual appearance.<\/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 configurations include:<\/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\">These options can help separate sections of a page visually.<\/p>\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\">Choose Meaningful Icons<\/strong><br>Icons should reinforce the content and be immediately recognizable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Keep Content Short<\/strong><br>Icon Cards are designed for quick scanning.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use Consistent Language<\/strong><br>Titles and descriptions should follow a similar writing style.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Focus on Actions<\/strong><br>Most Icon Cards should help visitors complete a task or find information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Limit the Number of Cards<\/strong><br>Too many options can overwhelm visitors and reduce effectiveness.<\/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 - Icon Cards\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/zbHO1eNQf-c?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-icon-cards\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Icon 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-icon-cards\">\n            \n\n<p class=\"wp-block-paragraph\">In this video, we are going to explore using Icon Cards for your website\u2019s content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Icon Cards are very similar in functionality and appearance to Featured Cards. The difference being instead of a featured image, you use icons instead.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An example set of icon 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 Icon 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once its 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 insert more information in each card, lets say a button, or change the icon in a card, you can do so by clicking on the card you want to edit \u2013 a menu on the right should appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From there you can change your card\u2019s icon or add a button link.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to add another card, select anywhere in the block and click \u201cselect icon cards.\u201d 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\">If you want to customize the block as a whole, select the whole block using the same method you just did to add another card.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A menu on the right should appear, and 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, icon background, or icon shadows.<\/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 an Icon Cards block to a page.<\/li>\n\n\n\n<li>Replace the default icons.<\/li>\n\n\n\n<li>Add titles and descriptions.<\/li>\n\n\n\n<li>Add links or buttons to each card.<\/li>\n\n\n\n<li>Experiment with different column layouts.<\/li>\n\n\n\n<li>Preview the page and evaluate how easy it is to scan and navigate.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Use Icon Cards to create visually engaging quick links, resource hubs, and service directories that are easy to scan and navigate.<\/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-2080","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\/2080","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=2080"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2080\/revisions"}],"predecessor-version":[{"id":4425,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2080\/revisions\/4425"}],"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=2080"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}