{"id":352,"date":"2023-10-24T13:30:24","date_gmt":"2023-10-24T17:30:24","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=352"},"modified":"2024-09-18T20:31:32","modified_gmt":"2024-09-19T00:31:32","slug":"list","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/module-3-basic-building-blocks\/list\/","title":{"rendered":"List"},"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                        List\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Module 3.2.3 \u2013 Getting Started: Basic Building Blocks: Basic Text Blocks: List<\/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\/block-library\/text-blocks\/list-block\/\">Examples: List Block<\/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=\"#step-by-step\" class=\"font-medium hover:underline\">\n                        Step-by-Step\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=\"#video-tutorial\" class=\"font-medium hover:underline\">\n                        Video Tutorial\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=\"#try-it-out\" class=\"font-medium hover:underline\">\n                        Try it Out\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<p>A &#8220;List&#8221; block allows content editors to create a bulleted or numbered list on pages or posts. This function is especially useful for providing project outlines, mission statements, or step-by-step instructions. The &#8220;Try It Out&#8221; section at the end of this page is an example of a list block.<\/p>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-by-Step<\/h2>\n\n\n\n<p>1. <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-essential-text-blocks\/module-3-blocks-overview\/#addblock\">Add the &#8220;List&#8221; block using the block menu<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"114\" height=\"154\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.31.26@2x.png\" alt=\"Add a list block\" class=\"wp-image-354\" style=\"width:66px;height:72px\"\/><\/figure>\n\n\n\n<p>2. Use the text editing toolbar to choose if your list is &#8220;Unordered&#8221;(bullets) or &#8220;Ordered&#8221; (numbers).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"146\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.33.04@2x.png\" alt=\"add a list - ordered or unordered\" class=\"wp-image-356\" style=\"width:368px;height:86px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.33.04@2x.png 624w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.33.04@2x-320x75.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.33.04@2x-512x120.png 512w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>3. If your list is ordered, you can change the start value of the list using the block settings menu. You can also toggle the &#8220;Reverse List Numbering&#8221; switch to reverse the order of numbers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"766\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.35.04@2x.png\" alt=\"\" class=\"wp-image-357\" style=\"width:238px;height:337px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.35.04@2x.png 540w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.35.04@2x-320x454.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.35.04@2x-512x726.png 512w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n\n\n\n<p>4. To add a new item to the list, press the &#8220;Enter&#8221; key on your keyboard.<\/p>\n\n\n\n<p>5. To indent a list item, use the indenting options presented on the text editing menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"110\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.36.50@2x.png\" alt=\"Indent list item\" class=\"wp-image-358\" style=\"width:407px;height:56px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.36.50@2x.png 804w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.36.50@2x-320x44.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.36.50@2x-512x70.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-13.36.50@2x-768x105.png 768w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><\/figure>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/Hjr3f8FlMx0\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/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    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-list-block\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 List Block\n                <\/span>\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.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-list-block\">\n            \n\n<p>Welcome to getting started with cuTheme, module 3. This video is going to explain how to use the list block.<\/p>\n\n\n\n<p>Let\u2019s go ahead and add a list block.<\/p>\n\n\n\n<p>The function of the list block is to create a bulleted or numbered list. You can switch between bullets and numbers by clicking on these buttons at the top. Unordered lists use bullets whereas ordered lists use numbers.<\/p>\n\n\n\n<p>Pressing enter will automatically add a new item to the list and take you to the next line.<\/p>\n\n\n\n<p>If you highlight an item, you can increase or decrease the indent by clicking on this icon right here.<\/p>\n\n\n\n<p>In the block options menu, you have the option to change the start value if you\u2019re using an ordered list. This is really helpful if you\u2019re splitting up a list using columns and you want to continue the list in the second column.<\/p>\n\n\n\n<p>Lastly, you can reverse the order of the list by clicking on this button.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out<\/h2>\n\n\n\n<p>Now that you have learned about the List block, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a List block to your page or post and add several items to the list.<\/li>\n\n\n\n<li>Convert it to an ordered list.<\/li>\n\n\n\n<li>Try reversing the list numbering and changing the start value.<\/li>\n\n\n\n<li>Indent list items.<\/li>\n<\/ol>\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-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-essential-text-blocks\/basic-image-blocks\/\">Next: Basic Image Blocks<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A &#8220;List&#8221; block allows content editors to create a bulleted or numbered list on pages or posts. This function is especially useful for providing project outlines, mission statements, or step-by-step instructions. The &#8220;Try It Out&#8221; section at the end of this page is an example of a list block. Step-by-Step 1. Add the &#8220;List&#8221; block [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":309,"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-352","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\/352","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=352"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/352\/revisions"}],"predecessor-version":[{"id":4309,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/352\/revisions\/4309"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/309"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=352"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}