{"id":3132,"date":"2024-03-15T11:39:36","date_gmt":"2024-03-15T15:39:36","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=3132"},"modified":"2024-09-18T20:31:20","modified_gmt":"2024-09-19T00:31:20","slug":"custom-select-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-2-cards-listing-blocks\/custom-select-cards\/","title":{"rendered":"Select Cards"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Select Cards\n <\/h1>\n \n \n \n\n\n

Module 2.3.4 \u2013 Advanced: Listing Blocks: Select 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 Select 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 Event Cards: Select\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n News Cards: Select\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 4.\n <\/span>\n\n \n People Cards: Select\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 5.\n <\/span>\n\n \n Page Cards: Select\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 6.\n <\/span>\n\n \n Video Cards: Select\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 7.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 8.\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

Select cards allow you to choose specific items to create listings of pre-existing content. <\/p>\n\n\n\n

A listing is added to your page and each item in the listing links out to the full content piece (e.g., event, new post, people, page, or video).<\/p>\n\n\n\n

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

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

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

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

Event Cards: Select<\/h2>\n\n\n\n

1.<\/strong> Click on an individual event card and then start typing the event title in the card options at the right to select the event. Click the event name to add it to the block.<\/p>\n\n\n\n

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

2<\/strong>. Customize the order of cards by using the drag and drop or left\/right arrows.<\/p>\n\n\n\n

\n
\n\n \n
\n \n
\n \n
\"Drag\"<\/figure>\n\n<\/div>\n\n\n
\n \n
\"Move<\/figure>\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

3<\/strong>. Select options for event card block.<\/a><\/p>\n\n\n\n

News Cards: Select<\/h2>\n\n\n\n

1.<\/strong> Click on an individual news post and then start typing the title in the card options at the right to select the news post. Click the event name to add it to the block.<\/p>\n\n\n\n

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

2<\/strong>. Customize the order of cards by using the drag and drop or left\/right arrows.<\/p>\n\n\n\n

\n
\n\n \n
\n \n
\n \n
\"Drag\"<\/figure>\n\n<\/div>\n\n\n
\n \n
\"Move<\/figure>\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

3<\/strong>. Select options for event card block.<\/a><\/p>\n\n\n\n

People Cards: Select<\/h2>\n\n\n\n

1.<\/strong> Click on an individual people card and then start typing a name in the card options at the right to select a person. Click the individual’s name to add them to the block<\/p>\n\n\n\n

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

2<\/strong>. Customize the order of cards by using the drag and drop or left\/right arrows.<\/p>\n\n\n\n

\n
\n\n \n
\n \n
\n \n
\"Drag\"<\/figure>\n\n<\/div>\n\n\n
\n \n
\"move<\/figure>\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

3<\/strong>. Select options for news card block<\/a>.<\/p>\n\n\n\n

Page Cards: Select<\/h2>\n\n\n\n

1.<\/strong> Click on an individual page card and then start typing a page name in the card options at the right to select a peace. Click page to add it to the block<\/p>\n\n\n\n

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

2<\/strong>. Customize the order of cards by using the drag and drop or left\/right arrows.<\/p>\n\n\n\n

\n
\n\n \n
\n \n
\n \n
\"Drag\"<\/figure>\n\n<\/div>\n\n\n
\n \n
\"move<\/figure>\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

3<\/strong>. Select options for page card block<\/a>.<\/p>\n\n\n\n

Video Cards: Select<\/h2>\n\n\n\n

1.<\/strong> Click on an individual video card and then start typing a video post name in the card options at the right to select a video. Click the video to add it to the block<\/p>\n\n\n\n

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

2<\/strong>. Customize the order of cards by using the drag and drop or left\/right arrows.<\/p>\n\n\n\n

\n
\n\n \n
\n \n
\n \n
\"Drag\"<\/figure>\n\n<\/div>\n\n\n
\n \n
\"move<\/figure>\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

3<\/strong>. Select options for video card block<\/a>.<\/p>\n\n\n\n

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

Try it Out!<\/h2>\n\n\n\n

Now that you have learned how to add custom select block, time to try it out!<\/p>\n\n\n\n

    \n
  1. Add a People Card: Select<\/strong> block.\n