{"id":1099,"date":"2023-11-06T14:14:54","date_gmt":"2023-11-06T19:14:54","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1099"},"modified":"2024-09-18T20:31:27","modified_gmt":"2024-09-19T00:31:27","slug":"quote","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-1-text-block-mastery\/quote\/","title":{"rendered":"Quote"},"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                        Quote\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Module 1.1 \u2013 Mastery: Text Blocks: Quote<\/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\/image-blocks\/\">Examples: Quote Block<\/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>\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>A quote block gives your quotes visual emphasis and helps them stand out against your other content. <\/p>\n\n\n\n<p>Here is an example of a quote in cuTheme:<\/p>\n\n\n<div class=\"not-prose cu-quote cu-component-spacing\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Difficult to see; always in motion is the future<\/p>\n<cite>~Yoda,&nbsp;<em>The Empire Strikes Back<\/em><\/cite><\/blockquote>\n<\/div>\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;Quote&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=\"66\" height=\"76\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-06-at-14.19.22.png\" alt=\"Quote block\" class=\"wp-image-1102\" style=\"aspect-ratio:0.868421052631579;width:75px;height:auto\"\/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">2.<\/strong> Enter the quote text and citation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"100\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-06-at-14.20.25.png\" alt=\"Edit text block\" class=\"wp-image-1104\" style=\"aspect-ratio:3.92;width:375px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-06-at-14.20.25.png 392w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-06-at-14.20.25-320x82.png 320w\" sizes=\"auto, (max-width: 392px) 100vw, 392px\" \/><\/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\/9MX9w3J-j0U\" 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-quote\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Quote\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-quote\">\n            \n\n<p>In this video, we are going to explore using quote blocks for your website\u2019s content.<\/p>\n\n\n\n<p>Shown in the screen is an Example of a Quote block in action. And as you can see, a Quote block gives a highlight on the quotes that are&nbsp;part of your website\u2019s content, making them visually stand out,&nbsp;be easily identified as a quote and draws the user into reading them.<\/p>\n\n\n\n<p>Now that we have explained the purpose of a quote block and how it can improve your&nbsp;website\u2019s content, we will now show you how to add them to your pages.<\/p>\n\n\n\n<p>First, you want to go into&nbsp;<strong>editing mode<\/strong>&nbsp;of the page you want to add a quote block to. Then navigate to the block menu by either clicking in between existing blocks,&nbsp;or navigating to the top left section of the page where there is a&nbsp;<strong>button with a plus sign on it.<\/strong><\/p>\n\n\n\n<p>Once you are on the block menu,&nbsp;you can navigate to the&nbsp;<strong>quote button<\/strong>&nbsp;and click on it, a new block should appear.<\/p>\n\n\n\n<p>Once its on your page, you can drag it to the location you want by&nbsp;<strong>clicking on the block itself<\/strong>, then dragging it into wherever you want it to be on the page.<\/p>\n\n\n\n<p>Once its on the location you want it to be on your page, you can now start adding your quote, and then do not forget to add a citation by using the text box below the quote itself.<\/p>\n\n\n\n<p>And by finishing that step, we have now successfully added a quote block to a page.<\/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 quote block, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a quote block and text to your page<\/li>\n\n\n\n<li>Add quote text and citation<\/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-1-text-block-mastery\/columns\/\">Next: Columns<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A quote block gives your quotes visual emphasis and helps them stand out against your other content. Here is an example of a quote in cuTheme: Difficult to see; always in motion is the future ~Yoda,&nbsp;The Empire Strikes Back Step-by-Step 1. Add the&nbsp;Quote&nbsp;block using the block menu. 2. Enter the quote text and citation. Video [&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-1099","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\/1099","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=1099"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1099\/revisions"}],"predecessor-version":[{"id":4286,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1099\/revisions\/4286"}],"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=1099"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=1099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}