{"id":466,"date":"2023-11-06T12:16:11","date_gmt":"2023-11-06T17:16:11","guid":{"rendered":"https:\/\/carleton.ca\/cutheme\/?page_id=466"},"modified":"2024-09-20T10:23:55","modified_gmt":"2024-09-20T14:23:55","slug":"wide-image","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/block-library\/image-blocks\/wide-image\/","title":{"rendered":"Wide Image"},"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                        Wide Image\n                    <\/h1>\n                \n                                \n                                    \n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-dark-grey is-style-dark-grey--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/basic-image-blocks\/wide-image\/\">How to: Wide Image<\/a><\/div>\n<\/div>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\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-7xl  md:space-y-10 cu-prose-first-last\">\n\n        \n                    \n                    \n            \n    <div class=\"cu-wideimage relative flex items-center justify-center mx-auto px-8 overflow-hidden md:px-16 rounded-xl not-prose  my-6 md:my-12 first:mt-0 bg-opacity-50 bg-cover bg-cu-black-50 py-24 md:py-28 lg:py-36 xl:py-48\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/mountains.jpg); background-position: 50% 50%;\">\n\n                    <div class=\"absolute top-0 w-full h-screen\" style=\"background-color:rgba(0,0,0,0.50);\"><\/div>\n        \n        <div class=\"relative z-[2] max-w-4xl w-full flex flex-col items-center gap-2 cu-wideimage-image cu-zero-first-last\">\n            <header class=\"mx-auto mb-6 text-center text-white cu-pageheader cu-component-updated cu-pageheader--center md:mb-12\">\n\n                                    <h2 class=\"cu-prose-first-last font-semibold mb-2 text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] cu-pageheader--center text-center mx-auto after:left-px\">\n                        Use Wide Block\n                    <\/h2>\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=\"#\">Button 1<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-light-grey is-style-light-grey--2\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Button 2<\/a><\/div>\n<\/div>\n\n\n                            <\/header>\n        <\/div>\n\n            <\/div>\n\n    \n\n    <\/div>\n<\/section>\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-7xl  md:space-y-10 cu-prose-first-last\">\n\n        \n        \n        \n            \n    <div class=\"cu-wideimage relative flex items-center justify-center mx-auto px-8 overflow-hidden md:px-16 rounded-xl not-prose  my-6 md:my-12 first:mt-0 bg-cu-black-50 pt-10 pb-12\" style=\"\">\n\n        \n        <div class=\"relative z-[2] max-w-4xl w-full flex flex-col items-center gap-2 cu-wideimage-image cu-zero-first-last\">\n            <header class=\"mx-auto mb-6 text-center text-cu-black-800 cu-pageheader cu-component-updated cu-pageheader--center md:mb-12\">\n\n                                    <h2 class=\"cu-prose-first-last font-semibold mb-2 text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] cu-pageheader--center text-center mx-auto after:left-px\">\n                        Wide No Image\n                    <\/h2>\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=\"#\">Button 1<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-dark-grey is-style-dark-grey--3\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Button 2<\/a><\/div>\n<\/div>\n\n\n\n<p>Description ÐÓ°ÉÔ­´´ a Wide Image<\/p>\n\n\n                            <\/header>\n        <\/div>\n\n            <\/div>\n\n    \n\n    <\/div>\n<\/section>\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-7xl  md:space-y-10 cu-prose-first-last\">\n\n        \n                    \n                    \n            \n    <div class=\"cu-wideimage relative flex items-center justify-center mx-auto px-8 overflow-hidden md:px-16 rounded-xl not-prose  my-6 md:my-12 first:mt-0 bg-opacity-50 bg-cover bg-cu-black-50 py-24 md:py-28 lg:py-36 xl:py-48\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/cupcake-scaled.jpeg); background-position: 35% 14%;\">\n\n                    <div class=\"absolute top-0 w-full h-screen\" style=\"background-color:rgba(0,0,0,0.40);\"><\/div>\n        \n        <div class=\"relative z-[2] max-w-4xl w-full flex flex-col items-center gap-2 cu-wideimage-image cu-zero-first-last\">\n            <header class=\"mx-auto mb-6 text-center text-white cu-pageheader cu-component-updated cu-pageheader--center md:mb-12\">\n\n                                    <h2 class=\"cu-prose-first-last font-semibold mb-2 text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] cu-pageheader--center text-center mx-auto after:left-px\">\n                        Width Block\n                    <\/h2>\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=\"#\">Button 1<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-dark-grey is-style-dark-grey--4\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Button 2<\/a><\/div>\n<\/div>\n\n\n                            <\/header>\n        <\/div>\n\n            <\/div>\n\n    \n\n    <\/div>\n<\/section>\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                    \n            \n    <div class=\"cu-wideimage relative flex items-center justify-center mx-auto px-8 overflow-hidden md:px-16 rounded-xl not-prose  my-6 md:my-12 first:mt-0 bg-opacity-50 bg-cover bg-cu-black-50 py-24 md:py-28 lg:py-36 xl:py-48\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/mountains.jpg); background-position: 46% 55%;\">\n\n                    <div class=\"absolute top-0 w-full h-screen\" style=\"background-color:rgba(0,0,0,0.600);\"><\/div>\n        \n        <div class=\"relative z-[2] max-w-4xl w-full flex flex-col items-center gap-2 cu-wideimage-image cu-zero-first-last\">\n            <header class=\"mx-auto mb-6 text-center text-white cu-pageheader cu-component-updated cu-pageheader--center md:mb-12\">\n\n                                    <h2 class=\"cu-prose-first-last font-semibold mb-2 text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] cu-pageheader--center text-center mx-auto after:left-px\">\n                        Wide Image\n                    <\/h2>\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=\"#\">Button 1<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-dark-grey is-style-dark-grey--5\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Button 2<\/a><\/div>\n<\/div>\n\n\n                            <\/header>\n        <\/div>\n\n            <\/div>\n\n    \n\n    <\/div>\n<\/section>\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-7xl  md:space-y-10 cu-prose-first-last\">\n\n        \n                    \n                    \n            \n    <div class=\"cu-wideimage relative flex items-center justify-center mx-auto px-8 overflow-hidden md:px-16 rounded-xl not-prose  my-6 md:my-12 first:mt-0 bg-opacity-50 bg-cover bg-cu-black-50 py-24 md:py-28 lg:py-36 xl:py-48\" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/sunset.jpg); background-position: 51% 60%;\">\n\n                    <div class=\"absolute top-0 w-full h-screen\" style=\"background-color:rgba(0,0,0,0.70);\"><\/div>\n        \n        <div class=\"relative z-[2] max-w-4xl w-full flex flex-col items-center gap-2 cu-wideimage-image cu-zero-first-last\">\n            <header class=\"mx-auto mb-6 text-center text-white cu-pageheader cu-component-updated cu-pageheader--center md:mb-12\">\n\n                                    <h2 class=\"cu-prose-first-last font-semibold mb-2 text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] cu-pageheader--center text-center mx-auto after:left-px\">\n                        Wide Image\n                    <\/h2>\n                \n                                    \n\n<p>Add some content or a subtitle<\/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=\"#\">Button 1<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-dark-grey is-style-dark-grey--6\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Button 2<\/a><\/div>\n<\/div>\n\n\n                            <\/header>\n        <\/div>\n\n            <\/div>\n\n    \n\n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":2319,"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-466","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\/466","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=466"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/466\/revisions"}],"predecessor-version":[{"id":4374,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/466\/revisions\/4374"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2319"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}