  {"id":4574,"date":"2025-01-08T14:39:38","date_gmt":"2025-01-08T19:39:38","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=4574"},"modified":"2025-01-09T11:49:57","modified_gmt":"2025-01-09T16:49:57","slug":"call-out-block","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-1-text-block-mastery\/call-out-block\/","title":{"rendered":"Call Out Block"},"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                        Call Out Block\n                    <\/h1>\n                \n                                \n                                    \n\n<p>Module 1.5 \u2013 Mastery: Text Blocks: Call Out<\/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\/block-library\/testimonials\/\">Examples: Call Out Block<\/a><\/div>\n<\/div>\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>\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=\"#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                        3.\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><br>The Call Out block allows you to highlight important information on your website. Use it to draw attention to key messages, announcements, or special offers. Be sure to include a call to action where possible!<br><\/p>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-by-Step<\/h2>\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 the&nbsp;Call Out&nbsp;block using the block menu.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"156\" height=\"144\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.31.10@2x.png\" alt=\"Call out block icon\" class=\"wp-image-4575\" style=\"width:95px;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-4xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <div class=\"cu-callout cu-callout--center cu-component border-8 md:border-[12px] border-solid border-cu-black-50 px-8 pt-5 pb-6 md:px-16 md:pt-8 md:py-10 rounded-lg cu-prose-first-last\">\n        \n        \n\n<p><\/p>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<p><strong class=\"myprefix-text-bold\">2.<\/strong> Add a title.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"342\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.32.45@2x-1024x342.png\" alt=\"\" class=\"wp-image-4577\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.32.45@2x-1024x342.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.32.45@2x-512x171.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.32.45@2x-320x107.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.32.45@2x-768x256.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.32.45@2x-1536x513.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.32.45@2x.png 1810w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">3.<\/strong> Add content to the block. You can add text and\/or buttons by adding the appropriate block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"331\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.34.06@2x-1024x331.png\" alt=\"\" class=\"wp-image-4578\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.34.06@2x-1024x331.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.34.06@2x-512x166.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.34.06@2x-320x104.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.34.06@2x-768x248.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.34.06@2x-1536x497.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.34.06@2x.png 1762w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>4. Block options:<\/p>\n\n\n\n<p>Choose the alignment for your content using the dropdown menu under <strong class=\"myprefix-text-bold\">Justify Content.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"256\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.35.15@2x.png\" alt=\"\" class=\"wp-image-4579\" style=\"width:348px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.35.15@2x.png 556w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.35.15@2x-512x236.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.35.15@2x-320x147.png 320w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<p>Choose the block width using the dropdown menu under <strong class=\"myprefix-text-bold\">Max Width.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"204\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.36.17@2x.png\" alt=\"\" class=\"wp-image-4580\" style=\"width:367px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.36.17@2x.png 576w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.36.17@2x-512x181.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-08-at-14.36.17@2x-320x113.png 320w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"394\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/12\/citation.png\" alt=\"Add a citation\" class=\"wp-image-4496\" style=\"width:251px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/12\/citation.png 706w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/12\/citation-512x286.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/12\/citation-320x179.png 320w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/figure>\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\/DaH5cfdJIm8\" 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-call-out-block\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Call Out Block\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-call-out-block\">\n            \n\n<p>Welcome to this video on how to use the Callout Block. The Callout Block is a really versatile tool that lets you highlight important information\u2014things like key messages, announcements, or special offers. It helps you make content stand out, ensuring that visitors don&#8217;t miss important information.<\/p>\n\n\n\n<p>To add a Callout Block, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Add the block<\/strong>\u00a0using the Block Inserter.<\/li>\n\n\n\n<li>Once you&#8217;ve added the block,\u00a0<strong>enter your title<\/strong>\u00a0here.<\/li>\n\n\n\n<li>Then, enter the details about whatever you&#8217;re highlighting.<\/li>\n<\/ol>\n\n\n\n<p>You also have the option to add a button (or two), which is great as a call to action. Let&#8217;s center that button.<\/p>\n\n\n\n<p>Next, you&#8217;ll notice over here on the right, there are some additional options for the Callout Block. You can choose to display it aligned to the center, left, or right. You can also adjust the width to be small, medium, or large.<\/p>\n\n\n\n<p>Let&#8217;s have a look at how that looks on the front end of our website.<\/p>\n\n\n\n<p>And that\u2019s it! You\u2019ve successfully added a Callout Block to your website.<\/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 work with the call out block, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a call out block to your page<\/li>\n\n\n\n<li>Add a title, a sentence or two and a button.<\/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\/mastery\/module-2-design-block-mastery\/\">Next Up: Become a Design Block Boss<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Call Out block allows you to highlight important information on your website. Use it to draw attention to key messages, announcements, or special offers. Be sure to include a call to action where possible! Step-by-Step 1. Add the&nbsp;Call Out&nbsp;block using the block menu. 2. Add a title. 3. Add content to the block. You [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":1095,"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-4574","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\/4574","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=4574"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4574\/revisions"}],"predecessor-version":[{"id":4613,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4574\/revisions\/4613"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1095"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=4574"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=4574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}