{"id":4527,"date":"2024-12-18T14:43:14","date_gmt":"2024-12-18T19:43:14","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=4527"},"modified":"2024-12-18T14:43:16","modified_gmt":"2024-12-18T19:43:16","slug":"timeline-block","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/block-library\/design-blocks\/timeline-block\/","title":{"rendered":"Timeline Block"},"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                        Timeline Block\n                    <\/h1>\n                \n                                \n                                    \n\n<p>The Timeline Block lets you organize content along a vertical timeline, displaying dates on the left and titles, text, and optional buttons on the right for a visually engaging chronological layout.<\/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=\"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-2-design-block-mastery\/timeline-block\/\">How to: Timeline Block<\/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-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n            <div class=\"relative cu-timeline cu-component\">\n            \n<div class=\"flex flex-col border-l border-solid cu-timeline-item md:gap-10 md:flex-row border-cu-black-100 md:border-none\">\n            <div class=\"flex-none w-full max-w-60 md:text-right md:border-r md:border-cu-black-100 md:border-solid\">\n            <p class=\"relative pl-6 mt-4 text-base italic cu-timeline-aside not-prose md:mt-0 md:py-6 text-cu-black-500 md:pr-10 md:pl-0\">\n                January 15, 2020\n            <\/p>\n        <\/div>\n    \n    <div class=\"cu-prose cu-prose-dark cu-prose-first-last flex-1 mt-5 lg:mt-3.5 pb-10 pl-6 md:pl-0\">\n        <header class=\"cu-pageheader cu-component cu-prose-first-last \">\n            <h2 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 text-xl md:text-2xl lg:text-3xl lg:leading-[2.5rem]   after:left-px\">\n                Program Inception\n            <\/h2>\n        <\/header>\n        \n\n<p>Our program was officially launched, focusing on community engagement and educational excellence.<\/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=\"#\">Learn more<\/a><\/div>\n<\/div>\n\n\n    <\/div>\n<\/div>\n\n\n<div class=\"flex flex-col border-l border-solid cu-timeline-item md:gap-10 md:flex-row border-cu-black-100 md:border-none\">\n            <div class=\"flex-none w-full max-w-60 md:text-right md:border-r md:border-cu-black-100 md:border-solid\">\n            <p class=\"relative pl-6 mt-4 text-base italic cu-timeline-aside not-prose md:mt-0 md:py-6 text-cu-black-500 md:pr-10 md:pl-0\">\n                June 10, 2021\n            <\/p>\n        <\/div>\n    \n    <div class=\"cu-prose cu-prose-dark cu-prose-first-last flex-1 mt-5 lg:mt-3.5 pb-10 pl-6 md:pl-0\">\n        <header class=\"cu-pageheader cu-component cu-prose-first-last \">\n            <h2 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 text-xl md:text-2xl lg:text-3xl lg:leading-[2.5rem]   after:left-px\">\n                Milestone Achievement\n            <\/h2>\n        <\/header>\n        \n\n<p>We celebrated reaching 1,000 participants, a testament to the program&#8217;s growing impact.<\/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--2\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">See highlights<\/a><\/div>\n<\/div>\n\n\n    <\/div>\n<\/div>\n\n\n<div class=\"flex flex-col border-l border-solid cu-timeline-item md:gap-10 md:flex-row border-cu-black-100 md:border-none\">\n            <div class=\"flex-none w-full max-w-60 md:text-right md:border-r md:border-cu-black-100 md:border-solid\">\n            <p class=\"relative pl-6 mt-4 text-base italic cu-timeline-aside not-prose md:mt-0 md:py-6 text-cu-black-500 md:pr-10 md:pl-0\">\n                September 5, 2023\n            <\/p>\n        <\/div>\n    \n    <div class=\"cu-prose cu-prose-dark cu-prose-first-last flex-1 mt-5 lg:mt-3.5 pb-10 pl-6 md:pl-0\">\n        <header class=\"cu-pageheader cu-component cu-prose-first-last \">\n            <h2 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 text-xl md:text-2xl lg:text-3xl lg:leading-[2.5rem]   after:left-px\">\n                Expansion and Growth\n            <\/h2>\n        <\/header>\n        \n\n<p>The program expanded to include new workshops and international collaborations.<\/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--3\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Explore Updates<\/a><\/div>\n<\/div>\n\n\n    <\/div>\n<\/div>\n\n\n        <\/div>\n    \n\n    <\/div>\n<\/section>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":2325,"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-4527","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\/4527","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=4527"}],"version-history":[{"count":1,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4527\/revisions"}],"predecessor-version":[{"id":4528,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4527\/revisions\/4528"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2325"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=4527"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=4527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}