{"id":985,"date":"2026-05-13T16:34:57","date_gmt":"2026-05-13T16:34:57","guid":{"rendered":"https:\/\/www.mtsu.edu\/style-guide\/?p=985"},"modified":"2026-10-23T19:44:14","modified_gmt":"2026-10-23T19:44:14","slug":"mtsu-icon-info-blocks","status":"publish","type":"post","link":"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-icon-info-blocks\/","title":{"rendered":"MTSU Icon Info Blocks"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Icon Callout block allows you to display an icon alongside a heading, supporting text, and a button. It is useful for highlighting key information, promoting actions, or creating visually engaging content sections that guide users\u2019 attention.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All items are optional<\/li>\n\n\n\n<li>For best results set icon size to 5<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility Best Practice<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ensure the heading structure is used correctly and the button includes clear, descriptive link text. Icons should support\u2014not replace\u2014meaningful content, so include text that conveys the same purpose for all users.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Icon Info Block Examples<\/h2>\n\n\n\n<div class=\"wp-block-mtsu-blocks-icon-info-blocks card-icon-block\"><div class=\"grid-row justify-content-center\">\n<div class=\"wp-block-mtsu-blocks-icon-info-block grid-item\"><div class=\"grid-item-wrapper\"><div class=\"grid-item-container\"><div class=\"grid-item-content\">\n<i class=\"wp-block-mtsu-blocks-icon-block has-mtsunavy-color has-text-color has-link-color fas fa-robot-astromech wp-elements-1\" style=\"font-size:5em\"><\/i>\n\n\n\n<h2 class=\"wp-block-heading\">Boop Beep<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;m a droid.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-1-background-color has-background wp-element-button\">Button<\/a><\/div>\n<\/div>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mtsu-blocks-icon-info-block grid-item\"><div class=\"grid-item-wrapper\"><div class=\"grid-item-container\"><div class=\"grid-item-content\">\n<i class=\"wp-block-mtsu-blocks-icon-block has-accent-1-color has-text-color has-link-color fas fa-user-hair-buns wp-elements-2\" style=\"font-size:5em\"><\/i>\n\n\n\n<h2 class=\"wp-block-heading\">Buns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-2-background-color has-background wp-element-button\">Button<\/a><\/div>\n<\/div>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mtsu-blocks-icon-info-block grid-item\"><div class=\"grid-item-wrapper\"><div class=\"grid-item-container\"><div class=\"grid-item-content\">\n<i class=\"wp-block-mtsu-blocks-icon-block has-mtsublue-color has-text-color has-link-color fas fa-jedi wp-elements-3\" style=\"font-size:5em\"><\/i>\n\n\n\n<h2 class=\"wp-block-heading\">Alliance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use the force<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex\"><\/div>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mtsu-blocks-icon-info-block grid-item\"><div class=\"grid-item-wrapper\"><div class=\"grid-item-container\"><div class=\"grid-item-content\">\n<i class=\"wp-block-mtsu-blocks-icon-block fas fa-space-station-moon\" style=\"font-size:2em\"><\/i>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex\"><\/div>\n<\/div><\/div><\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Icon Callout block allows you to display an icon alongside a heading, supporting text, and a button. It is useful for highlighting key information, promoting actions, or creating visually engaging content sections that guide users\u2019 attention.<\/p>\n","protected":false},"author":4,"featured_media":987,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[51,49,8],"class_list":["post-985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blocks","tag-info-icon","tag-mtsu-blocks","tag-wordpress-blocks"],"_links":{"self":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/comments?post=985"}],"version-history":[{"count":1,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/985\/revisions"}],"predecessor-version":[{"id":2187,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/985\/revisions\/2187"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media\/987"}],"wp:attachment":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media?parent=985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/categories?post=985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/tags?post=985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}