{"id":2008,"date":"2024-01-11T15:15:52","date_gmt":"2024-01-11T20:15:52","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2008"},"modified":"2026-08-10T21:17:52","modified_gmt":"2026-08-11T01:17:52","slug":"featured-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced-training\/advanced-training-module-3-featured-content\/featured-cards\/","title":{"rendered":"Featured 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                        Featured 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\">Featured Cards are designed to draw attention to important content, services, resources, and destinations on your website. They combine images, text, and calls to action into visually prominent panels that encourage visitors to explore further.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike Card Blocks, which automatically display categorized content, Featured Cards are created manually. This gives you complete control over the message, imagery, and destination for each card.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Featured Cards are commonly used on:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Homepages<\/li>\n\n\n\n<li>Landing pages<\/li>\n\n\n\n<li>Program pages<\/li>\n\n\n\n<li>Service pages<\/li>\n\n\n\n<li>Recruitment pages<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">They help answer the question: &#8220;What do I want visitors to do next?&#8221;<\/p>\n\n\n\n<h2 id=\"when-to-use-featured-cards\" class=\"wp-block-heading\">When to Use Featured Cards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use Featured Cards when you want to highlight a small number of important actions or destinations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<h3 id=\"key-services\" class=\"wp-block-heading\">Key Services<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Request Support<\/li>\n\n\n\n<li>Book an Appointment<\/li>\n\n\n\n<li>Contact Our Team<\/li>\n<\/ul>\n\n\n\n<h3 id=\"programs-and-resources\" class=\"wp-block-heading\">Programs and Resources<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Undergraduate Programs<\/li>\n\n\n\n<li>Graduate Programs<\/li>\n\n\n\n<li>Scholarships and Awards<\/li>\n<\/ul>\n\n\n\n<h3 id=\"popular-destinations\" class=\"wp-block-heading\">Popular Destinations<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>News &amp; Events<\/li>\n\n\n\n<li>Faculty Directory<\/li>\n\n\n\n<li>Research Opportunities<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Featured Cards work best when you want visitors to quickly identify the next step they should take.<\/p>\n\n\n\n<h2 id=\"featured-cards-vs-card-blocks\" class=\"wp-block-heading\">Featured Cards vs Card Blocks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Although they may look similar, these blocks serve different purposes.<\/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\">Created manually.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You choose:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The title<\/li>\n\n\n\n<li>The description<\/li>\n\n\n\n<li>The image<\/li>\n\n\n\n<li>The button<\/li>\n\n\n\n<li>The destination<\/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>Service directories<\/li>\n\n\n\n<li>Calls to action<\/li>\n<\/ul>\n\n\n\n<h3 id=\"card-blocks\" class=\"wp-block-heading\">Card Blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Generated automatically from content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Best for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>News<\/li>\n\n\n\n<li>Events<\/li>\n\n\n\n<li>People<\/li>\n\n\n\n<li>Videos<\/li>\n\n\n\n<li>Files<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you need complete control over the content, use Featured Cards.<\/p>\n\n\n\n<h2 id=\"adding-a-featured-cards-block\" class=\"wp-block-heading\">Adding a Featured Cards Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add a Featured Cards block:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> button and search for <strong>Featured 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>Add an image if desired.<\/li>\n\n\n\n<li>Configure the destination link.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">By default, the block typically creates a row of cards that can be customized further.<\/p>\n\n\n\n<h2 id=\"building-an-effective-featured-card\" class=\"wp-block-heading\">Building an Effective Featured Card<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every Featured Card contains 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\">The title should clearly communicate the content or action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Good examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apply Now<\/li>\n\n\n\n<li>Explore Programs<\/li>\n\n\n\n<li>Student Resources<\/li>\n\n\n\n<li>Research Opportunities<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Keep titles concise 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> Learn about admission requirements, deadlines, and application procedures.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descriptions should help visitors understand why they should click.<\/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 link to a specific destination.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Learn More<\/li>\n\n\n\n<li>View Programs<\/li>\n\n\n\n<li>Contact Us<\/li>\n\n\n\n<li>Explore Resources<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The destination should match the visitor&#8217;s expectations.<\/p>\n\n\n\n<h3 id=\"image-optional\" class=\"wp-block-heading\">Image (Optional)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Images can make Featured Cards more visually engaging.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose images that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Support the content<\/li>\n\n\n\n<li>Are high quality<\/li>\n\n\n\n<li>Reinforce your message<\/li>\n\n\n\n<li>Remain effective on mobile devices<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Images should enhance the card, not distract from the content.<\/p>\n\n\n\n<h2 id=\"block-layout-options\" class=\"wp-block-heading\">Block Layout Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Featured Cards block includes several layout 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 an overall heading above the card collection.<\/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 the number of cards displayed per 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 ideal number depends on the amount of content and available page space.<\/p>\n\n\n\n<h3 id=\"background-colours\" class=\"wp-block-heading\">Background Colours<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Block background<\/li>\n\n\n\n<li>Card background<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These options can help separate sections visually and improve readability.<\/p>\n\n\n\n<h3 id=\"card-shadows\" class=\"wp-block-heading\">Card Shadows<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Optional card shadows can increase visual separation between cards and the page background.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use shadows consistently throughout your site.<\/p>\n\n\n\n<h2 id=\"common-homepage-example\" class=\"wp-block-heading\">Common Homepage Example<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Many homepages use Featured Cards to direct visitors toward important areas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<h3 id=\"explore-our-programs\" class=\"wp-block-heading\">Explore Our Programs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Undergraduate Programs<\/strong><br>Learn about degree options and admission requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Graduate Programs<\/strong><br>Explore research opportunities and advanced study.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Student Resources<\/strong><br>Access services and support resources.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This type of layout quickly helps visitors self-identify and navigate to relevant content.<\/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\">Focus on Visitor Needs<\/strong><br>Featured Cards should help visitors accomplish tasks, not simply promote everything.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use Strong Titles<\/strong><br>Visitors often scan card titles before reading descriptions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Limit the Number of Cards<\/strong><br>Three to four cards are often easier to understand than large collections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Include Clear Calls to Action<\/strong><br>Every card should lead somewhere meaningful.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use Consistent Images<\/strong><br>Consistent imagery creates a more professional appearance.<\/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 - Featured Cards\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/e6SU3EtbtCY?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-featured-content\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Featured Content\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-featured-content\">\n            \n\n<p class=\"wp-block-paragraph\">In this video, we are going to explore using Featured Cards for your website\u2019s content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Featured Cards acts as a highlight and maks content pop on your page, giving users quick access to pages you want them to notice more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An example set of featured cards is shown in the screen in different customization options you can go for.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And as you can see, they draw attention to the user by compartmentalizing information regarding that page into a card, giving it a title, a description of the page, a button to access the page and a featured image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we have explained the purpose of a Featured 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 to.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 an image or a button, you can do so by clicking on the card you want to edit, a menu on the right should appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From there you can add a featured image, 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 featured 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 or card shadows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And by finishing those steps, we have now successfully added Featured 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 Featured Cards block to a page.<\/li>\n\n\n\n<li>Create three cards.<\/li>\n\n\n\n<li>Add titles, descriptions, and links.<\/li>\n\n\n\n<li>Add images to each card.<\/li>\n\n\n\n<li>Adjust the number of columns.<\/li>\n\n\n\n<li>Experiment with background colours and shadow settings.<\/li>\n\n\n\n<li>Preview the page and review the visitor experience.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Highlight important services, programs, and resources using visually engaging Featured Cards with images, text, and calls to action.<\/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-2008","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\/2008","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=2008"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2008\/revisions"}],"predecessor-version":[{"id":4271,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2008\/revisions\/4271"}],"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=2008"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}