{"id":754,"date":"2023-11-01T08:24:53","date_gmt":"2023-11-01T12:24:53","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=754"},"modified":"2024-09-18T20:31:29","modified_gmt":"2024-09-19T00:31:29","slug":"card-blocks","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-2-cards-listing-blocks\/card-blocks\/","title":{"rendered":"Card Blocks"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Card Blocks\n <\/h1>\n \n \n \n\n\n

Module 2.3 \u2013 Advanced: Listing Blocks: Cards<\/p>\n\n\n\n

\n
Examples: Card Blocks<\/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
\n \n
\n
\n \n 1.1\n <\/span>\n\n \n Add a Card Block\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n News Card Display Options\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Event Card Display Options\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 4.\n <\/span>\n\n \n People Card Display Options\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 5.\n <\/span>\n\n \n Video Card Display Options\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 6.\n <\/span>\n\n \n File Card Display Options\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 7.\n <\/span>\n\n \n Page Card Display Options\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 8.\n <\/span>\n\n \n Example: Event Card Block\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 9.\n <\/span>\n\n \n Example: People Card Block\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 10.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 11.\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

Card listing blocks are used for pulling categorized content onto a page in a card format (vs stacked listings<\/a> which are formatted like a list). There are six card blocks available: news posts, events, people, videos, files, and pages.<\/p>\n\n\n\n

Follow along below to learn more about how you can use a card block. I’ll focus on News Cards, but the process is the same for all card blocks with different display options available.<\/p>\n\n\n\n

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

Add a Card Block<\/h3>\n\n\n\n

1.<\/strong> Add a <\/strong>Card block using the block menu.<\/a> Under Card Grids, choose from Event Cards, News Cards, People Cards, Video Cards, File Cards, or Page Cards.<\/p>\n\n\n\n

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

2.<\/strong> Select options from the Block menu on the right.<\/p>\n\n\n\n

News Card Display Options<\/h2>\n\n\n\n
\n
\n\n \n
\n \n
\n \n
    \n\n
  1. Add a header (title) to the card block<\/li>\n\n\n
  2. The block background can be white or grey<\/li>\n\n\n
  3. Select the number of columns (2,3, or 4) using the slider<\/li>\n\n\n
  4. Toggle images off or on<\/li>\n\n\n
  5. Toggle dates off or on<\/li>\n\n\n
  6. Toggle excerpts off or on<\/li>\n\n\n
  7. Determine the number of news cards to display using the slider.<\/li>\n\n\n
  8. Add a More Button to show more cards\n\n