{"id":2047,"date":"2024-01-11T16:21:42","date_gmt":"2024-01-11T21:21:42","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2047"},"modified":"2024-09-18T20:31:25","modified_gmt":"2024-09-19T00:31:25","slug":"featured-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/block-library\/featured-content\/featured-cards\/","title":{"rendered":"Featured Cards"},"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                        Featured Cards\n                    <\/h1>\n                \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\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-4-homepage\/featured-cards\/\">How to: Featured Cards<\/a><\/div>\n<\/div>\n\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum urna vel quam scelerisque, sit amet hendrerit nisl facilisis. Fusce ullamcorper odio et arcu posuere pharetra. Integer nec tempus enim. Phasellus lorem mauris, condimentum non pulvinar vitae, congue vitae mauris. Praesent eu suscipit leo. Phasellus lacinia sem nec dolor rhoncus, at eleifend mauris luctus. Suspendisse at urna id est cursus faucibus sit amet mollis turpis. Sed rutrum ligula massa, a eleifend mauris accumsan.<\/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                            \n\n\n<header class=\"mb-6 cu-pageheader cu-component-updated md:mb-12\">\n    <h2 id=\"default\" class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px\">\n        Default\n    <\/h2>\n\n    <\/header>\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<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   \">\n            <figure class=\"mx-6 mt-6 mb-2 overflow-hidden max-w-[45%] @xl:md:max-w-[25%] rounded-md aspect-[4\/2.7]\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/12\/STARS.jpg\" alt=\"\" width=\"200\" height=\"133\"><\/figure>\n        \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \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        Another featured title that extends beyond one line\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Aenean commodo vehicula hendrerit. Aliquam vel dui placerat, ultrices quam vel, fermentum nibh.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/carleton.ca\/webservices\" class=\"cu-button cu-button--red cu-button--small\">\n                    External Link\n                <\/a>\n            <\/footer>\n            <\/div>\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   \">\n            <figure class=\"mx-6 mt-6 mb-2 overflow-hidden max-w-[45%] @xl:md:max-w-[25%] rounded-md aspect-[4\/2.7]\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/campfire.jpeg\" alt=\"\" width=\"200\" height=\"133\"><\/figure>\n        \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \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        Spotlight title one\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Etiam vel lacus non dui fermentum elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus.\n                <\/p>\n            <\/div>\n        \n            <\/div>\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   \">\n            <figure class=\"mx-6 mt-6 mb-2 overflow-hidden max-w-[45%] @xl:md:max-w-[25%] rounded-md aspect-[4\/2.7]\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/library.jpeg\" alt=\"\" width=\"200\" height=\"133\"><\/figure>\n        \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \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        Phasellus vehicula hendrerit quam non ullamcorper\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Curabitur quis pellentesque.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/carleton.ca\/dev\/stacked-lists\/news-listings\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Internal Link\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n\n\n\n<p>Etiam vel lacus non dui fermentum elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tincidunt risus quis velit rutrum, nec interdum nisi convallis. Phasellus malesuada vitae mauris nec sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam suscipit sagittis risus, id mattis enim aliquet id. Curabitur quis pellentesque erat. Curabitur sed risus vestibulum, porta dui et, euismod risus. Aenean commodo vehicula hendrerit.<\/p>\n\n\n    \n<section class=\"w-screen px-6 cu-section cu-section--grey ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl bg-cu-black-50 max-w-screen-2xl mx-auto rounded-xl px-6 py-5 md:px-14 md:py-12 md:space-y-10 cu-prose-first-last\">\n\n                            \n\n\n<header class=\"mb-6 cu-pageheader cu-component-updated md:mb-12\">\n    <h2 id=\"default-with-grey-background\" class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px\">\n        Default with Grey Background\n    <\/h2>\n\n    <\/header>\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<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   \">\n            <figure class=\"mx-6 mt-6 mb-2 overflow-hidden max-w-[45%] @xl:md:max-w-[25%] rounded-md aspect-[4\/2.7]\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/campfire.jpeg\" alt=\"\" width=\"200\" height=\"133\"><\/figure>\n        \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \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        Spotlight title one\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Etiam vel lacus non dui fermentum elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus.\n                <\/p>\n            <\/div>\n        \n            <\/div>\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   \">\n            <figure class=\"mx-6 mt-6 mb-2 overflow-hidden max-w-[45%] @xl:md:max-w-[25%] rounded-md aspect-[4\/2.7]\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/library.jpeg\" alt=\"\" width=\"200\" height=\"133\"><\/figure>\n        \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \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        Phasellus vehicula hendrerit quam non ullamcorper\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Curabitur quis pellentesque erat.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/carleton.ca\/dev\/stacked-lists\/news-listings\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Internal Link\n                <\/a>\n            <\/footer>\n            <\/div>\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   \">\n    \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \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        Another featured title that extends beyond one line\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Aenean commodo vehicula hendrerit. Aliquam vel dui placerat, ultrices quam vel, fermentum nibh.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/carleton.ca\/webservices\" class=\"cu-button cu-button--red cu-button--small\">\n                    External Link\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n\n\n\n<p>In varius ipsum non odio facilisis, quis porttitor ligula convallis. In hac habitasse platea dictumst. Cras vel nulla sem. Aliquam in molestie nisl, vitae eleifend nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque euismod lectus imperdiet metus auctor condimentum. Duis felis dolor, feugiat a porttitor nec, pretium nec turpis. Nunc fringilla mi tortor, id ultricies arcu consectetur vitae. Donec sagittis vel ligula id elementum.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum urna vel quam scelerisque, sit amet hendrerit nisl facilisis. Fusce ullamcorper odio et arcu posuere pharetra. Integer nec tempus enim. Phasellus lorem mauris, condimentum non pulvinar vitae, congue vitae mauris. Praesent eu suscipit leo. Phasellus lacinia sem nec dolor rhoncus, at eleifend mauris luctus. Suspendisse [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":2328,"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-2047","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\/2047","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=2047"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2047\/revisions"}],"predecessor-version":[{"id":4270,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2047\/revisions\/4270"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2328"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=2047"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}