{"id":2126,"date":"2024-01-15T14:13:02","date_gmt":"2024-01-15T19:13:02","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2126"},"modified":"2024-09-18T20:31:24","modified_gmt":"2024-09-19T00:31:24","slug":"icon-cards","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/block-library\/featured-content\/icon-cards\/","title":{"rendered":"Icon 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                        Icon 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\/mastery\/module-3-featured-content-blocks\/icon-cards\/\">How to: Icon 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. Vivamus sed venenatis nibh, quis laoreet mauris. Donec iaculis commodo fermentum. Phasellus id felis eleifend, dignissim turpis in, facilisis metus. Cras luctus vehicula nisi, hendrerit tempus lacus rhoncus sit amet. Etiam molestie tempor consectetur. Nam nulla lectus, congue id egestas in, dictum vitae sem. Cras finibus suscipit felis, nec tempor justo sollicitudin dignissim.<\/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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M256 480C132.3 480 32 379.7 32 256c0-11.8 .9-23.3 2.7-34.6l3 6.7c9.3 21 27.3 37 49.2 43.9l63 19.7c15.5 4.9 26.1 19.2 26.1 35.5v15c0 17 9.6 32.6 24.8 40.2c4.4 2.2 7.2 6.7 7.2 11.6v22.7c0 26.2 21.2 47.4 47.4 47.4c21.8 0 40.7-14.8 46-35.9l4.4-17.6c2.6-10.2 9.2-19 18.3-24.2l11.6-6.6c19.9-11.4 32.2-32.6 32.2-55.6v-8.3c0-17-6.7-33.3-18.7-45.3l-3.9-3.9c-12-12-28.3-18.7-45.3-18.7H251.3c-5 0-9.9-1.2-14.3-3.4l-45.9-22.9c-2.1-1-3.8-2.7-4.8-4.8l-.7-1.4c-2.3-4.6-.4-10.2 4.2-12.5c2.2-1.1 4.8-1.3 7.1-.5l24.2 8.1c15 5 31.5-.7 40.3-13.8c8.6-12.9 7.7-30-2.2-41.9l-17.9-21.5c-2.5-3-2.5-7.4 .1-10.3l20.1-23.5c13.2-15.4 15.3-37.4 5.2-55.1L259.6 32C337.1 33.2 405 73.8 444.3 134.6l-38.2 15.3c-23.6 9.4-35.7 35.6-27.7 59.7l16.9 50.7c5.2 15.6 18 27.4 33.9 31.4L475 303.2C453.3 404.3 363.5 480 256 480zM48 172.7C77.3 99.7 143.8 45.7 224 34.3l14.9 26.1c3.4 5.9 2.7 13.2-1.7 18.4l-20.1 23.5c-12.7 14.8-12.9 36.6-.4 51.6l17.9 21.5c.9 1.1 1 2.6 .2 3.7c-.8 1.2-2.2 1.7-3.6 1.2L207 172.1c-10.4-3.5-21.7-2.7-31.5 2.2c-20.4 10.2-28.7 35-18.5 55.4l.7 1.4c4.1 8.3 10.9 15 19.2 19.2l45.9 22.9c8.9 4.4 18.7 6.8 28.6 6.8h48.8c8.5 0 16.6 3.4 22.6 9.4l3.9 3.9c6 6 9.4 14.1 9.4 22.6v8.3c0 11.5-6.2 22.1-16.1 27.8l-11.6 6.6c-16.7 9.6-28.8 25.5-33.5 44.2l-4.4 17.6c-1.7 6.9-7.9 11.7-15 11.7c-8.5 0-15.4-6.9-15.4-15.4V393.9c0-17-9.6-32.6-24.8-40.2c-4.4-2.2-7.2-6.7-7.2-11.6v-15c0-30.3-19.7-57-48.6-66.1l-63-19.7c-13.2-4.1-23.9-13.7-29.5-26.3L48 172.7zM480 256c0 5.2-.2 10.3-.5 15.4l-42.6-10.6c-5.3-1.3-9.6-5.3-11.3-10.5l-16.9-50.7c-2.7-8 1.4-16.8 9.2-19.9l41.8-16.7c13 28.3 20.2 59.9 20.2 93.1zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z\"\/><\/svg>\n                <\/span>\n            <\/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        This is the card title\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 id hendrerit sem. Nullam pharetra eros cursus, pulvinar tortor eget, rhoncus metus. Maecenas a metus feugiat.\n            <\/p>\n        <\/div>\n    \n                    \n        <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n            <a  href=\"#\" class=\"cu-button cu-button--red cu-button--small\">\n                More info\n            <\/a>\n        <\/footer>\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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 576 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M512 64c17.7 0 32 14.3 32 32V416c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32H512zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm96 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm96 0a64 64 0 1 0 -128 0 64 64 0 1 0 128 0zM112 368c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48c0 8.8 7.2 16 16 16s16-7.2 16-16c0-44.2-35.8-80-80-80H160c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16s16-7.2 16-16zM352 160c-8.8 0-16 7.2-16 16s7.2 16 16 16H480c8.8 0 16-7.2 16-16s-7.2-16-16-16H352zm0 64c-8.8 0-16 7.2-16 16s7.2 16 16 16H480c8.8 0 16-7.2 16-16s-7.2-16-16-16H352zm0 64c-8.8 0-16 7.2-16 16s7.2 16 16 16H480c8.8 0 16-7.2 16-16s-7.2-16-16-16H352z\"\/><\/svg>\n                <\/span>\n            <\/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        Curabitur id hendrerit sem. Nullam pharetra eros cursus\n    <\/h2>\n\n            <\/header>\n\n    \n    \n                    \n        <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n            <a  href=\"#\" class=\"cu-button cu-button--red cu-button--small\">\n                Internal Link\n            <\/a>\n        <\/footer>\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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M32.6 271.6C41 155.5 137.8 64 256 64s215 91.5 223.4 207.6C466.1 261.8 449.7 256 432 256c-26.5 0-48 21.5-48 48V432c0 26.5 21.5 48 48 48c44.2 0 80-35.8 80-80V368 336 288C512 146.6 397.4 32 256 32S0 146.6 0 288v48 32 32c0 44.2 35.8 80 80 80c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48c-17.7 0-34.1 5.8-47.4 15.6zM32 336c0-26.5 21.5-48 48-48c8.8 0 16 7.2 16 16V432c0 8.8-7.2 16-16 16c-26.5 0-48-21.5-48-48V368 336zm448 0v32 32c0 26.5-21.5 48-48 48c-8.8 0-16-7.2-16-16V304c0-8.8 7.2-16 16-16c26.5 0 48 21.5 48 48z\"\/><\/svg>\n                <\/span>\n            <\/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        And a third card item\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                Nullam pharetra eros cursus, pulvinar tortor eget, rhoncus.\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    \n<\/div>\n\n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n\n\n\n<p>Fusce in tellus mi. Aliquam condimentum ipsum quis commodo faucibus. In fermentum nunc eget lobortis auctor. Quisque eu erat nec ligula condimentum congue. Mauris mauris massa, pellentesque eget semper sed, feugiat at metus. Nunc pretium dapibus auctor. Praesent non diam nisi. Nulla mattis ipsum dui, nec congue dolor aliquam vitae. Maecenas nibh velit, pharetra quis ex rhoncus, fermentum pretium orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed venenatis nibh, quis laoreet mauris. Donec iaculis commodo fermentum. Phasellus id felis eleifend, dignissim turpis in, facilisis metus.<\/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-2-column\" 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: 2-Column\n    <\/h2>\n\n    <\/header>\n        \n        <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-2 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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M256 480C132.3 480 32 379.7 32 256c0-11.8 .9-23.3 2.7-34.6l3 6.7c9.3 21 27.3 37 49.2 43.9l63 19.7c15.5 4.9 26.1 19.2 26.1 35.5v15c0 17 9.6 32.6 24.8 40.2c4.4 2.2 7.2 6.7 7.2 11.6v22.7c0 26.2 21.2 47.4 47.4 47.4c21.8 0 40.7-14.8 46-35.9l4.4-17.6c2.6-10.2 9.2-19 18.3-24.2l11.6-6.6c19.9-11.4 32.2-32.6 32.2-55.6v-8.3c0-17-6.7-33.3-18.7-45.3l-3.9-3.9c-12-12-28.3-18.7-45.3-18.7H251.3c-5 0-9.9-1.2-14.3-3.4l-45.9-22.9c-2.1-1-3.8-2.7-4.8-4.8l-.7-1.4c-2.3-4.6-.4-10.2 4.2-12.5c2.2-1.1 4.8-1.3 7.1-.5l24.2 8.1c15 5 31.5-.7 40.3-13.8c8.6-12.9 7.7-30-2.2-41.9l-17.9-21.5c-2.5-3-2.5-7.4 .1-10.3l20.1-23.5c13.2-15.4 15.3-37.4 5.2-55.1L259.6 32C337.1 33.2 405 73.8 444.3 134.6l-38.2 15.3c-23.6 9.4-35.7 35.6-27.7 59.7l16.9 50.7c5.2 15.6 18 27.4 33.9 31.4L475 303.2C453.3 404.3 363.5 480 256 480zM48 172.7C77.3 99.7 143.8 45.7 224 34.3l14.9 26.1c3.4 5.9 2.7 13.2-1.7 18.4l-20.1 23.5c-12.7 14.8-12.9 36.6-.4 51.6l17.9 21.5c.9 1.1 1 2.6 .2 3.7c-.8 1.2-2.2 1.7-3.6 1.2L207 172.1c-10.4-3.5-21.7-2.7-31.5 2.2c-20.4 10.2-28.7 35-18.5 55.4l.7 1.4c4.1 8.3 10.9 15 19.2 19.2l45.9 22.9c8.9 4.4 18.7 6.8 28.6 6.8h48.8c8.5 0 16.6 3.4 22.6 9.4l3.9 3.9c6 6 9.4 14.1 9.4 22.6v8.3c0 11.5-6.2 22.1-16.1 27.8l-11.6 6.6c-16.7 9.6-28.8 25.5-33.5 44.2l-4.4 17.6c-1.7 6.9-7.9 11.7-15 11.7c-8.5 0-15.4-6.9-15.4-15.4V393.9c0-17-9.6-32.6-24.8-40.2c-4.4-2.2-7.2-6.7-7.2-11.6v-15c0-30.3-19.7-57-48.6-66.1l-63-19.7c-13.2-4.1-23.9-13.7-29.5-26.3L48 172.7zM480 256c0 5.2-.2 10.3-.5 15.4l-42.6-10.6c-5.3-1.3-9.6-5.3-11.3-10.5l-16.9-50.7c-2.7-8 1.4-16.8 9.2-19.9l41.8-16.7c13 28.3 20.2 59.9 20.2 93.1zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z\"\/><\/svg>\n                <\/span>\n            <\/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        This is the card title\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 id hendrerit sem. Nullam pharetra eros cursus, pulvinar tortor eget, rhoncus metus. Maecenas a metus feugiat.\n            <\/p>\n        <\/div>\n    \n                    \n        <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n            <a  href=\"#\" class=\"cu-button cu-button--red cu-button--small\">\n                More info\n            <\/a>\n        <\/footer>\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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 576 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M512 64c17.7 0 32 14.3 32 32V416c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32H512zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm96 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm96 0a64 64 0 1 0 -128 0 64 64 0 1 0 128 0zM112 368c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48c0 8.8 7.2 16 16 16s16-7.2 16-16c0-44.2-35.8-80-80-80H160c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16s16-7.2 16-16zM352 160c-8.8 0-16 7.2-16 16s7.2 16 16 16H480c8.8 0 16-7.2 16-16s-7.2-16-16-16H352zm0 64c-8.8 0-16 7.2-16 16s7.2 16 16 16H480c8.8 0 16-7.2 16-16s-7.2-16-16-16H352zm0 64c-8.8 0-16 7.2-16 16s7.2 16 16 16H480c8.8 0 16-7.2 16-16s-7.2-16-16-16H352z\"\/><\/svg>\n                <\/span>\n            <\/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        Curabitur id hendrerit sem. Nullam pharetra eros cursus\n    <\/h2>\n\n            <\/header>\n\n    \n    \n                    \n        <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n            <a  href=\"#\" class=\"cu-button cu-button--red cu-button--small\">\n                Internal Link\n            <\/a>\n        <\/footer>\n    \n<\/div>\n\n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n\n\n\n<p>Fusce in tellus mi. Aliquam condimentum ipsum quis commodo faucibus. In fermentum nunc eget lobortis auctor. Quisque eu erat nec ligula condimentum congue. Mauris mauris massa, pellentesque eget semper sed, feugiat at metus. Nunc pretium dapibus auctor. Praesent non diam nisi. Nulla mattis ipsum dui, nec congue dolor aliquam vitae. Maecenas nibh velit, pharetra quis ex rhoncus, fermentum pretium orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed venenatis nibh, quis laoreet mauris. Donec iaculis commodo fermentum. Phasellus id felis eleifend, dignissim turpis in, facilisis metus.<\/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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"\/><\/svg>\n                <\/span>\n            <\/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        This is the card title\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 id hendrerit sem. Nullam pharetra eros cursus, pulvinar tortor eget, rhoncus metus. Maecenas a metus feugiat.\n            <\/p>\n        <\/div>\n    \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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M32 48c0-8.8-7.2-16-16-16S0 39.2 0 48V400c0 44.2 35.8 80 80 80H496c8.8 0 16-7.2 16-16s-7.2-16-16-16H80c-26.5 0-48-21.5-48-48V48zm288 96c0 8.8 7.2 16 16 16h89.4L320 265.4l-84.7-84.7c-6.2-6.2-16.4-6.2-22.6 0l-112 112c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L224 214.6l84.7 84.7c6.2 6.2 16.4 6.2 22.6 0L448 182.6V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z\"\/><\/svg>\n                <\/span>\n            <\/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        Curabitur id hendrerit sem. Nullam pharetra eros cursus\n    <\/h2>\n\n            <\/header>\n\n    \n    \n                    \n        <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n            <a  href=\"https:\/\/carleton.ca\/dev\/card-grid\/\" class=\"cu-button cu-button--red cu-button--small\">\n                Internal Link\n            <\/a>\n        <\/footer>\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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M32.6 271.6C41 155.5 137.8 64 256 64s215 91.5 223.4 207.6C466.1 261.8 449.7 256 432 256c-26.5 0-48 21.5-48 48V432c0 26.5 21.5 48 48 48c44.2 0 80-35.8 80-80V368 336 288C512 146.6 397.4 32 256 32S0 146.6 0 288v48 32 32c0 44.2 35.8 80 80 80c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48c-17.7 0-34.1 5.8-47.4 15.6zM32 336c0-26.5 21.5-48 48-48c8.8 0 16 7.2 16 16V432c0 8.8-7.2 16-16 16c-26.5 0-48-21.5-48-48V368 336zm448 0v32 32c0 26.5-21.5 48-48 48c-8.8 0-16-7.2-16-16V304c0-8.8 7.2-16 16-16c26.5 0 48 21.5 48 48z\"\/><\/svg>\n                <\/span>\n            <\/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        And a third card item\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                Nullam pharetra eros cursus, pulvinar tortor eget, rhoncus.\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    \n<\/div>\n\n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n\n\n\n<p>Fusce in tellus mi. Aliquam condimentum ipsum quis commodo faucibus. In fermentum nunc eget lobortis auctor. Quisque eu erat nec ligula condimentum congue. Mauris mauris massa, pellentesque eget semper sed, feugiat at metus. Nunc pretium dapibus auctor. Praesent non diam nisi. Nulla mattis ipsum dui, nec congue dolor aliquam vitae. Maecenas nibh velit, pharetra quis ex rhoncus, fermentum pretium orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed venenatis nibh, quis laoreet mauris. Donec iaculis commodo fermentum. Phasellus id felis eleifend, dignissim turpis in, facilisis metus.<\/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-2-column\" 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, 2-Column\n    <\/h2>\n\n    <\/header>\n        \n        <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-2 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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"\/><\/svg>\n                <\/span>\n            <\/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        This is the card title\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 id hendrerit sem. Nullam pharetra eros cursus, pulvinar tortor eget, rhoncus metus. Maecenas a metus feugiat.\n            <\/p>\n        <\/div>\n    \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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M32 48c0-8.8-7.2-16-16-16S0 39.2 0 48V400c0 44.2 35.8 80 80 80H496c8.8 0 16-7.2 16-16s-7.2-16-16-16H80c-26.5 0-48-21.5-48-48V48zm288 96c0 8.8 7.2 16 16 16h89.4L320 265.4l-84.7-84.7c-6.2-6.2-16.4-6.2-22.6 0l-112 112c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L224 214.6l84.7 84.7c6.2 6.2 16.4 6.2 22.6 0L448 182.6V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z\"\/><\/svg>\n                <\/span>\n            <\/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        Curabitur id hendrerit sem. Nullam pharetra eros cursus\n    <\/h2>\n\n            <\/header>\n\n    \n    \n                    \n        <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n            <a  href=\"https:\/\/carleton.ca\/dev\/card-grid\/\" class=\"cu-button cu-button--red cu-button--small\">\n                Internal Link\n            <\/a>\n        <\/footer>\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   group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n                        <figure class=\"flex items-center justify-center w-12 h-12 mx-6 mt-5 mb-1.5 overflow-hidden\">\n                <span class=\"cu-icon cu-icon-thumb\" style=\"width: 48px; height: 48px; display: inline-block;\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M32.6 271.6C41 155.5 137.8 64 256 64s215 91.5 223.4 207.6C466.1 261.8 449.7 256 432 256c-26.5 0-48 21.5-48 48V432c0 26.5 21.5 48 48 48c44.2 0 80-35.8 80-80V368 336 288C512 146.6 397.4 32 256 32S0 146.6 0 288v48 32 32c0 44.2 35.8 80 80 80c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48c-17.7 0-34.1 5.8-47.4 15.6zM32 336c0-26.5 21.5-48 48-48c8.8 0 16 7.2 16 16V432c0 8.8-7.2 16-16 16c-26.5 0-48-21.5-48-48V368 336zm448 0v32 32c0 26.5-21.5 48-48 48c-8.8 0-16-7.2-16-16V304c0-8.8 7.2-16 16-16c26.5 0 48 21.5 48 48z\"\/><\/svg>\n                <\/span>\n            <\/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        And a third card item\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                Nullam pharetra eros cursus, pulvinar tortor eget, rhoncus.\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    \n<\/div>\n\n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n\n\n\n<p>Cras a hendrerit orci, non efficitur libero. Ut interdum leo a leo egestas, sed ullamcorper libero sodales. Nulla malesuada quam at quam vestibulum, ut pulvinar lorem volutpat. Nulla eu dignissim odio. Phasellus et ligula elementum, pellentesque felis eget, molestie ipsum. Nunc et velit eu nulla ullamcorper aliquam. Sed vitae metus sed leo tincidunt congue. Curabitur id hendrerit sem. Nullam pharetra eros cursus, pulvinar tortor eget, rhoncus metus. Maecenas a metus feugiat nisl accumsan pulvinar. Pellentesque posuere pretium ligula, a finibus nunc tempus sed. Maecenas varius urna nec ultricies ultrices. Suspendisse pharetra dignissim turpis ut consequat.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed venenatis nibh, quis laoreet mauris. Donec iaculis commodo fermentum. Phasellus id felis eleifend, dignissim turpis in, facilisis metus. Cras luctus vehicula nisi, hendrerit tempus lacus rhoncus sit amet. Etiam molestie tempor consectetur. Nam nulla lectus, congue id egestas in, dictum vitae sem. Cras finibus suscipit [&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-2126","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\/2126","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=2126"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2126\/revisions"}],"predecessor-version":[{"id":4266,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2126\/revisions\/4266"}],"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=2126"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}