{"id":344,"date":"2023-10-24T13:22:13","date_gmt":"2023-10-24T17:22:13","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=344"},"modified":"2024-09-18T20:31:32","modified_gmt":"2024-09-19T00:31:32","slug":"heading","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/module-3-basic-building-blocks\/heading\/","title":{"rendered":"Heading"},"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                        Heading\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Module 3.2.2 \u2013 Getting Started: Basic Building Blocks: Basic Text Blocks: Heading<\/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\/text-blocks\/heading-block\/\">Examples: Heading Block with Levels<\/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 &#8220;Heading&#8221; block is a block that allows you to create a title or heading for your content. If you look just below this paragraph, you can see an example of the &#8220;Heading&#8221; block in action, &#8220;Step-by-Step.&#8221;<\/p>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading has-text-align-left\">Step-by-Step<\/h2>\n\n\n\n<p>1. To add a &#8220;Heading&#8221; block, <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-essential-text-blocks\/module-3-blocks-overview\/#addblock\">open up the block menu<\/a> and select &#8220;Heading.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"176\" height=\"174\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.24.22@2x.png\" alt=\"add heading block\" class=\"wp-image-348\" style=\"width:72px;height:79px\"\/><\/figure>\n\n\n\n<p>2. Use the editing toolbar to select the heading level. Remember that the headings must be nested (H2, H3, H4) so that the main topics are the highest level (H2).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"676\" height=\"112\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.26.15@2x.png\" alt=\"Editing toolbar\" class=\"wp-image-349\" style=\"width:344px;height:57px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.26.15@2x.png 676w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.26.15@2x-320x53.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.26.15@2x-512x85.png 512w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><\/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\/LaZMe6UDnaY\" 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-heading-block\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Heading 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-heading-block\">\n            \n\n<p>Welcome to getting started with cuTheme, module 3. This video is going to explain how to use the heading block.<\/p>\n\n\n\n<p>Headings are useful for splitting your content into subsections which makes it accessible, scannable, and logically organized.<\/p>\n\n\n\n<p>To add a heading block, select it from the block menu. Then just type in your heading.<\/p>\n\n\n\n<p>You can change the heading level by clicking the current heading which is H2 by default. And then you can select a new one.<\/p>\n\n\n\n<p>Headings should be nested meaning that they need to start with the highest level \u2013 H2 and put any subheadings as progressively smaller levels \u2013 H3, H4 Etc.<\/p>\n\n\n\n<p>You can also adjust the alignment of a heading by clicking on this icon and selecting a different alignment, such as align center. &nbsp;<\/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 Heading block, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a heading to your page\/post.<\/li>\n\n\n\n<li>Change the heading level.<\/li>\n\n\n\n<li>Add a series of nested headings from H2 to H4.<\/li>\n<\/ol>\n\n\n\n<p>Click on the \u201cNext\u201d button to get started with the \u201cList\u201d block.<\/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\/getting-started\/module-3-essential-text-blocks\/module-3-basic-building-blocks\/list\/\">Next: List Block<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A &#8220;Heading&#8221; block is a block that allows you to create a title or heading for your content. If you look just below this paragraph, you can see an example of the &#8220;Heading&#8221; block in action, &#8220;Step-by-Step.&#8221; Step-by-Step 1. To add a &#8220;Heading&#8221; block, open up the block menu and select &#8220;Heading.&#8221; 2. Use the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":309,"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-344","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\/344","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=344"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/344\/revisions"}],"predecessor-version":[{"id":4310,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/344\/revisions\/4310"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/309"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=344"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}