{"id":3280,"date":"2024-03-22T11:01:24","date_gmt":"2024-03-22T15:01:24","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=3280"},"modified":"2024-09-18T20:31:19","modified_gmt":"2024-09-19T00:31:19","slug":"custom-select-cards-2","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-2-cards-listing-blocks\/custom-select-cards-2\/","title":{"rendered":"Custom Select 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                        Custom Select Cards\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Module 2.4 \u2013 Advanced: Stacked &amp; Card Listing Blocks: Custome Select Cards<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-2-cards-listing-blocks\/custom-select-cards-2\/#\">Examples: Custom Select 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<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#step-by-step\" class=\"font-medium hover:underline\">\n                        Step-By-Step\n                    <\/a>\n                <\/div>\n\n                                        <div class=\"space-y-1\">\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.1\n                    <\/span>\n\n                    <a href=\"#add-a-card-block\" class=\"font-medium hover:underline\">\n                        Add a Card Block\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#people-cards-select\" class=\"font-medium hover:underline\">\n                        People Cards: Select\n                    <\/a>\n                <\/div>\n\n                                        <div class=\"space-y-1\">\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.1\n                    <\/span>\n\n                    <a href=\"#people-card-block-options\" class=\"font-medium hover:underline\">\n                        People Card Block Options\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.2\n                    <\/span>\n\n                    <a href=\"#event-card-block-options\" class=\"font-medium hover:underline\">\n                        Event Card Block Options\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.3\n                    <\/span>\n\n                    <a href=\"#people-card-block-options\" class=\"font-medium hover:underline\">\n                        People Card Block Options\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.4\n                    <\/span>\n\n                    <a href=\"#video-card-block-options\" class=\"font-medium hover:underline\">\n                        Video Card Block Options\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.5\n                    <\/span>\n\n                    <a href=\"#file-card-block-options\" class=\"font-medium hover:underline\">\n                        File Card Block Options\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.6\n                    <\/span>\n\n                    <a href=\"#page-card-options\" class=\"font-medium hover:underline\">\n                        Page Card Options\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#examples-news-event-and-people-cards\" class=\"font-medium hover:underline\">\n                        Examples: News, Event, and People Cards\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        4.\n                    <\/span>\n\n                    <a href=\"#video-tutorial\" class=\"font-medium hover:underline\">\n                        Video Tutorial\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        5.\n                    <\/span>\n\n                    <a href=\"#try-it-out\" class=\"font-medium hover:underline\">\n                        Try it Out!\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<p>Custom select card blocks are used for pulling custom content onto a page in a card format. You choose exactly which cards and information to display. There are four custom select card blocks available: People, File, Page, and Video.<\/p>\n\n\n\n<p>Follow along below to learn more about to use a custom select card block. I&#8217;ll focus on People Cards but the process is similar for all card blocks with a few different options available for each.<\/p>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-By-Step<\/h2>\n\n\n\n<h3 id=\"add-a-card-block\" class=\"wp-block-heading\">Add a Card Block<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">1.<\/strong> <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-essential-text-blocks\/module-3-blocks-overview\/#addblock\">Add a<strong class=\"myprefix-text-bold\"> <\/strong>Custom Select Card&nbsp;block using the block menu.<\/a> Under Card Grids, choose from People Cards: Select, Video Cards, File Cards: Custom, Page Cards: Select, or Video Cards: Select.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"1024\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/03\/CleanShot-2024-03-22-at-10.46.26@2x.png\" alt=\"Custom Select Card options\" class=\"wp-image-3282\" style=\"width:303px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/03\/CleanShot-2024-03-22-at-10.46.26@2x.png 630w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/03\/CleanShot-2024-03-22-at-10.46.26@2x-320x520.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/03\/CleanShot-2024-03-22-at-10.46.26@2x-512x832.png 512w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/figure>\n\n\n\n<h2 id=\"people-cards-select\" class=\"wp-block-heading\">People Cards: Select<\/h2>\n\n\n\n<p>1. 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&#8217;s name to add them to the block<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"482\" height=\"426\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/03\/CleanShot-2024-03-22-at-10.54.53@2x.png\" alt=\"Card options for people\" class=\"wp-image-3283\" style=\"width:280px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/03\/CleanShot-2024-03-22-at-10.54.53@2x.png 482w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/03\/CleanShot-2024-03-22-at-10.54.53@2x-320x283.png 320w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">2.<\/strong> Select options from the Block menu on the right. <\/p>\n\n\n\n<p>Customize the order of cards by using the drag and drop or left\/right arrows.<\/p>\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        <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-3 gap-6 md:gap-10\">\n            \n\n    \n    <div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 text-center group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n                    <figure class=\"px-6 pt-8 pb-2 mb-2 overflow-hidden rounded-t-lg cu-figure--round\">\n                                    <img loading=\"lazy\" decoding=\"async\"\n                src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/dj-scaled.jpg\" alt=\"\" width=\"200\" height=\"200\" \/>\n                                <\/figure>\n        \n        <header class=\"px-6 first:mt-6\">\n            <h2 class=\"text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n                                    Johnson, Danniel\n                            <\/h2>\n        <\/header>\n\n        <div class=\"flex flex-col px-6\">\n            <ul class=\"space-y-2 text-sm text-cu-black-700 @sm:md:text-base\">\n                                    <li class=\"text-base @sm:md:text-lg italic\">\n                        Designer\n                    <\/li>\n                \n                                    <li>\n                        <strong class=\"font-semibold break-all text-cu-red-700 hover:underline\">\n                            <a href=\"mailto:danniel.johnson@carleton.ca\">\n                                Email\n                                Danniel\n                            <\/a>\n                        <\/strong>\n                    <\/li>\n                \n                                    <li>\n                        6135204321\n                                            <\/li>\n                            <\/ul>\n        <\/div>\n\n                    <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a href=\"https:\/\/carleton.ca\/cutheme-docs\/people\/danniel-johnson\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    View Profile\n                <\/a>\n            <\/footer>\n            <\/div>\n\n\n\n    \n    <div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 text-center group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n                    <figure class=\"px-6 pt-8 pb-2 mb-2 overflow-hidden rounded-t-lg cu-figure--round\">\n                                    <img loading=\"lazy\" decoding=\"async\"\n                src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/portrait-young-beautiful-model-stand-smiling-camera-high-quality-photo-1-scaled.jpg\" alt=\"\" width=\"200\" height=\"200\" \/>\n                                <\/figure>\n        \n        <header class=\"px-6 first:mt-6\">\n            <h2 class=\"text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n                                    Connor, Susan\n                            <\/h2>\n        <\/header>\n\n        <div class=\"flex flex-col px-6\">\n            <ul class=\"space-y-2 text-sm text-cu-black-700 @sm:md:text-base\">\n                                    <li class=\"text-base @sm:md:text-lg italic\">\n                        Web Developer \n                    <\/li>\n                \n                                    <li>\n                        <strong class=\"font-semibold break-all text-cu-red-700 hover:underline\">\n                            <a href=\"mailto:susan.connor@carleton.ca\">\n                                Email\n                                Susan\n                            <\/a>\n                        <\/strong>\n                    <\/li>\n                \n                                    <li>\n                        6135201234\n                                            <\/li>\n                            <\/ul>\n        <\/div>\n\n                    <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a href=\"https:\/\/carleton.ca\/cutheme-docs\/people\/susan-connor\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    View Profile\n                <\/a>\n            <\/footer>\n            <\/div>\n\n\n\n    \n    <div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 text-center group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n                    <figure class=\"px-6 pt-8 pb-2 mb-2 overflow-hidden rounded-t-lg cu-figure--round\">\n                                    <img loading=\"lazy\" decoding=\"async\"\n                src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/cheerful-guy-enjoying-outdoor-coffee-break-scaled.jpg\" alt=\"\" width=\"200\" height=\"200\" \/>\n                                <\/figure>\n        \n        <header class=\"px-6 first:mt-6\">\n            <h2 class=\"text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n                                    Taylor, Tom\n                            <\/h2>\n        <\/header>\n\n        <div class=\"flex flex-col px-6\">\n            <ul class=\"space-y-2 text-sm text-cu-black-700 @sm:md:text-base\">\n                                    <li class=\"text-base @sm:md:text-lg italic\">\n                        Content Writer\n                    <\/li>\n                \n                                    <li>\n                        <strong class=\"font-semibold break-all text-cu-red-700 hover:underline\">\n                            <a href=\"mailto:tom.taylor@carleton.ca\">\n                                Email\n                                Tom\n                            <\/a>\n                        <\/strong>\n                    <\/li>\n                \n                                    <li>\n                        6137654321\n                                            <\/li>\n                            <\/ul>\n        <\/div>\n\n                    <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a href=\"https:\/\/carleton.ca\/cutheme-docs\/people\/tom-taylor\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    View Profile\n                <\/a>\n            <\/footer>\n            <\/div>\n\n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n\n\n\n<h3 id=\"people-card-block-options\" class=\"wp-block-heading\">People Card Block Options<\/h3>\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    <div class=\"grid gap-6 mx-auto my-6 cu-column md:gap-10 md:grid-cols-2 md:my-10 first:mt-0\">\n        \n<div class=\"cu-column-content\">\n    \n<ol class=\"wp-block-list\">\n\n<li>Add a header (title) to card block<\/li>\n\n\n<li>The block background can be white or grey<\/li>\n\n\n<li>Select the number of columns (2,3, or 4) using the slider<\/li>\n\n\n<li>The card background can be white or grey<\/li>\n\n\n<li>Choose options for card shadow \n\n<ul class=\"wp-block-list\">\n\n<li>On card &amp; hover<\/li>\n\n\n<li>On hover only<\/li>\n\n\n<li>None<\/li>\n\n<\/ul>\n\n<\/li>\n\n\n<li>Toggle images off or on<\/li>\n\n\n<li>Toggle dates off or on<\/li>\n\n\n<li>Toggle excerpts off or on<\/li>\n\n\n<li>Determine the number of cards to display using the slider.<\/li>\n\n\n<li>Add a More Button to show more cards\n\n<ul class=\"wp-block-list\">\n\n<li>Choose <strong class=\"myprefix-text-bold\">Load More <\/strong>to display more on the page<\/li>\n\n\n<li>Choose <strong class=\"myprefix-text-bold\">View More<\/strong> to bring visitors to another page<\/li>\n\n\n<li>Choose <strong class=\"myprefix-text-bold\">Show All (No Button)<\/strong> to display all<\/li>\n\n<\/ul>\n\n<\/li>\n\n\n<li>Display cards (posts) from one or more categories by typing the category name into the text box<\/li>\n\n<\/ol>\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"370\" height=\"1210\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/12\/card-options-1.png\" alt=\"Card listing block options\" class=\"wp-image-1903\" style=\"width:304px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/12\/card-options-1.png 370w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/12\/card-options-1-320x1046.png 320w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/figure>\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h3 id=\"event-card-block-options\" class=\"wp-block-heading\">Event Card Block Options<\/h3>\n\n\n\n<p>With event cards, use the selector to display either upcoming or past events.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"188\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-01-at-09.26.37@2x.png\" alt=\"\" class=\"wp-image-776\" style=\"aspect-ratio:2.723404255319149;width:329px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-01-at-09.26.37@2x.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-01-at-09.26.37@2x-320x118.png 320w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 id=\"people-card-block-options\" class=\"wp-block-heading\">People Card Block Options<\/h3>\n\n\n\n<p>With people cards, you can sort by first or last name and select the order you wish to use (alphabetical or reverse alphabetical).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"248\" height=\"141\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-31-at-15.26.47.png\" alt=\"people options\" class=\"wp-image-736\" style=\"aspect-ratio:1.7588652482269505;width:285px;height:auto\"\/><\/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    <div class=\"grid gap-6 mx-auto my-6 cu-column md:gap-10 md:grid-cols-2 md:my-10 first:mt-0\">\n        \n<div class=\"cu-column-content\">\n    \n<p>You can also show:<\/p>\n\n\n<ol class=\"wp-block-list\">\n\n<li>Images<\/li>\n\n\n<li>Job Title<\/li>\n\n\n<li>Email<\/li>\n\n\n<li>Phone<\/li>\n\n<\/ol>\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"188\" height=\"159\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-31-at-15.28.48.png\" alt=\"\" class=\"wp-image-738\" style=\"aspect-ratio:1.1823899371069182;width:240px;height:auto\"\/><\/figure>\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h3 id=\"video-card-block-options\" class=\"wp-block-heading\">Video Card Block Options<\/h3>\n\n\n\n<p>With video cards, you can sort by Video Title or Publishing Date and select the order you wish to use (alphabetical or reverse alphabetical)<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"520\" height=\"290\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-01-at-09.37.45@2x.png\" alt=\"\" class=\"wp-image-782\" style=\"aspect-ratio:1.793103448275862;width:340px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-01-at-09.37.45@2x.png 520w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-01-at-09.37.45@2x-320x178.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-01-at-09.37.45@2x-512x286.png 512w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/figure>\n\n\n\n<h3 id=\"file-card-block-options\" class=\"wp-block-heading\">File Card Block Options<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No additional options<\/li>\n<\/ul>\n\n\n\n<h3 id=\"page-card-options\" class=\"wp-block-heading\">Page Card Options<\/h3>\n\n\n\n<p> With page cards, you can decide to show the dates and\/or the excerpts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"178\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.32.31@2x.png\" alt=\"Show dates and Excerpts\" class=\"wp-image-2990\" style=\"width:324px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.32.31@2x.png 528w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.32.31@2x-320x108.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.32.31@2x-512x173.png 512w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/figure>\n\n\n\n<p>You can order cards alphabetically or chronologically by date the page was modified.<\/p>\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    <div class=\"grid gap-6 mx-auto my-6 cu-column md:gap-10 md:grid-cols-2 md:my-10 first:mt-0\">\n        \n<div class=\"cu-column-content\">\n    \n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"536\" height=\"332\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.36.53@2x.png\" alt=\"\" class=\"wp-image-2991\" style=\"width:365px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.36.53@2x.png 536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.36.53@2x-320x198.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.36.53@2x-512x317.png 512w\" sizes=\"auto, (max-width: 536px) 100vw, 536px\" \/><\/figure>\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"558\" height=\"338\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.37.49@2x.png\" alt=\"\" class=\"wp-image-2992\" style=\"width:392px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.37.49@2x.png 558w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.37.49@2x-320x194.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/CleanShot-2024-02-27-at-14.37.49@2x-512x310.png 512w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><\/figure>\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"examples-news-event-and-people-cards\" class=\"wp-block-heading\">Examples: News, Event, and People Cards<\/h2>\n\n\n\n\n\n\n                                                                                                                                                                                                                                                                                                                                                                            \n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white cu-section--cards ml-offset-center md:px-8 lg:px-14\" data-attributes=\"&#x7B;&quot;numberOfPosts&quot;&#x3A;3,&quot;showImages&quot;&#x3A;false,&quot;blockType&quot;&#x3A;&quot;cards&quot;,&quot;contentType&quot;&#x3A;&quot;post&quot;,&quot;currentPage&quot;&#x3A;1,&quot;blockBackground&quot;&#x3A;&quot;white&quot;,&quot;numberOfColumns&quot;&#x3A;3,&quot;showDates&quot;&#x3A;true,&quot;showTimeToRead&quot;&#x3A;true,&quot;showExcerpts&quot;&#x3A;true,&quot;showFilter&quot;&#x3A;false,&quot;taxName&quot;&#x3A;&quot;category&quot;,&quot;moreButton&quot;&#x3A;&quot;none&quot;,&quot;categories&quot;&#x3A;&quot;&quot;,&quot;tags&quot;&#x3A;&quot;&quot;&#x7D;\" data-page=\"2\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n                \n                \n        <div class=\"cu-loading hidden text-center mx-auto h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\" role=\"status\">\n    <span class=\"!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]\">\n        Loading&#8230;\n    <\/span>\n<\/div>\n\n                                        \n        <p class=\"cu-no-posts hidden\">\n            No\n            category\n\n            posts are available.\n        <\/p>\n\n                <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-3 gap-6 md:gap-10\">\n                        \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2026-03-03T19:00:00-05:00\" class=\"block italic text-sm text-cu-black-600\">\n        March 4, 2026\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        How to Replace a Media File in cuTheme (Without Breaking Anything)\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                Update your files while keeping the original URL exactly the same.\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2026\/how-to-replace-a-media-file-in-cutheme-without-breaking-anything\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                How to Replace a Media File in cuTheme (Without Breaking Anything)\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2025-12-08T19:00:00-05:00\" class=\"block italic text-sm text-cu-black-600\">\n        December 9, 2025\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Introducing the \u201cIn the Media\u201d Block!\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                We\u2019re excited to share a new way to highlight your media mentions \u2014 the In the Media block! This new feature makes it easy to\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2025\/introducing-the-in-the-media-block\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                Introducing the \u201cIn the Media\u201d Block!\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2025-10-26T20:00:00-04:00\" class=\"block italic text-sm text-cu-black-600\">\n        October 27, 2025\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        cuTheme Image Size Cheat Sheet\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                For anyone adding images to posts, pages, people profiles, or content blocks \u2014 here\u2019s a quick reference to help you choose the right size and\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2025\/cutheme-image-size-cheat-sheet\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                cuTheme Image Size Cheat Sheet\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n                    \n        <\/div>\n        \n                                    \n    <\/div>\n<\/section>\n\n\n\n\n\n\n                                                                                                                                                                                                                                                                                                                                                                                                        \n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white cu-section--cards ml-offset-center md:px-8 lg:px-14\" data-attributes=\"&#x7B;&quot;numberOfPosts&quot;&#x3A;3,&quot;numberOfColumns&quot;&#x3A;3,&quot;blockBackground&quot;&#x3A;&quot;white&quot;,&quot;moreButton&quot;&#x3A;&quot;none&quot;,&quot;currentPage&quot;&#x3A;1,&quot;blockType&quot;&#x3A;&quot;cards&quot;,&quot;contentType&quot;&#x3A;&quot;cu_event&quot;,&quot;taxName&quot;&#x3A;&quot;cu_event_type&quot;,&quot;order&quot;&#x3A;&quot;ASC&quot;,&quot;orderBy&quot;&#x3A;&quot;meta_value&quot;,&quot;metaCompare&quot;&#x3A;&quot;&gt;&#x3D;&quot;,&quot;metaField&quot;&#x3A;&quot;cu_event_end_date&quot;,&quot;showFilter&quot;&#x3A;false,&quot;hideEventMeta&quot;&#x3A;false,&quot;categories&quot;&#x3A;&quot;&quot;,&quot;tags&quot;&#x3A;&quot;&quot;&#x7D;\" data-page=\"2\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n                \n                \n        <div class=\"cu-loading hidden text-center mx-auto h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\" role=\"status\">\n    <span class=\"!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]\">\n        Loading&#8230;\n    <\/span>\n<\/div>\n\n                                        \n        <p class=\"cu-no-posts hidden\">\n            No\n            event\n\n            posts are available.\n        <\/p>\n\n                <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-3 gap-6 md:gap-10\">\n                        \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n            <figure class=\"mb-2 overflow-hidden rounded-t-lg\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/coffee-laptop.jpeg\" alt=\"coffee and laptop\" width=\"600\" height=\"400\" \/>\n        <\/figure>\n    \n                            <div class=\"mx-6 mb-2 -mt-16\">\n                <h2 class=\"h-20 w-20 @4xl:lg:h-32 @4xl:lg:w-32 flex flex-col items-center justify-center rounded-md bg-white shadow-md\">\n            <span class=\"block text-xs @4xl:lg:text-lg font-bold uppercase text-cu-red\">\n                                    Dec\n                            <\/span>\n            <span class=\"block text-2xl @4xl:lg:text-4xl font-bold uppercase text-cu-black-800\">\n                                    11\n                            <\/span>\n        <\/h2>\n                    <\/div>\n            \n\n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Coffee Break with Web Services\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n            <ul class=\"space-y-3 text-sm text-cu-black-600 @sm:md:text-base\">\n                <li>\n                                <div class=\"flex\">\n\n                            <span class=\"flex-shrink-0 mr-2 cu-icon\" style=\"width: 20px; height: 20px; display: inline-block;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" fill=\"#f48c90\" width=\"20\" height=\"20\"><path d=\"M480 256A224 224 0 1 1 32 256a224 224 0 1 1 448 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM240 112l0 144c0 5.3 2.7 10.3 7.1 13.3l96 64c7.4 4.9 17.3 2.9 22.2-4.4s2.9-17.3-4.4-22.2L272 247.4 272 112c0-8.8-7.2-16-16-16s-16 7.2-16 16z\"><\/path><\/svg><\/span>\n                        \n                            10:00 PM\n                to\n                11:00 PM\n                    <\/div>\n    \n                <\/li>\n                <li>\n                                <div class=\"flex\">\n                            <span class=\"flex-shrink-0 mr-2 cu-icon\" style=\"width: 20px; height: 20px; display: inline-block;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" fill=\"#f48c90\" width=\"20\" height=\"20\"><path d=\"M352 192c0-88.4-71.6-160-160-160S32 103.6 32 192c0 15.6 5.4 37 16.6 63.4c10.9 25.9 26.2 54 43.6 82.1c34.1 55.3 74.4 108.2 99.9 140c25.4-31.8 65.8-84.7 99.9-140c17.3-28.1 32.7-56.3 43.6-82.1C346.6 229 352 207.6 352 192zm32 0c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192zm-240 0a48 48 0 1 0 96 0 48 48 0 1 0 -96 0zm48 80a80 80 0 1 1 0-160 80 80 0 1 1 0 160z\"><\/path><\/svg><\/span>\n            \n                            TBD\n                    <\/div>\n    \n                <\/li>\n            <\/ul>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/event\/coffee-break-with-web-services\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View event info\n            <span class=\"sr-only\">\n                about\n                Coffee Break with Web Services\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n            <figure class=\"mb-2 overflow-hidden rounded-t-lg\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/coffee.jpg\" alt=\"coffee\" width=\"600\" height=\"400\" \/>\n        <\/figure>\n    \n                            <div class=\"mx-6 mb-2 -mt-16\">\n                <h2 class=\"h-20 w-20 @4xl:lg:h-32 @4xl:lg:w-32 flex flex-col items-center justify-center rounded-md bg-white shadow-md\">\n            <span class=\"block text-xs @4xl:lg:text-lg font-bold uppercase text-cu-red\">\n                                    Oct\n                            <\/span>\n            <span class=\"block text-2xl @4xl:lg:text-4xl font-bold uppercase text-cu-black-800\">\n                                    26\n                            <\/span>\n        <\/h2>\n                    <\/div>\n            \n\n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h3 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Coffee Break\n    <\/h3>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n            <ul class=\"space-y-3 text-sm text-cu-black-600 @sm:md:text-base\">\n                <li>\n                                <div class=\"flex\">\n\n                            <span class=\"flex-shrink-0 mr-2 cu-icon\" style=\"width: 20px; height: 20px; display: inline-block;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" fill=\"#f48c90\" width=\"20\" height=\"20\"><path d=\"M480 256A224 224 0 1 1 32 256a224 224 0 1 1 448 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM240 112l0 144c0 5.3 2.7 10.3 7.1 13.3l96 64c7.4 4.9 17.3 2.9 22.2-4.4s2.9-17.3-4.4-22.2L272 247.4 272 112c0-8.8-7.2-16-16-16s-16 7.2-16 16z\"><\/path><\/svg><\/span>\n                        \n                            4:00 PM\n                to\n                6:00 PM\n                    <\/div>\n    \n                <\/li>\n                <li>\n                                <div class=\"flex\">\n                            <span class=\"flex-shrink-0 mr-2 cu-icon\" style=\"width: 20px; height: 20px; display: inline-block;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" fill=\"#f48c90\" width=\"20\" height=\"20\"><path d=\"M352 192c0-88.4-71.6-160-160-160S32 103.6 32 192c0 15.6 5.4 37 16.6 63.4c10.9 25.9 26.2 54 43.6 82.1c34.1 55.3 74.4 108.2 99.9 140c25.4-31.8 65.8-84.7 99.9-140c17.3-28.1 32.7-56.3 43.6-82.1C346.6 229 352 207.6 352 192zm32 0c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192zm-240 0a48 48 0 1 0 96 0 48 48 0 1 0 -96 0zm48 80a80 80 0 1 1 0-160 80 80 0 1 1 0 160z\"><\/path><\/svg><\/span>\n            \n                            TBD\n                    <\/div>\n    \n                <\/li>\n            <\/ul>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/event\/event-block\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View event info\n            <span class=\"sr-only\">\n                about\n                Coffee Break\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n                    \n        <\/div>\n        \n                                    \n    <\/div>\n<\/section>\n\n\n    \n\n\n\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        \n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--grey cu-section--cards ml-offset-center md:px-8 lg:px-14\" data-attributes=\"&#x7B;&quot;blockBackground&quot;&#x3A;&quot;grey&quot;,&quot;showJobTitle&quot;&#x3A;false,&quot;showPhone&quot;&#x3A;false,&quot;numberOfPosts&quot;&#x3A;3,&quot;metaField&quot;&#x3A;&quot;cu_people_first_name&quot;,&quot;numberOfColumns&quot;&#x3A;3,&quot;showImages&quot;&#x3A;true,&quot;showEmail&quot;&#x3A;true,&quot;moreButton&quot;&#x3A;&quot;none&quot;,&quot;currentPage&quot;&#x3A;1,&quot;blockType&quot;&#x3A;&quot;cards&quot;,&quot;contentType&quot;&#x3A;&quot;cu_people&quot;,&quot;taxName&quot;&#x3A;&quot;cu_people_type&quot;,&quot;order&quot;&#x3A;&quot;asc&quot;,&quot;orderBy&quot;&#x3A;&quot;meta_value&quot;,&quot;showAllPosts&quot;&#x3A;false,&quot;showFilter&quot;&#x3A;false,&quot;buttonText&quot;&#x3A;&quot;View&#x20;Profile&quot;,&quot;categories&quot;&#x3A;&quot;&quot;,&quot;tags&quot;&#x3A;&quot;&quot;&#x7D;\" data-page=\"2\">\n    <div class=\"space-y-6 cu-max-w-child-5xl bg-cu-black-50 max-w-screen-2xl mx-auto rounded-xl px-6 py-5 md:px-14 md:py-12 md:space-y-10 cu-prose-first-last\">\n\n                \n                \n        <div class=\"cu-loading hidden text-center mx-auto h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\" role=\"status\">\n    <span class=\"!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]\">\n        Loading&#8230;\n    <\/span>\n<\/div>\n\n                                        \n        <p class=\"cu-no-posts hidden\">\n            No\n            people\n\n            posts are available.\n        <\/p>\n\n                <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-3 gap-6 md:gap-10\">\n                        \n                    <div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 text-center group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n            <figure class=\"px-6 pt-8 pb-2 mb-2 overflow-hidden rounded-t-lg cu-figure--round\">\n                            <img loading=\"lazy\" decoding=\"async\"\n            src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/doggo-sand.jpeg\" alt=\"Dog on sandy beach\" width=\"200\" height=\"200\" \/>\n                        <\/figure>\n    \n    <header class=\"px-6 first:mt-6\">\n        <h2 class=\"text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n                            Andrew\n                Riddles\n                    <\/h2>\n    <\/header>\n    <div class=\"flex flex-col px-6\">\n        <ul class=\"space-y-2 text-sm text-cu-black-700 @sm:md:text-base\">\n                                        <li>\n                    <strong class=\"font-semibold break-all text-cu-red-700 hover:underline\">\n                        <a href=\"mailto:andrew.riddles@carleton.ca\">\n                            Email\n                            Andrew\n                        <\/a>\n                    <\/strong>\n                <\/li>\n                                <\/ul>\n    <\/div>\n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/people\/test-tet\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Profile\n            <span class=\"sr-only\">\n                for\n                Andrew Riddles\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    <div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 text-center group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n            <figure class=\"px-6 pt-8 pb-2 mb-2 overflow-hidden rounded-t-lg cu-figure--round\">\n                            <img loading=\"lazy\" decoding=\"async\"\n            src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/dj-scaled.jpg\" alt=\"\" width=\"200\" height=\"200\" \/>\n                        <\/figure>\n    \n    <header class=\"px-6 first:mt-6\">\n        <h2 class=\"text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n                            Danniel\n                Johnson\n                    <\/h2>\n    <\/header>\n    <div class=\"flex flex-col px-6\">\n        <ul class=\"space-y-2 text-sm text-cu-black-700 @sm:md:text-base\">\n                                        <li>\n                    <strong class=\"font-semibold break-all text-cu-red-700 hover:underline\">\n                        <a href=\"mailto:danniel.johnson@carleton.ca\">\n                            Email\n                            Danniel\n                        <\/a>\n                    <\/strong>\n                <\/li>\n                                <\/ul>\n    <\/div>\n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/people\/danniel-johnson\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Profile\n            <span class=\"sr-only\">\n                for\n                Danniel Johnson\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    <div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 text-center group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n            <figure class=\"px-6 pt-8 pb-2 mb-2 overflow-hidden rounded-t-lg cu-figure--round\">\n                            <img loading=\"lazy\" decoding=\"async\"\n            src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/person.jpg\" alt=\"Happy Person\" width=\"200\" height=\"200\" \/>\n                        <\/figure>\n    \n    <header class=\"px-6 first:mt-6\">\n        <h2 class=\"text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n                            Sarah \n                Lamb\n                    <\/h2>\n    <\/header>\n    <div class=\"flex flex-col px-6\">\n        <ul class=\"space-y-2 text-sm text-cu-black-700 @sm:md:text-base\">\n                                        <li>\n                    <strong class=\"font-semibold break-all text-cu-red-700 hover:underline\">\n                        <a href=\"mailto:sarah.lamb@carleton.ca\">\n                            Email\n                            Sarah \n                        <\/a>\n                    <\/strong>\n                <\/li>\n                                <\/ul>\n    <\/div>\n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/people\/sarah-lamb\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Profile\n            <span class=\"sr-only\">\n                for\n                Sarah  Lamb\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n                    \n        <\/div>\n        \n                                    \n    <\/div>\n<\/section>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-light-grey-solid\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/block-library\/card-blocks\/\">View more card examples<\/a><\/div>\n<\/div>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/NObVM1VI6aI\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/div>\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-card-blocks\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript &#8211; Card Blocks\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-card-blocks\">\n            \n\n<p>Hello, and Welcome to cuTheme advanced training,&nbsp;&nbsp;Module 2. In this video, we&nbsp; will be covering Card Blocks.<\/p>\n\n\n\n<p>Card Blocks are a way to display categorized&nbsp; content on pages as \u201ccards\u201d, allowing the user&nbsp;&nbsp;to select an individual piece of content within&nbsp; the block.<\/p>\n\n\n\n<p>Card Blocks are available for posts,&nbsp;&nbsp;events, people, or videos. In this video,&nbsp; I will be going over all four types.<\/p>\n\n\n\n<p>So to add a Card Block, go&nbsp; to the block selection menu,&nbsp;&nbsp;scroll down to \u201cContent Types\u201d, and I\u2019m going&nbsp; to start off with a News Card. Once selected, you will see there are various options which I will take you through.&nbsp;<\/p>\n\n\n\n<p>You can add to a news card a header and some intro text. You can change the block\u2019s background, make it either white or grey, and you can choose how many columns the block has, between two and four.&nbsp;<\/p>\n\n\n\n<p>For the cards themselves, you can make the background white or grey, just like the background. You can choose whether the card has a shadow, either on hover, or in general. So on \u201cCard and Hover\u201d, it looks like this. On \u201cHover Only\u201d, there\u2019s no outline here, but there\u2019s a shadow when you hover over. You can also have none, so there\u2019s no shadow at all.<\/p>\n\n\n\n<p>As well, you can toggle on and off images, dates, and excerpts. For the full block, you can choose how many posts you want, between one and twelve, and the more button, just like listing blocks. You can choose whether you want to load more at the end of the card, which will have the user stay on the page. You can have \u201cView More\u201d, which will take the user to another page, which you can add in here, or you can have none at all.&nbsp;<\/p>\n\n\n\n<p>Lastly, you can choose which categories you want the card to have. So if I want \u201cNews\u201d, I could click on that, and there\u2019s no posts here with the category \u201cNews\u201d, so none show up, but as you categorize your posts, you can have specific categories displayed.<\/p>\n\n\n\n<p>I will now quickly take you through some specific options for other types of Card Blocks. So I\u2019m going to add an event card here, and you can see there\u2019s a lot of the same options that you had before, like a header, the background, number of columns, etc.<\/p>\n\n\n\n<p>What the&nbsp;<strong>Event Card<\/strong>&nbsp;block has is that you can sort it either by upcoming events, as you can see here, or past events.&nbsp;<\/p>\n\n\n\n<p>The next type of block I will be showing is&nbsp;<strong>People Cards<\/strong>. People Cards again have a lot of the same options as before. You can either choose to show all people, or a specific category of people, and you can sort by last name or first name, either from A to Z, or Z to A.<\/p>\n\n\n\n<p>The last type of card is a<strong>&nbsp;Video Card<\/strong>, and the main option for Video Cards is that you can sort either by video title or publishing date. For video title, you can sort from A to Z or Z to A like you could for people, or by publishing date, either old to new, or new to old.<\/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<p>Now that you have learned how to add a listing, time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a news card block.<\/li>\n\n\n\n<li>Display news from one category only.<\/li>\n\n\n\n<li>Play around with some of the card block options.<\/li>\n\n\n\n<li>Add an event card block and try out options.<\/li>\n\n\n\n<li>Add a people card block and try out options.<\/li>\n\n\n\n<li>Add a video card block and try out some options.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-3-organizing-your-website\/\">Next: Module 3 &#8211; Site Organization<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Custom select card blocks are used for pulling custom content onto a page in a card format. You choose exactly which cards and information to display. There are four custom select card blocks available: People, File, Page, and Video. Follow along below to learn more about to use a custom select card block. I&#8217;ll focus [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":528,"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":[11],"class_list":["post-3280","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/3280","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=3280"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/3280\/revisions"}],"predecessor-version":[{"id":4240,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/3280\/revisions\/4240"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/528"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=3280"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=3280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}