{"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":"2024-10-30T10:44:20","modified_gmt":"2024-10-30T14:44:20","slug":"icon-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-3-featured-content-blocks\/icon-cards\/","title":{"rendered":"Icon Cards"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Icon Cards\n <\/h1>\n \n \n \n\n

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

\n
Examples: Icon Cards<\/a><\/div>\n<\/div>\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 Icon Cards block is a block that is used to highlight content, similar to Featured Cards<\/a>. You can use it on your homepage (like Quick Links in our CMS theme). Or you can use it anywhere else on your site to draw attention to info and other pages on your site. The icon cards block features text excerpts, icons, and buttons for calls to action.<\/p>\n\n\n\n

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

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

\"Icon<\/figure>\n\n\n\n

An empty row of 3 icon cards will be added to your page with a default “headphones” icon.<\/p>\n\n\n\n

\"Empty<\/figure>\n\n\n\n

2. Start by clicking on a single icon card within the block. Under the block options tab, select your icon from the dropdown. <\/p>\n\n\n\n

\n
View all available icons<\/a><\/div>\n<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n

3. Next, click in the title area to add a title. (Note the 80-character text limit)<\/p>\n\n\n\n

\"80<\/figure>\n\n\n\n

4. Click in the content area below the title to add a description.<\/p>\n\n\n\n

\"Content<\/figure>\n\n\n\n

5. Under block options at the rught, add a button by selecting Internal <\/strong>or External <\/strong>and then add the URL.<\/p>\n\n\n\n

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

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

\"\"<\/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\n
  2. Select white or grey for the block background.<\/li>\n\n\n\n
  3. Select the number of columns (icon cards in each block). <\/li>\n<\/ol>\n\n\n<\/div>\n\n\n
    \n \n\n
    \"Display<\/figure>\n\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

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