{"id":4431,"date":"2024-11-11T10:19:13","date_gmt":"2024-11-11T15:19:13","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=4431"},"modified":"2024-11-13T10:29:14","modified_gmt":"2024-11-13T15:29:14","slug":"descriptions-listings","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/block-library\/listing-block\/descriptions-listings\/","title":{"rendered":"Descriptions Listings"},"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                        Descriptions Listings\n                    <\/h1>\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 is-style-dark-grey is-style-dark-grey--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-1-advanced-content-types\/descriptions\/\">How to: Descriptions (Posts)<\/a><\/div>\n\n\n\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=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-2-cards-listing-blocks\/custom-listings\/#step-by-step-descriptions-custom\">How to: Descriptions (Custom Block)<\/a><\/div>\n<\/div>\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=\"#descriptions-listing-block-accordion\" class=\"font-medium hover:underline\">\n                        Descriptions Listing Block: Accordion\n                    <\/a>\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=\"#descriptions-listing-block-stacked\" class=\"font-medium hover:underline\">\n                        Descriptions Listing  Block: Stacked\n                    <\/a>\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                        3.\n                    <\/span>\n\n                    <a href=\"#descriptions-listing-block-columns\" class=\"font-medium hover:underline\">\n                        Descriptions Listing Block: Columns\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\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\n<header class=\"mb-6 cu-pageheader cu-component-updated md:mb-12\">\n    <h2 id=\"descriptions-listing-block-accordion\" 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        Descriptions Listing Block: Accordion\n    <\/h2>\n\n    <\/header>\n    \n    <dl class=\"cu-description cu-component\">\n                                    <div class=\"grid py-3 border-b accordion border-cu-black-100 md:py-4 first:border-t\">\n    <dt class=\"font-semibold not-prose\">\n        <div class=\"flex items-center w-full accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-4445-1\" role=\"button\" tabindex=\"0\">\n            Can I move blocks around?\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"><\/path>\n            <\/svg>\n        <\/div>\n    <\/dt>\n    <dd class=\"accordion__content !p-0 md:p-0 mt-0 md:mt-0\" hidden=\"\" id=\"accordion-4445-1\">\n        <!-- wp:cu-block\/page-header {\"title\":\"Can I move blocks around?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Yes! You can drag and rearrange blocks just like your cat dragging their favorite blanket to the coziest spot.  Just click on the block and use the arrows to move it up or down. Easy pea<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                                                <div class=\"grid py-3 border-b accordion border-cu-black-100 md:py-4 first:border-t\">\n    <dt class=\"font-semibold not-prose\">\n        <div class=\"flex items-center w-full accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-4447-2\" role=\"button\" tabindex=\"0\">\n            Do I need to know coding to use blocks?\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"><\/path>\n            <\/svg>\n        <\/div>\n    <\/dt>\n    <dd class=\"accordion__content !p-0 md:p-0 mt-0 md:mt-0\" hidden=\"\" id=\"accordion-4447-2\">\n        <!-- wp:cu-block\/page-header {\"title\":\"Do I need to know coding to use blocks?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Nope! Using blocks is as intuitive as a cat finding the coziest spot on the couch. No coding skills needed \u2014 just drag, drop, and customize.<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                                                <div class=\"grid py-3 border-b accordion border-cu-black-100 md:py-4 first:border-t\">\n    <dt class=\"font-semibold not-prose\">\n        <div class=\"flex items-center w-full accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-3486-3\" role=\"button\" tabindex=\"0\">\n            How can I do this yet not get in trouble?\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"><\/path>\n            <\/svg>\n        <\/div>\n    <\/dt>\n    <dd class=\"accordion__content !p-0 md:p-0 mt-0 md:mt-0\" hidden=\"\" id=\"accordion-3486-3\">\n        <!-- wp:cu-block\/page-header {\"title\":\"How can I do this yet not get in trouble?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Make a cute face, sniff catnip and act crazy. Meow.<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                        <\/dl>\n\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\n\n<header class=\"mb-6 cu-pageheader cu-component-updated md:mb-12\">\n    <h2 id=\"descriptions-listing-block-stacked\" 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        Descriptions Listing  Block: Stacked\n    <\/h2>\n\n    <\/header>\n    \n    <dl class=\"cu-description cu-component\">\n                                    <div class=\"grid py-3 border-b accordion border-cu-black-100 md:py-4 first:border-t\">\n    <dt class=\"font-semibold not-prose\">\n        <div class=\"flex items-center w-full accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-4445-1\" role=\"button\" tabindex=\"0\">\n            Can I move blocks around?\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"><\/path>\n            <\/svg>\n        <\/div>\n    <\/dt>\n    <dd class=\"accordion__content !p-0 md:p-0 mt-0 md:mt-0\" hidden=\"\" id=\"accordion-4445-1\">\n        <!-- wp:cu-block\/page-header {\"title\":\"Can I move blocks around?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Yes! You can drag and rearrange blocks just like your cat dragging their favorite blanket to the coziest spot.  Just click on the block and use the arrows to move it up or down. Easy pea<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                                                <div class=\"grid py-3 border-b accordion border-cu-black-100 md:py-4 first:border-t\">\n    <dt class=\"font-semibold not-prose\">\n        <div class=\"flex items-center w-full accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-4447-2\" role=\"button\" tabindex=\"0\">\n            Do I need to know coding to use blocks?\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"><\/path>\n            <\/svg>\n        <\/div>\n    <\/dt>\n    <dd class=\"accordion__content !p-0 md:p-0 mt-0 md:mt-0\" hidden=\"\" id=\"accordion-4447-2\">\n        <!-- wp:cu-block\/page-header {\"title\":\"Do I need to know coding to use blocks?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Nope! Using blocks is as intuitive as a cat finding the coziest spot on the couch. No coding skills needed \u2014 just drag, drop, and customize.<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                                                <div class=\"grid py-3 border-b accordion border-cu-black-100 md:py-4 first:border-t\">\n    <dt class=\"font-semibold not-prose\">\n        <div class=\"flex items-center w-full accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-3486-3\" role=\"button\" tabindex=\"0\">\n            How can I do this yet not get in trouble?\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"><\/path>\n            <\/svg>\n        <\/div>\n    <\/dt>\n    <dd class=\"accordion__content !p-0 md:p-0 mt-0 md:mt-0\" hidden=\"\" id=\"accordion-3486-3\">\n        <!-- wp:cu-block\/page-header {\"title\":\"How can I do this yet not get in trouble?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Make a cute face, sniff catnip and act crazy. Meow.<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                        <\/dl>\n\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\n\n<header class=\"mb-6 cu-pageheader cu-component-updated md:mb-12\">\n    <h2 id=\"descriptions-listing-block-columns\" 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        Descriptions Listing Block: Columns\n    <\/h2>\n\n    <\/header>\n    \n    <dl class=\"cu-description cu-component\">\n                                    <div class=\"grid gap-2 pt-8 pb-8 prose prose-lg border-b border-cu-black-200 first:pt-0 md:prose-xl prose-rds max-w-full md:grid-cols-left-260 md:gap-6\">\n    <dt class=\"font-semibold not-prose\">\n        Can I move blocks around?\n    <\/dt>\n    <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last md:p-0 md:mt-0\">\n        <!-- wp:cu-block\/page-header {\"title\":\"Can I move blocks around?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Yes! You can drag and rearrange blocks just like your cat dragging their favorite blanket to the coziest spot.  Just click on the block and use the arrows to move it up or down. Easy pea<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                                                <div class=\"grid gap-2 pt-8 pb-8 prose prose-lg border-b border-cu-black-200 first:pt-0 md:prose-xl prose-rds max-w-full md:grid-cols-left-260 md:gap-6\">\n    <dt class=\"font-semibold not-prose\">\n        Do I need to know coding to use blocks?\n    <\/dt>\n    <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last md:p-0 md:mt-0\">\n        <!-- wp:cu-block\/page-header {\"title\":\"Do I need to know coding to use blocks?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Nope! Using blocks is as intuitive as a cat finding the coziest spot on the couch. No coding skills needed \u2014 just drag, drop, and customize.<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                                                <div class=\"grid gap-2 pt-8 pb-8 prose prose-lg border-b border-cu-black-200 first:pt-0 md:prose-xl prose-rds max-w-full md:grid-cols-left-260 md:gap-6\">\n    <dt class=\"font-semibold not-prose\">\n        How can I do this yet not get in trouble?\n    <\/dt>\n    <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last md:p-0 md:mt-0\">\n        <!-- wp:cu-block\/page-header {\"title\":\"How can I do this yet not get in trouble?\",\"isFirstBlock\":true} \/-->\n\n<!-- wp:paragraph {\"placeholder\":\"Type \/ to choose a block\"} -->\n<p>Make a cute face, sniff catnip and act crazy. Meow.<\/p>\n<!-- \/wp:paragraph -->\n    <\/dd>\n<\/div>\n                        <\/dl>\n\n    \n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":743,"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-4431","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\/4431","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=4431"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4431\/revisions"}],"predecessor-version":[{"id":4451,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4431\/revisions\/4451"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/743"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=4431"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=4431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}