{"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":"2024-09-18T20:31:25","modified_gmt":"2024-09-19T00:31:25","slug":"featured-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-3-featured-content-blocks\/featured-cards\/","title":{"rendered":"Featured Cards"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Featured Cards\n <\/h1>\n \n \n \n\n\n

Module 3.1 \u2013 Mastery: Featured Content Blocks: Featured Cards<\/p>\n\n\n\n

\n
Examples: Featured Cards<\/a><\/div>\n<\/div>\n\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n\n
\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n Step-By-Step\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Try it Out!\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

The Featured Cards block is a block that is used to highlight content and make it “pop.” If you are familiar with CMS, this is similar to quick links on our homepage. But you can use the block on any page on your site! <\/p>\n\n\n\n

Complete with text, images, and buttons, this block is great for drawing attention to info that is deeper within your website.<\/p>\n\n\n\n

Below is an example of the featured cards block as used on our homepage to highlight training resources.<\/p>\n\n\n\n

\"Example<\/figure>\n\n\n\n

Step-By-Step<\/h2>\n\n\n\n

1. To add a “Featured Cards” block, open up the block menu<\/a> and select “Featured Cards.”<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

An empty row of 3 featured cards will be added to your page. <\/p>\n\n\n\n

\"Featured<\/figure>\n\n\n\n

2. Start by clicking in the title area to add a title. (Note the 80 character text limit)<\/p>\n\n\n\n

\"Title<\/figure>\n\n\n\n

3. Next, click in the text area below the title to add a description.<\/p>\n\n\n\n

\"Text<\/figure>\n\n\n\n

4. Under block options at the right, click Select Image <\/strong>to choose a thumbnail image. This is optional.<\/p>\n\n\n\n

\"select<\/figure>\n\n\n\n

5. Also under block options, add a button by selecting Internal <\/strong>or External <\/strong>and adding the URL.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

6. Access options for the entire block by clicking Select Featured Cards<\/strong> at the top left of the context menu. <\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

Choose your options under the Block tab.<\/p>\n\n\n\n

\n
\n\n \n
\n \n
\n \n
    \n\n
  1. Add a header for the block.<\/li>\n\n\n
  2. Select white or grey for the block background.<\/li>\n\n\n
  3. Select the number of columns (icon cards in each block). Note this can be between 2-4.<\/li>\n\n\n
  4. Select white or grey for the card background.<\/li>\n\n\n
  5. Determine whether or not to have a shadow on the cards.<\/li>\n\n<\/ol>\n\n<\/div>\n\n\n
    \n \n
    \"\"<\/figure>\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

    Video Tutorial<\/h2>\n\n\n\n