{"id":5418,"date":"2026-08-31T13:47:44","date_gmt":"2026-08-31T17:47:44","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=5418"},"modified":"2026-08-31T13:58:24","modified_gmt":"2026-08-31T17:58:24","slug":"guides-tutorials","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/guides-tutorials\/","title":{"rendered":"Guides &amp; Tutorials"},"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                        Guides &#038; Tutorials\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Learn best practices, improve accessibility, and more for creating effective web content.<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n                    \n\n\n                                                                                                                                                                                                                                                                                                                                                                                    \n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white cu-section--cards ml-offset-center md:px-8 lg:px-14\" data-attributes=\"&#x7B;&quot;numberOfPosts&quot;&#x3A;12,&quot;showImages&quot;&#x3A;false,&quot;showFilter&quot;&#x3A;true,&quot;moreButton&quot;&#x3A;&quot;loadmore&quot;,&quot;blockType&quot;&#x3A;&quot;cards&quot;,&quot;contentType&quot;&#x3A;&quot;post&quot;,&quot;currentPage&quot;&#x3A;1,&quot;blockBackground&quot;&#x3A;&quot;white&quot;,&quot;numberOfColumns&quot;&#x3A;3,&quot;showDates&quot;&#x3A;true,&quot;showTimeToRead&quot;&#x3A;true,&quot;showExcerpts&quot;&#x3A;true,&quot;taxName&quot;&#x3A;&quot;category&quot;,&quot;categories&quot;&#x3A;&quot;50,51,36,44,25&quot;,&quot;tags&quot;&#x3A;&quot;&quot;&#x7D;\" data-page=\"2\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n                \n                            \n    \n    <div class=\"cu-filter text-sm font-medium\">\n        <div class=\"border rounded-tl-lg rounded-tr-lg border-cu-black-100 bg-gray-50 px-4 py-4 sm:px-6\">\n            <div class=\"flex flex-wrap items-center justify-between gap-4\">\n\n                <div class=\"ms-auto\">\n                    <div class=\"flex flex-wrap items-center gap-3 sm:gap-4\">\n                        \n                            <div class=\"cu-filter__dropdown relative\">\n                                <button class=\"cu-filter__dropdown-toggle inline-flex justify-center text-sm font-medium text-cu-black-800 group hover:text-cu-red\" type=\"button\" id=\"filter-26-categoriesMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\" data-filter-type=\"categories\">\n                                    Categories\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"cu-filter__dropdown-arrow flex-shrink-0 w-5 h-5 ml-1 text-cu-black-300 group-hover:text-cu-black-600 ease-in-out duration-300\">\n                                        <path fill-rule=\"evenodd\" d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\"><\/path>\n                                    <\/svg>\n                                <\/button>\n                                <div class=\"cu-filter__dropdown-menu hidden not-prose list-none absolute z-10 left-0 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-40 sm:w-64 p-3 sm:p-5\" aria-labelledby=\"filter-26-categoriesMenuButton\">\n                                    <ul class=\"max-h-44 sm:max-h-48 overflow-x-hidden overflow-y-auto\">\n                                                                                    <li class=\"flex items-top mb-4\">\n    <input id=\"filter-50-filter-26\" name=\"categories[]\" type=\"checkbox\" class=\"cu-filter__filtering-item w-4 h-4 mt-[2px] rounded border-cu-black-200 text-cu-red focus:ring-cu-red-100 ms-1\" data-label=\"Accessibility\" value=\"50\" data-filter-type=\"categories\" \/>\n    <label for=\"filter-50-filter-26\" class=\"pr-6 ml-3 text-sm text-cu-black-600 leading-3 cursor-pointer\" role=\"button\" aria-pressed=\"false\">\n        Accessibility\n    <\/label>\n<\/li>\n\n                                                                                    <li class=\"flex items-top mb-4\">\n    <input id=\"filter-51-filter-26\" name=\"categories[]\" type=\"checkbox\" class=\"cu-filter__filtering-item w-4 h-4 mt-[2px] rounded border-cu-black-200 text-cu-red focus:ring-cu-red-100 ms-1\" data-label=\"SEO\" value=\"51\" data-filter-type=\"categories\" \/>\n    <label for=\"filter-51-filter-26\" class=\"pr-6 ml-3 text-sm text-cu-black-600 leading-3 cursor-pointer\" role=\"button\" aria-pressed=\"false\">\n        SEO\n    <\/label>\n<\/li>\n\n                                                                                    <li class=\"flex items-top mb-4\">\n    <input id=\"filter-36-filter-26\" name=\"categories[]\" type=\"checkbox\" class=\"cu-filter__filtering-item w-4 h-4 mt-[2px] rounded border-cu-black-200 text-cu-red focus:ring-cu-red-100 ms-1\" data-label=\"Using Blocks\" value=\"36\" data-filter-type=\"categories\" \/>\n    <label for=\"filter-36-filter-26\" class=\"pr-6 ml-3 text-sm text-cu-black-600 leading-3 cursor-pointer\" role=\"button\" aria-pressed=\"false\">\n        Using Blocks\n    <\/label>\n<\/li>\n\n                                                                                    <li class=\"flex items-top mb-4\">\n    <input id=\"filter-44-filter-26\" name=\"categories[]\" type=\"checkbox\" class=\"cu-filter__filtering-item w-4 h-4 mt-[2px] rounded border-cu-black-200 text-cu-red focus:ring-cu-red-100 ms-1\" data-label=\"Writing for the Web\" value=\"44\" data-filter-type=\"categories\" \/>\n    <label for=\"filter-44-filter-26\" class=\"pr-6 ml-3 text-sm text-cu-black-600 leading-3 cursor-pointer\" role=\"button\" aria-pressed=\"false\">\n        Writing for the Web\n    <\/label>\n<\/li>\n\n                                                                                    <li class=\"flex items-top mb-4\">\n    <input id=\"filter-25-filter-26\" name=\"categories[]\" type=\"checkbox\" class=\"cu-filter__filtering-item w-4 h-4 mt-[2px] rounded border-cu-black-200 text-cu-red focus:ring-cu-red-100 ms-1\" data-label=\"Tutorials\" value=\"25\" data-filter-type=\"categories\" \/>\n    <label for=\"filter-25-filter-26\" class=\"pr-6 ml-3 text-sm text-cu-black-600 leading-3 cursor-pointer\" role=\"button\" aria-pressed=\"false\">\n        Tutorials\n    <\/label>\n<\/li>\n\n                                                                            <\/ul>\n                                <\/div>\n                            <\/div>\n\n                            \n                        \n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"bg-white flex items-start text-sm text-cu-black-600 border border-t-0 rounded-bl-lg rounded-br-lg border-cu-black-100 px-4 py-4 sm:px-6 sm:py-5 gap-x-4 sm:gap-x-5 gap-y-3\">\n            <div class=\"flex items-center gap-x-4 sm:gap-x-5 gap-y-3\">\n                <span>\n                    Filters\n                <\/span>\n                <span class=\"border-l border-cu-black-100 h-7 w-[1px]\"><\/span>\n            <\/div>\n            <div class=\"cu-filter__active-filter-panel flex flex-wrap items-center gap-3\"><\/div>\n        <\/div>\n    <\/div>\n\n        \n        <div class=\"cu-loading hidden text-center mx-auto h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\" role=\"status\">\n    <span class=\"!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]\">\n        Loading&#8230;\n    <\/span>\n<\/div>\n\n                                        \n        <p class=\"cu-no-posts hidden\">\n            No\n            category\n\n            posts are available.\n        <\/p>\n\n                <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-3 gap-6 md:gap-10\">\n                        \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2026-07-21T20:00:00-04:00\" class=\"block italic text-sm text-cu-black-600\">\n        July 22, 2026\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        What Block Should I Use?\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                While standard paragraphs work well for many types of content, blocks such as Tables, Columns, and Feature Cards can help present information in a more\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2026\/what-block-should-i-use\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                What Block Should I Use?\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2026-07-16T20:00:00-04:00\" class=\"block italic text-sm text-cu-black-600\">\n        July 17, 2026\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Using Headings Properly: A Quick SEO &#038; Accessibility Win\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                Good headings make your content easier to read, easier to navigate, and easier to find. In just a few minutes, you can improve your page\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2026\/using-headings-properly-a-quick-seo-and-accessibility-win\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                Using Headings Properly: A Quick SEO &#038; Accessibility Win\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2026-05-11T20:00:00-04:00\" class=\"block italic text-sm text-cu-black-600\">\n        May 12, 2026\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        SEO Tips: Creating Content That People (and Search Engines) Can Find\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                Good website content should be easy to find, easy to understand, and easy to use. That is where SEO (Search Engine Optimization) comes in. The\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2026\/seo-tips-creating-content-that-people-and-search-engines-can-find\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                SEO Tips: Creating Content That People (and Search Engines) Can Find\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2026-03-03T19:00:00-05:00\" class=\"block italic text-sm text-cu-black-600\">\n        March 4, 2026\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        How to Replace a Media File in cutheme (Without Breaking Anything)\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                Update your files while keeping the original URL exactly the same.\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2026\/how-to-replace-a-media-file-in-cutheme-without-breaking-anything\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                How to Replace a Media File in cutheme (Without Breaking Anything)\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2025-12-08T19:00:00-05:00\" class=\"block italic text-sm text-cu-black-600\">\n        December 9, 2025\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Introducing the \u201cIn the Media\u201d Block!\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                We\u2019re excited to share a new way to highlight your media mentions \u2014 the In the Media block! This new feature makes it easy to\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2025\/introducing-the-in-the-media-block\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                Introducing the \u201cIn the Media\u201d Block!\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2025-10-26T20:00:00-04:00\" class=\"block italic text-sm text-cu-black-600\">\n        October 27, 2025\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        cutheme Image Size Cheat Sheet\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                For anyone adding images to posts, pages, people profiles, or content blocks \u2014 here\u2019s a quick reference to help you choose the right size and\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2025\/cutheme-image-size-cheat-sheet\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                cutheme Image Size Cheat Sheet\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2025-09-23T20:00:00-04:00\" class=\"block italic text-sm text-cu-black-600\">\n        September 24, 2025\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Page Titles and Page Banners: What\u2019s the Difference?\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                Page titles boost SEO while banners shape design. With this update, you can now customize each separately for flexibility.\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2025\/page-titles-vs-page-banners-whats-the-difference-and-best-practices\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                Page Titles and Page Banners: What\u2019s the Difference?\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2025-05-25T20:00:00-04:00\" class=\"block italic text-sm text-cu-black-600\">\n        May 26, 2025\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        How to Add Anchors to your Webpages\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                Anchors\u2014also known as jump links or bookmarks\u2014allow users to quickly navigate to specific sections of a webpage. They\u2019re especially useful on longer pages where readers\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2025\/how-to-add-anchors-to-your-webpages\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                How to Add Anchors to your Webpages\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2024-06-17T20:00:00-04:00\" class=\"block italic text-sm text-cu-black-600\">\n        June 18, 2024\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        How to Structure Engaging News Posts in cutheme\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                Welcome to the exciting world of cutheme! If you\u2019re used to our ccms theme (in classic WordPress), you\u2019ll find that cutheme opens up a whole\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2024\/how-to-structure-engaging-news-posts-in-cutheme\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                How to Structure Engaging News Posts in cutheme\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2024-02-14T19:00:00-05:00\" class=\"block italic text-sm text-cu-black-600\">\n        February 15, 2024\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Using List View and Outline View\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                The list and outline views are helpful when navigating your webpage. To open up these views, click on the three lines at the top left.\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2024\/using-list-view-and-outline-view\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                Using List View and Outline View\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2024-02-11T19:00:00-05:00\" class=\"block italic text-sm text-cu-black-600\">\n        February 12, 2024\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        How to Wrap Text Around an Image\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                There are three simple steps that you can take to wrap text around an image. b Add an image block to your page. 2. Add\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2024\/how-to-wrap-text-around-an-image\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                How to Wrap Text Around an Image\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n            \n                    \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \n    \n        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n        <div class=\"flex flex-row w-full gap-1\">\n                        <time datetime=\"2024-02-11T19:00:00-05:00\" class=\"block italic text-sm text-cu-black-600\">\n        February 12, 2024\n    <\/time>\n\n                    <\/div>        \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Three Ways to Add a Block in cutheme\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6 dark:text-white\">\n            <p class=\"text-base text-cu-black-700 dark:text-white \">\n                There are three different ways that you can add blocks to your pages and posts in cutheme. 1. Option One: Click the + icon at\n                                    &#8230;\n                            <\/p>\n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/cutheme-docs\/2024\/three-ways-to-add-a-block-in-cutheme\/\" class=\"cu-button cu-button--red cu-button--small\">\n            Read news\n            <span class=\"sr-only\">\n                post\n                Three Ways to Add a Block in cutheme\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n                    \n        <\/div>\n        \n                                            <button aria-label=\"Load More\" class=\"loadMore cu-button not-prose cu-button--dark-grey cu-button--center \" type=\"button\">\n    <div class=\"block load-more-button\">\n        Load More\n    <\/div>\n    <div class=\"hidden no-more-posts\">\n        No more to load\n    <\/div>\n    <div class=\"items-center justify-center hidden load-more-spinner cu-pageloader\">\n    <div class=\"inline-block h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\" role=\"status\">\n        <span class=\"!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]\">\n            Loading&#8230;\n        <\/span>\n    <\/div>\n<\/div>\n<\/button>\n                    \n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"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":[],"class_list":["post-5418","page","type-page","status-publish","hentry"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/5418","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=5418"}],"version-history":[{"count":3,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/5418\/revisions"}],"predecessor-version":[{"id":5423,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/5418\/revisions\/5423"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=5418"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=5418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}