Table of Contents

Commonly used on the Article page, a table of contents provides an overview of the structure of the page with links to each section.

The patterns on this page are designed for use with our Table of Contents extension, but can be used as standalone micro-templates.

Within page content

Simple ordered list
View code
6e8f50b104185c96dbbd3141004cff02d9651ea918645bbc823b2974ebf6a5ce9f5e669f561f1ef6c41cd7e6d013795390a105e978e99514ce778b334bfdd59fcdce9986c6afa8c408c807ec63544641af7a9fa5bf66574ac8ffa0f625f4d94ae399e44a3a5ee4a10da9ec36f6a001ac12fe270d3d60a7c8b11c1165b13b2202fa297687fe92f1935588be3b15aa051ed3c2fa6253d121879533e4db90a0c4d0e49d793f74cc658e1e88cab05f2a56b574858a91502f26b0601c3ea0e81aa9e112a80d9b3821bf21c06ba89a16b077b2fee3c209067be8fbb1c53f05a12b6dbf754b0c871a6b25b0bcb65ea4390fa98f4c13d54eb5c1f2d42f729cc2bcc6637ffe880da193cea3807e7e41090f1b5119d90e2fb91cd591f0defbcf6725d551ff3a821361d24a2ded21bbf33477f4db6850103ec859017d1df5864649665d6473bc4c57801f4389df320a98061a97f249eac8f665087f1f4483064f7a378ba9fb50090e243cdc10dbd62342dfb713f20dc32d3c17a07f7c217323c3688b39bfa392dac9ba4e4db1ec12b8a8010950bd5c4c544dc7733b2f1f6fa482f5b9fc192d422f3fa2b4f8f26ac45a0a7c9b0684a8be093f4f0e75743cb407c778a6bef18bf5b166febf866b5145b3b5a8352e6f980a6cc4daab2f28e102cc7805ce0ef4484b7a76dba52bd3ded70202eda6ee077d458821ce83a0520482ba6a14bc32f27e612bc7549d192883818be826bf2dfa623696795ad59155bddcc634cf4093fbb203408a5c6fd8a6896ce6e6b3d4844d7f031cb3151a9d65940b35fb95b87f073caa76bef34367c52dd3a630b138d070b95894bff0319ccfd8835cb78e6c5d88d7926348e9dea5407ac513ade5530fc6977a78b68f3a89f6a74709006bab62545d90df3639d98258d6b454c99b0480bb69d9f7609e0f9072ab0db9901666be3e8e773c7d6518dfd294bc5a6e25feb6b6a50941e04c05e575778cfa2f0fcb4890cf2d3dcb752c043375ad2b907f700ea1394478891aae75c54358cc2b7b1695b24a32e5aeeda00e58f7021a98dd10d07c728bf6007abcd1589e6301b6d1b5fbe1d9376f3b1d6f66b51992e3365c829a5c527402bf265f75f17498827e495baa988a9ce8ceaad9603f1f9e04be9ff4287ae45273a3a747f65161dcee374f1233e4898189f21e9d7e1021487d105c505109b0d9616c9af6afc144ad4cb51b17a4fa9b5d54925bc34661ba3f1c8b4b61b90411e8db0cb844773682299f4488b7f423545fe9ce93a92696173857cee73ab76cb732ace0921e74e386d657dbe6d49c6bbe2bfc16f21a09892ab6814ba3e4521298b7ae9abdd6cb72cd6eda10f44fdd2bf7c5378b705950ca69a70a9f23a1af216965dc6242cdb7557b4cab31dd4c46ed98ce2847c522cd57dc1cba63827ba1d1afb181b9dcee831a93b6d77f4f732271e737dc62601277b3d692b0c761e0748b2c1627a69ed6fc0f881aacc7ca6b995bdd
Simple unordered list
View code
01700f4652f944cd373524e18d0be1cb7042f4dbe1aad5f6841230c2750c1e8d11e5723511b93649fbc522b5213d7f96056db78604a7b21efddd5d5448e60ae6afbea649e4fbae25810a853e1a1b1f23b9dd0c7c642ee1f88c2c43b13108d39a22a5bc666211a4734dc087c30cf0bcd09c7123531d0cc6c63eb56c1342947e14a93f233d637e0613e82ee35c8284b5283b657933e0b04dac5fa252cf28e939f1f113fed6072b0aa961d329e0776b0709e54ce4edd8cda7e637bf48b83712db8119b4492ffa3addd81534abf2285986e4ddeff1b5ccd9396365ae15c281ff957845b2d2482b9bcb192e56baf54d3d1d68bbb8c27bc4a84ab38a4eb38ff94547e51f5f3269d5b54b0626e6e51e780377f4a52f1160a9e189804b3538a38ee9a9d64c01940d920187f773bb56c580c48bdc842c744cae2184b28e7818c8e54bfd2353cd24a11a2230141ae7d28060b2d35a66cf4aefc7a0ee668f937318d669374b70440d50c745cf8b32198f17d423c3c3eb5df55745edd3f2f76867ad4a28a24c1b083a1416aceeb284c206ee4a69a94e73ba6bb82c8c120a776cee176bd2e2c15035a98498a96d66620c98a50d462c05fd1c25817d30603067f00efc49347da1f454189a0793c3086b3f581b42d450ad0ded9ab99e94607e83477b19f7433bcb28fb8b8c250e84c8394262a69b8300569dc05c7cd6225d6a1eb2cf8cec1457eb13b1ffee79321db8c76c37bdeff15c1f069abb7d57d92cb18af1e6ef5d5a0a1c80663116e9b26ec7d7bcb4b414e9e24954c61c7da31bb9593e63c2602859cfc7f1ca9bf2ea6893b154cdfbe0a46a05e215441b053659da95071b10bf6b0e7f56072ae37ed18bf3c72e39bf0ca0d9a5367760c37dbb7f2ec62b73f578794d635ce0f15b676fcc640ca86025bf7272f3c1dc8a427ceb74c3603f39a48ec563eb8120d35bafa6069143b79185fbe92f94541477d1418e3e4bee2d2b836020a4be0166385f3622d9dd47e515c553a5d3ed3f40a4b786428f233e9d692e49da725e161067a38a529e0cf849c12ffe9fa5db4c5f1c9d529b12f847ad4df4337ea6f9166552f800661204c528c9e84bdb948ab89083d524932dbd3209b170e0fb8d9ffbe31f9c781d7930acd2570c5481a43251d67d09ae28e6cf6570127cc418aed6419acb8d0f74e43ffd0dc959aa506a0bfaf86b43df54e51e723248d628a55634f213820c2aa69634ebd9bc975d215fd2c19de6ecba26a7fbef28895562a3b41cecbf8d2e8e7692f5b3d6f36a7abc5dc513df2d99b903ba35a69ac0870058aec8fdee8c3127671b213d2cfcffc5cdf93e16bffc3fac310f952492554abb80b7b3bdf66acf1d9b5cae239125b7c4f1b25d7cedf0f59ab302fd3acf60ce7b0e8c24fef9dd9c031ff6ded87b5eef875cdf29adfd925bf02d2108434bbacc3c7aaf45d768f926b64499b86a238c2b7088cee2a9be125ebeb7b96328b449db56aa85e3ec
Ordered list with borders
View code
b8aada60531d10f7871d918322f4c5bfd6ce62bbbf2b3d8477a5caeb48040cc513bbf7732cba9abd2dd4160733159a216c5eccf9bedd0ec3275ec3c6c89b67f2d18075f214a3ceca018feab50c11c349710a72245378d82ed93d18a38770dd67aa900f423a80b1dd5177b98d3a820565a9e0863592abd6f615e02915e53b25552ab12a4da31f5e59b24b82ef89f93d02edeaffad09f8b4c6321dd0832a6df42b31b1b1981b593e9223d8f2caea1744f791c7f41fd981ca1d6f31cad09237d3250d9a443e6bfad161891bc8a55e39feef4084c5da9641cab165cd786a47e22f05447871084c94071f7a7e8b7c3f7b23939aa9615827c240e133075f0ebafdf89e378cf5f455d2a2a25d762014750676d3708be94c312bc06d3d041ded8ea6ce41d8d62b73e55ae28df17999565c9fa2cf61c30cfeca4c2b9579fd141b57617c7ca7823d03544f3c54ef74025d0a8f9a2603d13cb1ec85bc19dea7d69ad2bf769135661cfae54dc7691d5a946c340e6d2f14a637298acfe93ed46ea64b658327a69c576aa6f8e279008df913afbd83818c6d90a662d26a30ba3de695a2e8810060b4fb95f7cfa06d76663fcd580e086ab65cca19c950190f2e42adf351f07e78e73727202b58b4f2554ee05afd9f6d2d4835dcde0136a00a006c7dd79baacc83d3e2716b30950f632d2c245acc41f570dba77d934bba741040fd6a627876c9c40e99cb64683b259ddd7c088b329e3f396fc74075994179a246d302e6b51328eea3f009f5e34c2a2b44fcedce956a7fd2259413978a5c4839cd87e6af76ef175697e3921753158c0fd8d5a5b6fe95ce9aca4e795c8db020e71bef02482c27154270e6f8a83bc7c586777935297d071320e8f51c95bdd9039961e55bac96b443cca78c396221165ff641d5ee42a5cd55799458c3d722fe93e6355b4b0bdf34f0106ef241adaf3b12086909785596e1772becccabf51871d82ceb80d1050cbb26e016e1ac11af5d55b1efb5568dea89cbbc04c37f20a4f07a8cd8e2d5cdc84e08c2608f6b2c0eb54b41872b61ab0e6ca745a708979f5589798c9438907d263c04cfd8d381a8c72c9b22054755bdf761ef08cc56329d1e76cefd4cfee6bb36617b9b36e776f59a85306f33f2e60547137c2c89a6d40e7e75bc7d8be0122631a0ca93eb8813a454cca936439cb636ae03f6044a22992d65f57f1123dfd7eaf2c55d2768e6d02580717ec76e15796cec7bd24d59eaaf9a7fbb3a80e14863a3e432b3f22238e27ae941036b7b7505300195fb8670e198504d5a1221036851b1c3d31b949b02593f21bcf220a429cad427742d6795459a500f96ebda28b0635964b33d70d46cd26c34692eeec6d79b6c7f47bfadfcd88ae663c1b06cb7fecd09d6030d24af2cc06f683a7d2e150be531b2a3781ad3f574a991ab25d4ca54668c099283c096e8052462c6d9176796227f126b3c962d48e7ce4db26d2be2a9dfad96d5005724578c5e41960568d9a01b6624a8a5d52a89327cfcd28d4d1fe6086f9806051224
Card with list group
View code
f031a4dd4b28f1d0d25dbd439dca694aa81a8a3c5b4259cd050ff0728b1bfea0261327f5e58fb8a7440520f442232cf93a4b355b82f073f717ac099e1cd32adf239ac9cda034b058c030c169cf235a443cfa48a8fc7f4354498422add29d77a62f0dbd6250f2bfe5f95a42207a0aa8850019a13bf40b84d0fafd6044cde2c29e491bd7e33efaf69d205b5484fe66055ccec41dacccf33fb8f8d0eac04158ff2a092d610ae86464652036cf4d87be4fea4e385e6605a5f0df5aa45dd4e46a012890eae838815c446899241dd7922ca86968c5eb5c1cb1c52c981905d9fe15d6353313bb7e621c08dc4d6e1544ee2d99cb2e000542f2e2be6b57f2d426cf02a05d8e62d450691711a9148f0da86e5d3ff0d28d3e4175b1150e8059effb236c9075cbfeb80443070496278ba83a53ecfd3bc398c8edd6f79f9a9fb607d808e02947610f4a9eecab2bce947f380c024fad0ae8ec2d7acf6529a6f2373bb9f202b1cc4a4d4f8d0d0bb6ed7ecd29d6f06f5e1545e283773736aadb0860704b0aa32d715c9589993ffca2c9a584d923c35fa7da23b3d6e5ab40df07e18abfa7f0091f7778dd1d86a596cd2d6a19e6c756463b902dfe308d824ab8826c5b441e7feefafe233f33dc48ddca0a9b3b36467001cd64ca183a2deb4f62faec01c70a94033f1934c98f04fae9e9e91f667284899adcf05ffd838660144ab0f3aa0d683c289eb84efcc0744af6052c949213e88af1ca85f6ea4a1d06c57e4490b2cac0973c1cf03c63e92a8534cc3a21790d3e971e993852381154f050b31f885b4cf87882ac7b99ff40332a7a222351ea7a816f54697306d9b44d4c9d589ecaaf9e71b7c70e9a302b6b8f65f3f4f4b69896fe3cca9e3c567f194fca386f5fe62efa326b177b21a4a199f6390dd3ae88355772cb7cd44032cec0afda354a02103d3c0ad30df552cf5028b2c76e730c3da2e143946fed002fd254d89e3a93e13260c013817f5e4d3bc6a43ed4e06ca926e02d76067e5caa65fe1f15b2b74dbcce8f20843beb13ddf4a52d96dabdbaa5bb8f45e7e81805fa7e8d301f771608810018357ef492049ce2d4cf31204f6818d1d3bfb6f16e152a061c6f0573232f62bda5cc9564144a12b9ab9109a4852026efefc4ba2e638d4736bdd25b65cda60e5f47afd4798ffb99340fe310ea41e0da5ac4ebf1156ef164bc49330294b5aed2135d3a45ac708a10d91fa03be5833a9111959e12a0b5f5ac1f62aa08c77e29e8ba76c4af65b7d5629f21ca0b111af3d3cb7526df84b1f29f801a2396eb530ee423188ec005ac4b8a03b3634de5903943da8648fc822a3fdf1406e6a3b57a297a170eee3d14ef2b32d531c1c796a867285b8d67adfb334209720739dcd965895a560b5bdc487f3f47ce027d3a8cf039de8192d395bb1a91c117443d3708d1a7d2374239f057d9f4ba21c1fcd3cafdeb6853ffc64d28461c2687245fa71ed2a93d3dfdcdc29c0158d7cfcd716f6fbf31ace89bba7c73607da4b08d09fa02e6cf9bb4b28df7d764dd1a3d7d01195f911cd8bfc7852bb99d2d83fcb77642e4af05dd230181d26a2a0c44b67546c5b22f85a31f3f653ac4eb472f4130d002d134a4ca23469d210dd61ab32fa4b7791c8c81dfcf9cc8b384cdc286e712cc75a40183cdac7ce8de605eeecdb2b80dd5d3c11a51e03f756dc1044a7045e7cfc234ac446977e633062b0335ee488944870449671011a450e3731f13e2d967ea8b909ecd38e51fb3d35f6da575562a7f9b49e4ad92bc6afc5d6f6a05031011ee6c264372e573bc48443c31015a649dfcc78eec34cd773e3c3a2af299a0eb8d8da4e9bb60fbc381e6fc8af7ac87fc49d93c7ad29ce81b846bd38390a604a8a4ec002e7aa535396b450d5074ae30473ba8510ae71862bb290c83a4c3f2cae33e245b4d1497fa7968013d8905701218bdfaacc5f17246178fa6735c141fbb752fe8bee0af2434b624ba85a8e21c1c4c327ff91e6137e32376b8ed28bf27d5de5844ba77c135f31d916c21dc4b42a1a5d2a5c8c8acc0825b4870bef4a26ac2ea36fc2cf14fbdb260cbe8f7ac54db58bde5a9ed2d31aa15119e5b020086ae543a42df942b8aaf592f9a9a16232015f9
Callout with two column list
View code
6831e9b2ab23b8e265de9d1d688ce7de1670f6f73e53ebe7c69f283b64ac32d8a4110e475e192635aa59b0e81e209cbe562acc2748fab27e70afd0d2f8bc846ce4ff7b1bb80ee5e2ae01d6c46f5f05876e6d71f8c6ada5eb9ae253ac42cd8964c86517e8033bf208836dc60e881a334b4997eefdea1e90488da76b45fa3fd0388e2309125aa8ad3cb858baf35dacf5e9bb4810b8bac4be13e411e17cf2e655665e966157e843511c4b5091ee9dfcd3d58b26bd4b9be795f6828e44fa7e6e67e95d113403fe601be584bcf97dfaa4f2cf1a367e309002964f2880b9223caf791e47d828f671ef6d50ed98f97b0c88fa49d2cd65a0974d5ee795994eeb53a5536513e334c27e3ece672dc89f9672a786e00f063966c6083c81d18c56d0016835f5eaba640ef1111a468f27b0e26732590ef0dc10802d97a333c6de28790aee3990615e157af5e8d78ef0d070d7dde8b65ae94accd4ea1391b158a4b0d6aa75ef5ac6e11e75ee7d003a0e3c0470d8a5952ca0bdc96a3fe1f873885501fbda7bb74b734c69eb627176598e2c7587e955411475ba697542093c39d82a98644aefb61e16df3d0946518651afe253213e2ed5304fbf2c556f396cef0cbb82719022db8495fb467601b92c5aaf0c7e7909317250f7b244ee1d0b6d0d1198e30047611742da651017bda72247d60c6bd5ec2a2b9d3c6299a0a7e58417fe7b0b41c4e402bfbcdaffa25398badeb1e6b0cd2289093b4e1d15a3cf6af91c54c1cc352dc5d34b5d8a1727fa92482024be2a2835487e0d17c83976a6392b4487eb8128378ab355ea34c484130b1eb8618670557e2c1425ae3b4bf35530779f20799f59e6d9d80e8db3a40a3eb539e3f08f24e1d803feddbdbc10429a93c1f43ef152136a1c8134c94c314bdc614975a9835817f963580dbc754858a251a0ef4a13fb53c6bda5665b9a4e40d99991541ffb76e0d93f1033d5e7df84e338cd69fb4610ff0099a1ebe13b41d7a8ad9856cfa0f517199aae1433d2f61d437c7ddf9ea16449ef32348abbb4069950e06e55e17027bb06540ee9bbcf2b39bd060e310af468ea59436b42d0df8389124e1075374581059daaabbd963978ef536ba675116d7a9bf62d5f72c8d7036c3cabcc457144b6286e106a6f9615beb0abbcbd7b87e10633d74108bc2ef534121a52170a01d1d404718d79e6e0f25de8fec69c9d7e747f91a96b1d14d1b8c4443cecf9b10d834c412f1527145cc7c853ce3a5808234e7e925b2043db69f223f281790d371cdd4c51b15d3c2d42d328103b43dfdb9b1a457e2691927bf5636679300f11bcadae7791576ecf30d864e162d34c1bcbf5c5a7faf9bb5345988693a74396fa5be549b3948122662728173c80d8293ba1146343e8401bb40b3debf36e67292ae94d51ae7be0967a414b51141f9f8252c1ea99ad2d6fb3105efa77327462614eb0b7a36e635a0e68788a64b23b70d965cc1d8a2adc3995568339a2ddb30f01c1466108fb43aea3c5fefc2786bdb576d1d7d03aee6bb729c13db4571e7989e9df02a4e2349161c28eae47487f86cc0d583a50b7a984c8532c0f3a011dabae6d90d64d1cbec2575c295a7c43b536c7b61b7c569e35b4d721f612cd1b7996cf4ca10d06dbc29f19f51e9f6cbff325975d8ef546c6597f0d7410b15084f7fdb1a64a478112c013a29609f38a5a02f8969e5aff62dc087b9134a5c1279361415fb58902faa2c897d9a5fa7da581a0a7a853f67f86273301af6e898d6ad9be7a873c37ae198979d22d046c7e5f209ed62e5e51bb87e38f05638e2af174568296ddd68cbd63e0536b1ebf9e85d7089ba91fbb525f09b55708a4bd7e1c800e5ebfe73aa858cb41d2c4d0434c29

Collapsible

Collapsible boxed list
View code
943e6c9fabb8296abd8e00de94a65bd32bd87f06857fb7cb25aafb03dc5d920339dc781c1b37c01b23ea770d14b8dc00ef2105dbdd8227a377a92de1ad9503a7c78204d9bdf7f2d54c3f118cb3852b8d2e1754e2e1fc4fda163344d4140a1c47633ea030263433a9006f9da379bd061c035ad1f71272a081bb7e89385e34781afce67909dd1980781bf25a6b0dbbc11e486be1cbe91cd0056d19aca0c5d03294e4ff50b17cb92d71cd560f150149dd04a3de54d6d259d3c28cd72686b1856cbb13940d69fa1b847299ae3066d1173273d24a1f2229a58448c19c76a0bd65d109a8141318401a6df93f4cfa43f653f5c799fc0c1b31e6f445045c861c4bd35d67f45493a9ed3099169ecfa06a0e0cf9cd11b7fbd480e3347171fd0e270771197f8a5da60b54da95eaf85ae3fbde76fdadf7b494c98590cceb0024a689cf98a75ecc5fe602f68e3291529bc5f1592480df9bf7b8e780aaa8bd1b5dfa000a542ec2cbf734540ceda33d3d3af951d3b13c77c5530681208f327238f282a15202c3f75d36b0ebcf8558cc20fd41571db2713dfcff891bc636c6c37c03bb4d61fade2652f0b2813450d844554482ca6a85f131a199916c8663ec00e440ad46f801089a8124073b4f307a4f59344bef19331b4da75395971db9850829dd78d3155054ee66a2c0861bca3b6b82291a3f3605ce1c5315dfc01ebf8b1f028d1cac08907bef87665708c804aa1806d937a065559712d6edec2ccb347ecbbf76cac29ab968ea02fd9507582aed2501c8b3564afc6cadc6cad9b42b81b8f8497666f596b510734a86306ac3fc4a899e274cf40adb780bc9afebe37f780c341b6d4dfed67f5bc50d60fa88d5bf6eecda8639e76629e429fcb482972cdfc9179d6f0f09b7aa442a3f9139202d5dfd076a508320cb6904f23f5fad93ea440427369d4e0c70f8ba4f80dafe133fa507b2f80e07564125a103737e73dc752df15afb83cbb011c2c9d6403f8ee530a76c1d253eb5674d1c975dce972262a303259971c469e31d0414bf9be0ffbb06002f6efc907c8bf3685bcef686dae95ddb97a6b8db484bd9c432e0dea56a54386fb2a2c62aa7729ae6acc1372d4dd36275b7596508e07322df93dbb631c74925a4165e7c12c1126bbdd2bd811721e1523b51c279f393ddd8ea7755a2a502f93064775ebd21ad8be7f1590072daf8d1f59603c54371f457ed8f3f92a693232bed6c39d3216e765977e8a5285ed02fcfa6d84e9b084761750fd7f16067cb8a128e44f879f2e1b26f1553cef172ad058bb4bea2523de42ac155ad656cb8bca9f3450fc5f58c9a40aa8ded0bbf5cb785cc1b57b31278a66b115a95d1f0fcbddda61483ce22d79dcc99129e8336137f9421f750f9e7220c209562cfd0ae8a0314b5dcece7fbbaa0f7a3bf9c379ea73f58173bce057299ead59f3ff76b328640c889025148f3a71230bdac4ad42a48b480fc8b5be3c9e3aa7657efd11ba0d6b88e4c1b9e6c06b325c04cad4d1d7fdcf37bbc419d88a1aac4a48fdb57867b3bd9a2aab84822b1f9779db8360db7c31a1b53fd956d48633f0f53b77dcf0aec2b7a778fb64f2017a1df663e3240bc1def5a2ef64576bffc31c311f523b05467b9d9f4db1955b748b3ec60f1ac61f778570ba811a5eb10a286befe13c4a051e651126a1c2cc6a8a8111e71a56b221ecd3881341a70f391de3d31f2e18cd7948be32f5ad831e8d38fca312de9a3b22287a2bd1bea8e41467b1b6656ba8ec739cc49f2807845536d3ce2aae86a7908232f1e6227197dc1b0eafe364a793586d2302013cc577b4e1c55f60910187748299a6a8faede91183c65cfa0a92f3e51ca8620a3d324dbc9304d32a79aa06de32726b38e211f0871d50de86310c6f320e50419acfe7d56d483b5efb9de31fa052802e8337b92b06c10a17335884f0877333670302c71a1529ae93f4a8e1ba5f30184dbf79b825cca6a1efcf7f7715d2b747c32fcabc85b1dbba76cefc104c62d3aed548f21e2965bbe095f60405d8a5dcd29995b0bca54094008a6e83810d6c9efae59f3b396021ee757ea025c757b916403b4d50e3e16e211415f0e6acb62b0b5f8c5187bb1c76a147f801d63ce8c29a6ceee29a6924f35136882c56f80dc56b0c1ab1882fcc30c195e28baca815455b51e74e901f415d3d6f24b435590d9300deec1af15732837c6d3297d679628d1db73167949f19636562b646037b1c49829307bf59efc02b13b9f860cd24bf8a4a14389c669054d730517ca6b3dcb50b5980f813bbdd86af9850aa60e318e51626f73b4e4fa89313bcfaa302cdf79b9fa42620c09bf6a566f96b24496b51367c20d62a994e040b965afaf437e7c65df575432fc5a354176bf2d36d9406a4b98023dd1f5f668cbb6d9427b8044112fb6f81b1b0ab559895503b309d9dad01c783f3c9855fd5b96ba12641efb726b7b6f089f36af1257c88c3b3a33b7c257f687f73f2285065b712d20686a0f2eb6024854eebdf98fc03322d1c870481acd73069ff4db330f7a7ad65a84995bb048284646f098adb41630f3f34dbb618821f11a4c26282b85c9eea126bbb7348804f4691b23bb4c7ca5d3876a973afa557eb00aa30d436bfc761c4136ddca6bf4e3e65b58c48d6f37b40a376472135308503a57e2608ffdae755325f8fa7679587e1c0e01709268d1a6f87abdc25f8878df2a987ddd6d07d049f03fd8925bdde5d24abce8c14e3e09a330014eb86074c145bbae235e86215c448f6ee9ff145a98d5bdc301dfd9337953fe76919319a203fc36632418bf540e062fcb816f55a3d1efc1231096a67bcef68377342ac689fb9f2f1e447374068a9a5150d9ac32db738a1caa2193d15e325052549a5f20bf8f99adcfd0bd088120c6345a7b2c33bd7c68ef923a541d4f9564f90923d7619b7daed416ee8273548d54e8dde2c5d76094f3e17e798e573ba4884597839fe4a4eaad52e303edc648a6a3ac63bc07473cfdc2594dfc548f7b424b7e476f63a6323bd9188f7d4788d1cf588581e59a88e36f9a89bdad4a9530f4d102e4e32542d265770022ad3112859f1a21f35bcf9ba3f4d9cf19e7a6030807140ad16360324db709ef357f5468f2637256eff2bfa735d03d40e3f4d28af0ae46211d2f482344a7d9620dc634f6d9661602cd5a6dd88a72607f824d4d1b0e7d0f8e0c0e84fa364fbe5a8a3580afcefe58e0d61a9c3803452237df9690d8a9fd85a98873dff99a3e822d8f345ed7cacbb919907d834810d80851953e0b619f049750284a845ed31e911cc3f7ca19f2f2714e9a22ef361a33eb40b6d028636c2d5b433bae9a25a716c81ba6ac61b6

Within sidebar

Our themes offer the ability to present table of contents elements in a left or right-hand sidebar using theme settings. Sidebar elements appear on larger screen sizes, stick to the top of the page when a visitor scrolls and automatically highlight the active section of the page.

Sticky sidebar navigation with Scrollspy
View code
6a644c00c3b67a5af6b8df7c210acaa6bda96c0a81759aec27f336c1f202f139f67e6dabf42b2514b3667327c9402d2484fee3f393858ec71686b0b3becfdd3cb1e6037714fd04d3ab95727ec12699989ed98bca688c43a2b03626377d6dd32cd101aed69e8fe0dfd77584b623c400b83fa6c554b2be2a179c5c85f1c609515c62df637004c0846d6d6e372a5e5cb49be6784a31e556864678dc01078961a0f22850343304c13d705348345b0c431607541dde457c9e994151000609f7aa6d988da2fee7c46e49dee347cefd4f153502e776e29cf9ca09d6cc825663eb0a9cf892611d4bd0ef0f371dff2abc8efc32ffd0710398db2d156b3a5f9922720f97735b0baaded8b0fd1ff5a217db6dd8145c65a0f14b48cec138a761f8a0f8a4ec193e1eee7456d4295fcd39bc85def276e4f79c47c640fe64e2c4ed54182e40533566f984455657d3b960d83f978a8c2be299172f63f8e5dd66617309c1ed684df9d91401a5bb701756b31e06d49bc490bfc05abd930d44d2bf51bd6a66a7e386053cb97bba2848b2d7aae9fe1218eafb79ad6da21b369c7205f7cf89b3b722e89b756eacbfd2461ea84fd0ef8a9d84477a33135b5a1dadaac8999c838d2a2ec9e923e007148c0fc3fc624e4683e61ae3b8fad3c9c21e7eec859b085293a8efb5c2967d0ddc97ca6eff3ad7b736e65fbb6b15675201c9862b9798491c88616c3439ad04464646877311954ee8f59f19bfccce22e4ac146331e12fe1611c942f047e98a24d674cde7e1624c7406531787c3d296dbc69407fb51275580fee69096c60ded68c3d7b331f4b8e983d586dc559cd02b74dc715c437ec28f7266bc345d178546fcd0ab94cdae14fbbd1f7af0ba58bb15c88370df8499439ad23b02f1cea58a5b27189c0dadfd8b097ad579aa035d8c0c6ba3603e83efaa190f7c92c516afc55f8a6a3eb9c3893a1473a04f78584154ba8c880eded4b266af6d30715adc054e58a226b5ac6ce7ffa8692ee763049886bc3cbe1c89fa3b798d1b5e1b5d52f66a86bf10ae18a7d988d874f555d5dbf76d60392dc693436c13d0726910a2461b6c6f1a7b2bde8f7e45ec9d97ae5eca6e4f58f85fe7f818c0e3be7cb6ac16bc3a72b6df9cde192541682a2484f97cf870a845aa118a0312dc5b1e9fc7a92fa9916fc425054abf159074c633c7b1ac040218b7fa69303baefd7db5d65ac921803a964bc764c674a1eec0bd9568bf400d5f44be398c154d12c355b2fa3a24867dc73b807d975ad1fadd47b86dc5aced487a0009ebcf6edefef746ea775be9ecee918ce370a591e2acd9f2fe0ce0ed3bfdf6a89b859a588720fb871ec7aedb2f094933edfca7595b37aafc96ab62e0bd1991072435e625bae4a67f5d0fe7465b70b7a54834121be3e8a151bf4efda75021c19e4dcf06fda7420211f163bd82866995a41a850a4ac1f4af2fe38bc87c047a0fb85047e79d13db93b3bab0ffabff2ffe738772a86a4f1f6da6257b96f6bff84060f8cc5fef0c451657f5e1bd5cd082436a73e2d2069862b3e279f56511db4c613385acb8608ccf178dc58465748bf2d99b18e9316964a5d12803634741b79e6b9de6d799f00a03c3df8af7c8c249e1e55114f2a9e5a2058d4d8ec7ccb3ef1a99834b6ed3c66e6e569106f3bc4370e5cd5d6170bf654908779b0acb45cfe8085ee57d3fcbd03bacf5c8240d90d92ffa0313c0f1bac23e64c7dd59e9e34d82b70886ce442bcca054459eb92e0520e2624163a3250757856c6778f917751948d82b36d62d7e25b411aebc7fc98181c66b361c3d3cf076b1308fbcf27b40c9010aba960f758b07700be3bbb51d00b02ecf9858704a23b0fc7c203a63bb072889331470a5316e06fe0903cdb245d9f786335ec9d184c91f33ccab1f6c8f731122a366d6e8a84aa0750b2bf57889819eb855e1451f2e139e879930046f7d9c3a7c9d09a4d1d3834b33c108e8b96fa91dbd5977bd3508958711741d5454650eeed8afdc258283f6db970002601b343134e41caba

On the Article page

Our themes allow you to display table of contents elements on the Article page within article content or in a left or right-hand sidebar.

You can add one of several built-in styles using the Table of Contents setting in the Article page elements setting group. Most themes have 4 or 5 built-in styles.

Custom patterns can be added into a theme by copying-and-pasting the pattern code into the bottom of the Article page template (article_page.hbs).

If you’re planning to use a custom sidebar pattern, ensure that you select the “In sidebar (left)” or “In sidebar (right)” option in the Table of Contents setting.

Related patterns