{"id":612,"date":"2025-07-17T20:12:21","date_gmt":"2025-07-17T20:12:21","guid":{"rendered":"https:\/\/blogarchive.utc.edu\/web-kb\/?p=612"},"modified":"2025-07-18T14:47:54","modified_gmt":"2025-07-18T14:47:54","slug":"utc-card-blocks","status":"publish","type":"post","link":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/","title":{"rendered":"UTC Card Blocks\u00a0"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Adding Card Blocks to Drupal content page.<\/h3>\n\n\n\n<p>UTC Cards are a great design tool in Drupal that allows you to display your information in a clean and divided manner. These cards usually have an image, heading, text, and a button.&nbsp;<\/p>\n\n\n\n<p><em>Topics:<br><\/em><a href=\"#UTC-Cards\">UTC Cards<\/a><br><a href=\"#UTC-SideBar-Card\">UTC SideBar Card<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"UTC-Cards\">UTC Cards<\/h4>\n\n\n\n<div class=\"schema-how-to wp-block-yoast-how-to-block\"><p class=\"schema-how-to-description\"><\/p> <ol class=\"schema-how-to-steps\"><li class=\"schema-how-to-step\" id=\"how-to-step-1750877665414\"><strong class=\"schema-how-to-step-name\">Add UTC Cards Block<\/strong> <p class=\"schema-how-to-step-text\">Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Cards\u201d option.\u00a0<br\/><br\/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1750877696232\"><strong class=\"schema-how-to-step-name\">Card Formatting<\/strong> <p class=\"schema-how-to-step-text\">When the UTC Cards configure menu opens, you will see options including:<br\/><br\/><strong>a. \u201cCard Type\u201d<\/strong><br\/><img loading=\"lazy\" decoding=\"async\" width=\"922\" height=\"620\" src=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.11.53\u202fPM.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.11.53\u202fPM.png 922w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.11.53\u202fPM-768x516.png 768w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.11.53\u202fPM-580x390.png 580w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.11.53\u202fPM-610x410.png 610w\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" \/><strong><br\/>b. \u201ccolor\u201d<\/strong><br\/><img loading=\"lazy\" decoding=\"async\" width=\"919\" height=\"546\" src=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.14.47\u202fPM-1.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.14.47\u202fPM-1.png 919w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.14.47\u202fPM-1-768x456.png 768w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.14.47\u202fPM-1-580x345.png 580w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.14.47\u202fPM-1-610x362.png 610w\" sizes=\"auto, (max-width: 919px) 100vw, 919px\" \/><br\/><br\/><strong>c. \u201cNumber of Cards on the Display\u201d<br\/><\/strong><em>Even if you enter information for Card 2 and Card 3 below, they will not display unless the correct number of cards is selected.<br\/><\/em><strong><br\/>d. &#8220;Card Alignment&#8221;<\/strong><br\/><img loading=\"lazy\" decoding=\"async\" width=\"925\" height=\"542\" src=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.18.52\u202fPM.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.18.52\u202fPM.png 925w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.18.52\u202fPM-768x450.png 768w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.18.52\u202fPM-580x340.png 580w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.18.52\u202fPM-610x357.png 610w\" sizes=\"auto, (max-width: 925px) 100vw, 925px\" \/><br\/><br\/><strong>e. &#8220;Width&#8221;<br\/><\/strong><img loading=\"lazy\" decoding=\"async\" width=\"923\" height=\"692\" src=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM.png 923w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM-768x576.png 768w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM-580x435.png 580w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM-610x457.png 610w\" sizes=\"auto, (max-width: 923px) 100vw, 923px\" \/><br\/><br\/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1750877739516\"><strong class=\"schema-how-to-step-name\">Card Infomation<\/strong> <p class=\"schema-how-to-step-text\">Under the formatting options, you have an accordian style section where you would place your Card Information. If we select our \u201cCard 1\u201d for example, you can see all the editing options for that specific card. These options include:<br\/>\u00a0<br\/><strong>a<\/strong>. <strong>\u201cCard One Link\u201d<\/strong> you can use the card itself as a button by linking your whole card <br\/>through entering an URL address. <strong>\u201cLink Text\u201d <\/strong>is the text that will show on the button itself. It is initially filled out for you after you select your page with the title of the page you are selecting. You can customize this, however, with a call to action or some other verbiage.\u00a0<br\/>\u00a0<br\/><strong>b.<\/strong> &#8220;<strong>Card\u2019s image<\/strong>&#8221; settings allow us to select an image from the Media Library.\u00a0\u00a0<br\/><em>Please note that if you\u2019d like to place an image on these cards, you must follow the same process as with your image blocks and be sure the image is either on your computer or already uploaded onto the Media Library before being able to select it here.\u00a0<\/em>\u00a0<br\/>\u00a0\u00a0<br\/><strong>c. &#8220;Card\u2019s icon<\/strong>&#8221; settings allow another visual option for your card. For more information on adding icons to your card, navigate to our <a href=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/font-awesome\/\">Font Awesome article<\/a>.\u00a0\u00a0<br\/><em>Please note that using this option will replace your card image.<\/em><br\/>\u00a0<br\/><strong>d.<\/strong> &#8220;<strong>Card\u2019s title and body<\/strong>&#8221; both provide text on your card, so feel free to pick your preference when designing your own card.\u00a0\u00a0<br\/>\u00a0<br\/><strong>e.<\/strong> &#8220;<strong>Card button<\/strong>&#8221; link options allow us to add a button to your card instead of making the whole card a button.\u00a0\u00a0<br\/>\u00a0\u00a0<br\/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1750877764499\"><strong class=\"schema-how-to-step-name\">Save and Finish!<\/strong> <p class=\"schema-how-to-step-text\">Before adding your UTC Cards, scroll to the top of the configure menu and check the settings of how your card should be displayed. Specifically, if you only placed information under 3 card sections, then make sure the \u201cNumber of Cards\u201d is set to \u201c3\u201d. If this option is incorrect, the block will default to showing one card. <br\/><em>This option can always be changed back in your configure menu.<\/em>\u00a0\u00a0<br\/><br\/><\/p> <\/li><\/ol><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"UTC-SideBar-Card\">UTC SideBar Card<\/h4>\n\n\n\n<div class=\"schema-how-to wp-block-yoast-how-to-block\"><p class=\"schema-how-to-description\"><\/p> <ol class=\"schema-how-to-steps\"><li class=\"schema-how-to-step\" id=\"how-to-step-1750877665414\"><strong class=\"schema-how-to-step-name\">Add UTC SideBar Card Block<\/strong> <p class=\"schema-how-to-step-text\">Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. <em>We usually use SideBar Cards in the same colum of the side menu, titled \u201cRegion: First\u201d.<\/em> Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Side Bar Card\u201d option.\u00a0<br\/><br\/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1750877696232\"><strong class=\"schema-how-to-step-name\">Card Formatting<\/strong> <p class=\"schema-how-to-step-text\">Like with most of our other blocks, you will be directed to a configuring menu that will show you all the options available for editing your sidebar cards. However, this is a relatively simple block and so the options are more limited.\u00a0<br\/>\u00a0<br\/>In the configure menu, you will see your <strong>\u201cHeading\u201d<\/strong> for the title, the <strong>\u201cHeader color\u201d<\/strong>, and the <strong>\u201cCard Body\u201d<\/strong> for writing on your card with same the same text editor that would see when making UTC Text Blocks.<br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"608\" height=\"310\" src=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.54.29\u202fPM.png\" class=\"attachment-full size-full\" alt=\"\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.54.29\u202fPM.png 608w, https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.54.29\u202fPM-580x296.png 580w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1750877764499\"><strong class=\"schema-how-to-step-name\">Save and Finish!<\/strong> <p class=\"schema-how-to-step-text\">Once all your information is in the configure menu, select the \u201cAdd Block\u201d at the bottom of the window. Remember to save your work! Once you\u2019ve added your block, navigate to the top of your content page and select \u201csave layout\u201d to finish your edits<br\/><br\/><\/p> <\/li><\/ol><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding Card Blocks to Drupal content page. UTC Cards are a great design tool in Drupal that allows you to display your information in a clean and divided manner. These cards usually have an image, heading, text, and a button.&nbsp; Topics:UTC CardsUTC SideBar Card UTC Cards UTC SideBar Card<\/p>\n","protected":false},"author":2040,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3],"tags":[14],"class_list":{"0":"post-612","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-drupal","7":"tag-drupal-content-blocks","8":"entry","9":"has-post-thumbnail"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UTC Card Blocks\u00a0 - UTC Website Knowledge Base Archive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UTC Card Blocks\u00a0 - UTC Website Knowledge Base Archive\" \/>\n<meta property=\"og:description\" content=\"Adding Card Blocks to Drupal content page. UTC Cards are a great design tool in Drupal that allows you to display your information in a clean and divided manner. These cards usually have an image, heading, text, and a button.&nbsp; Topics:UTC CardsUTC SideBar Card UTC Cards UTC SideBar Card\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"UTC Website Knowledge Base Archive\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-17T20:12:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:47:54+00:00\" \/>\n<meta name=\"author\" content=\"Kailey Agoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kailey Agoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/\",\"name\":\"UTC Card Blocks\u00a0 - UTC Website Knowledge Base Archive\",\"isPartOf\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#website\"},\"datePublished\":\"2025-07-17T20:12:21+00:00\",\"dateModified\":\"2025-07-18T14:47:54+00:00\",\"author\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogarchive.utc.edu\/web-kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UTC Card Blocks\u00a0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#website\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/\",\"name\":\"UTC Website Knowledge Base Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogarchive.utc.edu\/web-kb\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3\",\"name\":\"Kailey Agoo\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/author\/jzc491\/\"},{\"@type\":\"HowTo\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#howto-1\",\"name\":\"UTC Card Blocks\u00a0\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/\"},\"description\":\"\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877665414\",\"name\":\"Add UTC Cards Block\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Cards\u201d option.\u00a0<br\/><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877696232\",\"name\":\"Card Formatting\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"When the UTC Cards configure menu opens, you will see options including:<br\/><br\/><strong>a. \u201cCard Type\u201d<\/strong><br\/><strong><br\/>b. \u201ccolor\u201d<\/strong><br\/><br\/><br\/><strong>c. \u201cNumber of Cards on the Display\u201d<br\/><\/strong><em>Even if you enter information for Card 2 and Card 3 below, they will not display unless the correct number of cards is selected.<br\/><\/em><strong><br\/>d. \\\"Card Alignment\\\"<\/strong><br\/><br\/><br\/><strong>e. \\\"Width\\\"<br\/><\/strong><br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#schema-image-0a7a83312f625db8336fcb27eae426f0\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM.png\",\"contentUrl\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM.png\",\"width\":923,\"height\":692}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877739516\",\"name\":\"Card Infomation\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Under the formatting options, you have an accordian style section where you would place your Card Information. If we select our \u201cCard 1\u201d for example, you can see all the editing options for that specific card. These options include:<br\/>\u00a0<br\/><strong>a<\/strong>. <strong>\u201cCard One Link\u201d<\/strong> you can use the card itself as a button by linking your whole card <br\/>through entering an URL address. <strong>\u201cLink Text\u201d <\/strong>is the text that will show on the button itself. It is initially filled out for you after you select your page with the title of the page you are selecting. You can customize this, however, with a call to action or some other verbiage.\u00a0<br\/>\u00a0<br\/><strong>b.<\/strong> \\\"<strong>Card\u2019s image<\/strong>\\\" settings allow us to select an image from the Media Library.\u00a0\u00a0<br\/><em>Please note that if you\u2019d like to place an image on these cards, you must follow the same process as with your image blocks and be sure the image is either on your computer or already uploaded onto the Media Library before being able to select it here.\u00a0<\/em>\u00a0<br\/>\u00a0\u00a0<br\/><strong>c. \\\"Card\u2019s icon<\/strong>\\\" settings allow another visual option for your card. For more information on adding icons to your card, navigate to our <a href=\\\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/font-awesome\/\\\">Font Awesome article<\/a>.\u00a0\u00a0<br\/><em>Please note that using this option will replace your card image.<\/em><br\/>\u00a0<br\/><strong>d.<\/strong> \\\"<strong>Card\u2019s title and body<\/strong>\\\" both provide text on your card, so feel free to pick your preference when designing your own card.\u00a0\u00a0<br\/>\u00a0<br\/><strong>e.<\/strong> \\\"<strong>Card button<\/strong>\\\" link options allow us to add a button to your card instead of making the whole card a button.\u00a0\u00a0<br\/>\u00a0\u00a0<br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877764499\",\"name\":\"Save and Finish!\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Before adding your UTC Cards, scroll to the top of the configure menu and check the settings of how your card should be displayed. Specifically, if you only placed information under 3 card sections, then make sure the \u201cNumber of Cards\u201d is set to \u201c3\u201d. If this option is incorrect, the block will default to showing one card. <br\/><em>This option can always be changed back in your configure menu.<\/em>\u00a0\u00a0<br\/><br\/>\"}]}],\"inLanguage\":\"en-US\"},{\"@type\":\"HowTo\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#howto-2\",\"name\":\"UTC Card Blocks\u00a0\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/\"},\"description\":\"\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877665414\",\"name\":\"Add UTC SideBar Card Block\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. <em>We usually use SideBar Cards in the same colum of the side menu, titled \u201cRegion: First\u201d.<\/em> Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Side Bar Card\u201d option.\u00a0<br\/><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877696232\",\"name\":\"Card Formatting\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Like with most of our other blocks, you will be directed to a configuring menu that will show you all the options available for editing your sidebar cards. However, this is a relatively simple block and so the options are more limited.\u00a0<br\/>\u00a0<br\/>In the configure menu, you will see your <strong>\u201cHeading\u201d<\/strong> for the title, the <strong>\u201cHeader color\u201d<\/strong>, and the <strong>\u201cCard Body\u201d<\/strong> for writing on your card with same the same text editor that would see when making UTC Text Blocks.<br\/><br\/>\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#schema-image-93d0d52b1358d372e8836e741afa2c38\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.54.29\u202fPM.png\",\"contentUrl\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.54.29\u202fPM.png\",\"width\":608,\"height\":310}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877764499\",\"name\":\"Save and Finish!\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Once all your information is in the configure menu, select the \u201cAdd Block\u201d at the bottom of the window. Remember to save your work! Once you\u2019ve added your block, navigate to the top of your content page and select \u201csave layout\u201d to finish your edits<br\/><br\/>\"}]}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UTC Card Blocks\u00a0 - UTC Website Knowledge Base Archive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/","og_locale":"en_US","og_type":"article","og_title":"UTC Card Blocks\u00a0 - UTC Website Knowledge Base Archive","og_description":"Adding Card Blocks to Drupal content page. UTC Cards are a great design tool in Drupal that allows you to display your information in a clean and divided manner. These cards usually have an image, heading, text, and a button.&nbsp; Topics:UTC CardsUTC SideBar Card UTC Cards UTC SideBar Card","og_url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/","og_site_name":"UTC Website Knowledge Base Archive","article_published_time":"2025-07-17T20:12:21+00:00","article_modified_time":"2025-07-18T14:47:54+00:00","author":"Kailey Agoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kailey Agoo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/","name":"UTC Card Blocks\u00a0 - UTC Website Knowledge Base Archive","isPartOf":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#website"},"datePublished":"2025-07-17T20:12:21+00:00","dateModified":"2025-07-18T14:47:54+00:00","author":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3"},"breadcrumb":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogarchive.utc.edu\/web-kb\/"},{"@type":"ListItem","position":2,"name":"UTC Card Blocks\u00a0"}]},{"@type":"WebSite","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#website","url":"https:\/\/blogarchive.utc.edu\/web-kb\/","name":"UTC Website Knowledge Base Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogarchive.utc.edu\/web-kb\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3","name":"Kailey Agoo","url":"https:\/\/blogarchive.utc.edu\/web-kb\/author\/jzc491\/"},{"@type":"HowTo","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#howto-1","name":"UTC Card Blocks\u00a0","mainEntityOfPage":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/"},"description":"","step":[{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877665414","name":"Add UTC Cards Block","itemListElement":[{"@type":"HowToDirection","text":"Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Cards\u201d option.\u00a0<br\/><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877696232","name":"Card Formatting","itemListElement":[{"@type":"HowToDirection","text":"When the UTC Cards configure menu opens, you will see options including:<br\/><br\/><strong>a. \u201cCard Type\u201d<\/strong><br\/><strong><br\/>b. \u201ccolor\u201d<\/strong><br\/><br\/><br\/><strong>c. \u201cNumber of Cards on the Display\u201d<br\/><\/strong><em>Even if you enter information for Card 2 and Card 3 below, they will not display unless the correct number of cards is selected.<br\/><\/em><strong><br\/>d. \"Card Alignment\"<\/strong><br\/><br\/><br\/><strong>e. \"Width\"<br\/><\/strong><br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#schema-image-0a7a83312f625db8336fcb27eae426f0","url":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM.png","contentUrl":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.24.03\u202fPM.png","width":923,"height":692}},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877739516","name":"Card Infomation","itemListElement":[{"@type":"HowToDirection","text":"Under the formatting options, you have an accordian style section where you would place your Card Information. If we select our \u201cCard 1\u201d for example, you can see all the editing options for that specific card. These options include:<br\/>\u00a0<br\/><strong>a<\/strong>. <strong>\u201cCard One Link\u201d<\/strong> you can use the card itself as a button by linking your whole card <br\/>through entering an URL address. <strong>\u201cLink Text\u201d <\/strong>is the text that will show on the button itself. It is initially filled out for you after you select your page with the title of the page you are selecting. You can customize this, however, with a call to action or some other verbiage.\u00a0<br\/>\u00a0<br\/><strong>b.<\/strong> \"<strong>Card\u2019s image<\/strong>\" settings allow us to select an image from the Media Library.\u00a0\u00a0<br\/><em>Please note that if you\u2019d like to place an image on these cards, you must follow the same process as with your image blocks and be sure the image is either on your computer or already uploaded onto the Media Library before being able to select it here.\u00a0<\/em>\u00a0<br\/>\u00a0\u00a0<br\/><strong>c. \"Card\u2019s icon<\/strong>\" settings allow another visual option for your card. For more information on adding icons to your card, navigate to our <a href=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/font-awesome\/\">Font Awesome article<\/a>.\u00a0\u00a0<br\/><em>Please note that using this option will replace your card image.<\/em><br\/>\u00a0<br\/><strong>d.<\/strong> \"<strong>Card\u2019s title and body<\/strong>\" both provide text on your card, so feel free to pick your preference when designing your own card.\u00a0\u00a0<br\/>\u00a0<br\/><strong>e.<\/strong> \"<strong>Card button<\/strong>\" link options allow us to add a button to your card instead of making the whole card a button.\u00a0\u00a0<br\/>\u00a0\u00a0<br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877764499","name":"Save and Finish!","itemListElement":[{"@type":"HowToDirection","text":"Before adding your UTC Cards, scroll to the top of the configure menu and check the settings of how your card should be displayed. Specifically, if you only placed information under 3 card sections, then make sure the \u201cNumber of Cards\u201d is set to \u201c3\u201d. If this option is incorrect, the block will default to showing one card. <br\/><em>This option can always be changed back in your configure menu.<\/em>\u00a0\u00a0<br\/><br\/>"}]}],"inLanguage":"en-US"},{"@type":"HowTo","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#howto-2","name":"UTC Card Blocks\u00a0","mainEntityOfPage":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/"},"description":"","step":[{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877665414","name":"Add UTC SideBar Card Block","itemListElement":[{"@type":"HowToDirection","text":"Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. <em>We usually use SideBar Cards in the same colum of the side menu, titled \u201cRegion: First\u201d.<\/em> Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Side Bar Card\u201d option.\u00a0<br\/><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877696232","name":"Card Formatting","itemListElement":[{"@type":"HowToDirection","text":"Like with most of our other blocks, you will be directed to a configuring menu that will show you all the options available for editing your sidebar cards. However, this is a relatively simple block and so the options are more limited.\u00a0<br\/>\u00a0<br\/>In the configure menu, you will see your <strong>\u201cHeading\u201d<\/strong> for the title, the <strong>\u201cHeader color\u201d<\/strong>, and the <strong>\u201cCard Body\u201d<\/strong> for writing on your card with same the same text editor that would see when making UTC Text Blocks.<br\/><br\/>"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#schema-image-93d0d52b1358d372e8836e741afa2c38","url":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.54.29\u202fPM.png","contentUrl":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-3.54.29\u202fPM.png","width":608,"height":310}},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/utc-card-blocks\/#how-to-step-1750877764499","name":"Save and Finish!","itemListElement":[{"@type":"HowToDirection","text":"Once all your information is in the configure menu, select the \u201cAdd Block\u201d at the bottom of the window. Remember to save your work! Once you\u2019ve added your block, navigate to the top of your content page and select \u201csave layout\u201d to finish your edits<br\/><br\/>"}]}],"inLanguage":"en-US"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/users\/2040"}],"replies":[{"embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/comments?post=612"}],"version-history":[{"count":29,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/612\/revisions"}],"predecessor-version":[{"id":949,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/612\/revisions\/949"}],"wp:attachment":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/media?parent=612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/categories?post=612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/tags?post=612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}