{"id":462,"date":"2023-11-06T08:17:27","date_gmt":"2023-11-06T13:17:27","guid":{"rendered":"https:\/\/carleton.ca\/cutheme\/?page_id=462"},"modified":"2024-09-18T20:31:28","modified_gmt":"2024-09-19T00:31:28","slug":"text-image","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/block-library\/image-blocks\/text-image\/","title":{"rendered":"Text &#038; 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                        Text &#038; Image\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Use this block to format text and images. Can be used as a top-page banner or in-page content.<\/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 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-essential-text-blocks\/basic-image-blocks\/text-image\/\">How to: Text &amp; Image<\/a><\/div>\n<\/div>\n\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-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 60%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h2 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-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 text-cu-black-700 not-prose\">\n                        Image Right\n                    <\/h2>\n                \n                                \n                            <\/header>\n\n                            \n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt elit sit amet vestibulum pretium. Aliquam sollicitudin lorem a tempor cursus. Nunc rutrum porttitor justo. Suspendisse sagittis massa id orci tristique ornare. In hac habitasse platea dictumst. Nulla at placerat metus. Sed tempus tortor ac massa suscipit varius.<\/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-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\n                    <\/div>\n\n                    <div class=\"cu-textmedia-bgimg flex-1 rounded-xl bg-no-repeat bg-cover \" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/cupcake-scaled.jpeg); background-position: 8% 10%; transform: scale(1);\"><\/div>\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt elit sit amet vestibulum pretium. Aliquam sollicitudin lorem a tempor cursus. Nunc rutrum porttitor justo. Suspendisse sagittis massa id orci tristique ornare. In hac habitasse platea dictumst. Nulla at placerat metus. Sed tempus tortor ac massa suscipit varius.<\/p>\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            <div class=\"cu-textmedia flex flex-col lg:flex-row-reverse 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 60%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h2 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-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 text-cu-black-700 not-prose\">\n                        Image Left\n                    <\/h2>\n                \n                                \n                            <\/header>\n\n                            \n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt elit sit amet vestibulum pretium. Aliquam sollicitudin lorem a tempor cursus. Nunc rutrum porttitor justo. Suspendisse sagittis massa id orci tristique ornare.<\/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-light-grey is-style-light-grey--3\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Button 2<\/a><\/div>\n<\/div>\n\n\n\n                    <\/div>\n\n                    <div class=\"cu-textmedia-bgimg flex-1 rounded-xl bg-no-repeat bg-cover \" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/cupcake-scaled.jpeg); background-position: 0% 31%; transform: scale(1);\"><\/div>\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Curabitur consectetur faucibus imperdiet. Quisque et pulvinar neque. Cras blandit sed nunc sed convallis. Mauris non convallis sem. Curabitur risus mi, rhoncus sed turpis in, mattis venenatis tellus. Praesent et iaculis mauris. Cras pharetra nunc erat, vel convallis risus blandit eu. Vivamus posuere, ante in sagittis suscipit, risus nunc viverra dolor, et pellentesque massa tortor quis ante. Vestibulum fermentum nibh justo, nec facilisis ligula interdum eget. Donec et lacinia ex. Cras mattis massa non risus consequat, sed vehicula velit mollis. Proin nec consectetur lectus. Quisque rutrum sapien dictum tristique dapibus. Nulla ut vulputate ipsum, sit amet viverra lacus. Aliquam erat volutpat.<\/p>\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            <div class=\"cu-textmedia flex flex-col lg:flex-row-reverse 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 40%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h2 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-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 text-cu-black-700 not-prose\">\n                        Larger Image Column\n                    <\/h2>\n                \n                                \n                            <\/header>\n\n                            \n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt elit sit amet vestibulum pretium. Aliquam sollicitudin lorem a tempor cursus. Nunc rutrum porttitor justo. Suspendisse sagittis massa id orci tristique ornare.<\/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-light-grey is-style-light-grey--4\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Button 2<\/a><\/div>\n<\/div>\n\n\n\n                    <\/div>\n\n                    <div class=\"cu-textmedia-bgimg flex-1 rounded-xl bg-no-repeat bg-cover \" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/cupcake-scaled.jpeg); background-position: 12% 23%; transform: scale(1);\"><\/div>\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Nunc vitae dignissim enim, eget iaculis felis. Aliquam eu vulputate justo. Maecenas eget mauris ac eros lacinia imperdiet feugiat nec arcu. Morbi lacus dolor, iaculis nec vestibulum eget, semper sed risus. Donec tincidunt lectus ut dui porttitor vehicula. Duis hendrerit eu ex sit amet semper. Sed semper justo non leo elementum venenatis imperdiet sit amet turpis. Ut ipsum diam, vulputate nec eros a, suscipit laoreet eros. Morbi in tempus magna, vel finibus lacus. Nulla sodales tincidunt nulla blandit congue.<\/p>\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            <div class=\"cu-textmedia flex flex-col lg:flex-row-reverse mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-7xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 60%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h2 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-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 text-cu-black-700 not-prose\">\n                        Wide Block\n                    <\/h2>\n                \n                                \n                            <\/header>\n\n                            \n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt elit sit amet vestibulum pretium. Aliquam sollicitudin lorem a tempor cursus. Nunc rutrum porttitor justo. Suspendisse sagittis massa id orci tristique ornare.<\/p>\n\n\n\n<p>Cras pharetra nunc erat, vel convallis risus blandit eu. Vivamus posuere, ante in sagittis suscipit, risus nunc viverra dolor, et pellentesque massa tortor quis ante. Vestibulum fermentum nibh justo, nec facilisis ligula interdum eget. <\/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-light-grey is-style-light-grey--5\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Button 2<\/a><\/div>\n<\/div>\n\n\n\n                    <\/div>\n\n                    <div class=\"cu-textmedia-bgimg flex-1 rounded-xl bg-no-repeat bg-cover \" style=\"background-image: url(https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/02\/cupcake-scaled.jpeg); background-position: 0% 31%; transform: scale(1);\"><\/div>\n            <\/div>\n\n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt elit sit amet vestibulum pretium. Aliquam sollicitudin lorem a tempor cursus. Nunc rutrum porttitor justo. Suspendisse sagittis massa id orci tristique ornare. In hac habitasse platea dictumst. Nulla at placerat metus. Sed tempus tortor ac massa suscipit varius. Curabitur consectetur faucibus imperdiet. Quisque et pulvinar [&hellip;]<\/p>\n","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-462","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\/462","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=462"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/462\/revisions"}],"predecessor-version":[{"id":4289,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/462\/revisions\/4289"}],"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=462"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}