{"id":2687,"date":"2024-02-02T11:53:04","date_gmt":"2024-02-02T16:53:04","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2687"},"modified":"2024-09-18T20:31:22","modified_gmt":"2024-09-19T00:31:22","slug":"table-of-contents-block","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/block-library\/design-blocks\/table-of-contents-block\/","title":{"rendered":"Table of Contents 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                        Table of Contents Block\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Use the table of contents (TOC) to automatically create a clickable table of contents<\/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\/table-of-contents-block\/\">How to: Table of Contents<\/a><\/div>\n<\/div>\n\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#cakes\" class=\"font-medium hover:underline\">\n                        Cakes\n                    <\/a>\n                <\/div>\n\n                                        <div class=\"space-y-1\">\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.1\n                    <\/span>\n\n                    <a href=\"#gingerbread-chocolate\" class=\"font-medium hover:underline\">\n                        Gingerbread Chocolate\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.2\n                    <\/span>\n\n                    <a href=\"#chocolate-brownie\" class=\"font-medium hover:underline\">\n                        Chocolate Brownie\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#cookies\" class=\"font-medium hover:underline\">\n                        Cookies\n                    <\/a>\n                <\/div>\n\n                                        <div class=\"space-y-1\">\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.1\n                    <\/span>\n\n                    <a href=\"#chocolate-chip\" class=\"font-medium hover:underline\">\n                        Chocolate Chip\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.2\n                    <\/span>\n\n                    <a href=\"#lemon-drop\" class=\"font-medium hover:underline\">\n                        Lemon Drop\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.3\n                    <\/span>\n\n                    <a href=\"#tiramisu\" class=\"font-medium hover:underline\">\n                        Tiramisu\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<p>Cake icing biscuit drag\u00e9e jelly-o topping. Cheesecake jujubes tart danish tiramisu brownie. Topping gingerbread oat cake chocolate cake bear claw danish halvah powder. Cake ice cream icing macaroon tiramisu jujubes toffee.<\/p>\n\n\n\n<h2 id=\"cakes\" class=\"wp-block-heading\">Cakes<\/h2>\n\n\n\n<p>Caramels carrot cake jujubes wafer cupcake icing. Bear claw chupa chups candy canes gingerbread tart gummi bears lemon drops toffee. Sweet cake donut brownie chocolate. Cookie cheesecake sweet halvah shortbread candy canes brownie.<\/p>\n\n\n\n<h3 id=\"gingerbread-chocolate\" class=\"wp-block-heading\"> Gingerbread Chocolate <\/h3>\n\n\n\n<p>Jelly chocolate cheesecake gingerbread chocolate cake jujubes macaroon carrot cake. Cake tiramisu pie drag\u00e9e candy dessert shortbread ice cream. Chocolate topping sugar plum donut gummies sweet.<br>Caramels gingerbread caramels sugar plum cake. Cheesecake biscuit sesame snaps macaroon toffee. Pastry jelly muffin jujubes souffl\u00e9 jujubes. Sweet roll fruitcake cotton candy icing sugar plum jelly beans.<\/p>\n\n\n\n<h3 id=\"chocolate-brownie\" class=\"wp-block-heading\">Chocolate Brownie<\/h3>\n\n\n\n<p>Jujubes pastry cookie pastry bonbon brownie gingerbread pie chocolate bar. Tiramisu halvah bonbon toffee oat cake muffin topping tiramisu. Macaroon pie tart gingerbread jelly-o.<br>Dessert lemon drops pudding cake sesame snaps. Bonbon bonbon croissant halvah powder cupcake pastry. Caramels shortbread sweet lemon drops fruitcake sesame snaps cotton candy macaroon chocolate bar.<\/p>\n\n\n\n<h2 id=\"cookies\" class=\"wp-block-heading\">Cookies<\/h2>\n\n\n\n<p>Jelly beans croissant gummies jelly-o chocolate cake sweet chocolate cake cake. Ice cream pudding toffee topping marshmallow brownie danish. Lemon drops topping muffin ice cream jelly-o cookie.<br>Chocolate bar tootsie roll muffin apple pie chocolate bar chocolate cake.<\/p>\n\n\n\n<h3 id=\"chocolate-chip\" class=\"wp-block-heading\">Chocolate Chip<\/h3>\n\n\n\n<p>Candy jujubes tootsie roll croissant chocolate bar jelly-o halvah liquorice. Sweet liquorice pastry toffee pudding. Cake icing biscuit drag\u00e9e jelly-o topping. Cheesecake jujubes tart danish tiramisu brownie. Topping gingerbread oat cake chocolate cake bear claw danish halvah powder. Cake ice cream icing macaroon tiramisu jujubes toffee.<\/p>\n\n\n\n<h3 id=\"lemon-drop\" class=\"wp-block-heading\">Lemon Drop<\/h3>\n\n\n\n<p>Drag\u00e9e lemon drops bonbon candy toffee wafer tiramisu souffl\u00e9 pie. Cheesecake jujubes sweet roll souffl\u00e9 pudding sweet roll powder pie. Chocolate bar brownie toffee powder powder chocolate sesame snaps chocolate cake. Icing cheesecake gummi bears topping cookie apple pie donut.<br>Cotton candy muffin pie shortbread cupcake oat cake fruitcake candy canes candy. Candy marshmallow sweet pie souffl\u00e9. <\/p>\n\n\n\n<h3 id=\"tiramisu\" class=\"wp-block-heading\">Tiramisu<\/h3>\n\n\n\n<p>Tiramisu biscuit danish bear claw fruitcake sweet fruitcake jelly-o. Ice cream gummi bears toffee candy tiramisu marzipan apple pie halvah.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cake icing biscuit drag\u00e9e jelly-o topping. Cheesecake jujubes tart danish tiramisu brownie. Topping gingerbread oat cake chocolate cake bear claw danish halvah powder. Cake ice cream icing macaroon tiramisu jujubes toffee. Cakes Caramels carrot cake jujubes wafer cupcake icing. Bear claw chupa chups candy canes gingerbread tart gummi bears lemon drops toffee. Sweet cake donut [&hellip;]<\/p>\n","protected":false},"author":2,"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-2687","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\/2687","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=2687"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2687\/revisions"}],"predecessor-version":[{"id":4254,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2687\/revisions\/4254"}],"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=2687"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}