{"id":2637,"date":"2024-01-31T14:23:31","date_gmt":"2024-01-31T19:23:31","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2637"},"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\/mastery\/module-2-design-block-mastery\/table-of-contents-block\/","title":{"rendered":"Table of Contents Block"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Table of Contents Block\n <\/h1>\n \n \n \n\n\n

Module 2.3 \u2013 Mastery: Design Blocks: Table of Contents Block<\/p>\n\n\n\n

\n
Examples: 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
\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n Step-by-Step\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Try it Out\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

The table of contents block is great for making long pages easy to navigate! It is based on the headers on the page (H2 and H3). You’ll see that it is used in 90% of the pages on this training site.<\/p>\n\n\n\n

Step-by-Step<\/h2>\n\n\n\n

1.<\/strong> Add the Table of Contents block using the block menu.<\/a><\/p>\n\n\n\n

\"Table<\/figure>\n\n\n\n

2<\/strong>. You’re done!<\/p>\n\n\n\n

A few things to note:<\/p>\n\n\n\n

    \n
  • You can move the table of contents around your page. The contents will be created based on whatever is below the block.<\/li>\n\n\n\n
  • The table of contents is based on Headers with H2 being the top level and H3 being the second level<\/li>\n<\/ul>\n\n\n\n
    \"Table<\/figure>\n\n\n\n

    Video Tutorial<\/h2>\n\n\n\n