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
16f6bafd9f57e5efa17697814a2fb5807e904b8c5639be7e415a205567df0e2949bc5ac0a046867e40e466dae1115a3a1d1de1fbf1c2dab9f2c63acddd0dd8a199149edffaa488b55684d7d3ebde4ee5ce6b98fcbcd4453923ae5cef64aabce0e0cc373193e81fd820706b7720a91b2b80ab77ae51acaea3bc57b56fd361bf987b74c0d41620b1a2e02cd9582a37ac6bab0f3cac46ea3d63c22b8530029200cc5855dea621ac0d0996e2494397e5b950b324bd4d4cc44f18d7a2a270a7e8040a47585689f35590fc8be4616961f35034de89037c384d49199701a5226dbd92d4f5db93c0a0b8c20e413e5a64f07828fc2fdeb467fd3797f1c78206e26fddacffd68e9c6efaeb82f009c78ea2f22826080f9f67c32fc7d3680ec3d3052713c6f2c7a4b4e1b0fada8e7c82b5cfd83e11279eaac8e95bda1230b9d493aa8f45aff9209d6ea6a83efd0050817c57c64cadf97d9581b0aa29e84ae213f3d609e771fbedbaa42807db6d295dcbb41d64307fd7214e42abc1e775ec6f83d6bb8e31a9696144add924b8ee264d7c1add1709d9acd6fece6fcd18fbfb54238a5e36ec0753ff4301970076b78763a50de92fd0dcb4756892e647d4e4b9c4b43f8943b4518455f7a1f1e531a3d0d2759f150575c23a17fa91b9d263e13137a4a75d3ab0818125fc8a2c3e14990bd3f8eab4e0d76951233e0636b33781eda8999be908ef4db5e3439f41913e676074b01d7760344420b8fec5a4c0159729cef06123efd07e08889c426ea2c9e810b91bd3bb7a921bd1831acdf8516f30d7b634f5448aa890771f23e97b6730450d5c6b2cf9f34f8c059eaa217fbaa9dbdfcf657bba75a814f7c660e27602a758ab8ac16e7c4c4e6cbaa71f76909a77deecf6ea37f2cf381712c16659eb73bd0cfb4ad548633c9026b3c5e5c539559525f52096f7ede51f8b9948993a05d49eedf822961af8c717e1d49412050fd4556504da1a1ad982f2d9496b960713f8939574656111eefcbf4451ea8277b37b06fb67ce9228eab5f576016af6cab73a3a6041239d95767ff964e617b6203643c2d3843a583c30b1a114f24b6297935e3b1eba3d94ad201ffa50bf6073c8df66b16460a558722f3ce3aa00accfa0e7599d3b273e4db74f103accdb92477906cd596a8dd0fcf719c2b32262311ca3fe56d8d9bfc780537fe1622dec085257bd69081e7e262e0b97a96a1762c7b96ee1197333edee2269a69dae664b3e156d2bab42b88b6b82a1c073c50260fb3bea515c5bbe4d94980fb67a8de633698d9754b4e1507d50aae97bb4b25362813471ddc4bbee3b6f295edc28fd6f26becc378052d09b93fa00c1c0922b919b33a7cdebb8550526ad72723978e6b4fe867ca35a6df5abd73dbc65b61048e1dc555808d9fe2bcfcaf9c24c7c6951df59324a7f1c8506074ba3778044391acd8a8e93eee75469adde45c7b72df8fe1ce2d2df8a90d419678340f7b813091e227b
Simple unordered list
View code
782668dad92f1964e57acd01cdb635ed2c6ff2edeb20e240b547fd58b28a33e4ad95bde6d63020b6985fc159d28ef32fcfa07a6be6b3d3d419198817af01b5e53c9aee9e28c8db5666ae9922633d16392428bf5c51ee087e18ac9d6fae747a8df4a74035b302523308e355d74a3ce7f6a79736fe2f6f10ad3551e999e9c68fdabd818685373c775999cf813010416f0220e6f0507d754aee02e3e049f7475bd37c90774951d105d9be082103b2de3d2ee1e06086cb57d1086e3c4ee0a05c8a3978a5b0ad6fcf6617b817671114d88ac727ef73493f39b42f3589692d80efb866bcc1a977f823d9272d0858442f3ec9b30b98946aabb33aceecfb66694f4843dd317f6fb8da5e243df06ff8bd8f6a554c61f157a291fd1dc3a9b577efce64376cb9792b3f730e802e9093d8864085b12e675a348848d7fe8b2950872f62db8509b0ef4516c27b766c21ff9ee0d76fc1ba5eb691afdb6ccba2c805f4cd5225a174a31bd2ce5f00552b0796d8f559fce68644a32603ae1dd2f7c7ad13d79754c8a329eeae3aff133b22950b2eb1000f6633a34ae2775f085919d642474927acf74db3cc1dbee6e731f8d20ec145c724cd50a335fbd5c71d559c87d08516b60c15789fee0e6a2b2e5c83dd184c6a26e3b4bf5803802b21883726a00c72c7a5bb124ff10a22efedd3db15d0fed783f3af5c3fb724d78adee59ee3cd0d07801fd392062633a12939e57a9c3b72a2d32ec3efc2d97e9de27e71b8278e28ed63ec0072b1894746da5c54a0d374c4ef3bd992a49c3e36325989637754bb7556bf8be0a5455aec45f33ceb9a0fdaafb3830e0e0ebc989ffc5fa082309a138f33b51ec301161435205abf5a6a6834197aaabf79477a0f7eeee5b3bad41f490b34b0415486f262643d474a7590eab5f3d9b116a6266c0a2f59cf073dbe0defd2af523389ceac1d29e2667515dad29e51ebb6ef3d13fd5076e7833d0b3b87f97b0d45f6de2e89e908f22ac5925788e61066d49e0e2eaeb75fdcf7549fb3b3e0e4ea5c053eb46124843d1b2b1e318176f92a94aab9b961b74b6a800813a108f48021cfa96fc1077a6c594075f03f8090ea21c5c7d45ac5de03c5c5a469e8e62b26f00eee6c4525c98ba68a8cdbfea871587132bd61a62e14806da6697fbadae28930504efa828acbbaf303cd2d8ec9a22d3604a45a062110fb3b4d2de0a791028f6c1d54360dbbfd78fb551d9289c128145bfd94720d7f8d4d190e47f77b06290c0511c0e7bf160b32c7732ca25af2b97faf21e25b7b3911ecadb30d00dce1699c74407379f7214f599f7da2435c298e1c02e25761eec02fe68aa48b77dcc1108b3df3b97d03b9306ba30676496c9c285c9e44b35c07a7513cafc066eb9a38cd8eb640ecbf0eeb05b0b05d49e57774da3934a37285cb399132fbc049407b8aa7ba2fe01b2f40f7bf0cda8bd01560a5e39016a5654b5dbaf640ef6dc61510dbf4b49d523c79e643
Ordered list with borders
View code
31bdfcba5ca31e12ae2893914f3d1b7596f9d1064ee6f70cd1a8ebfa82a9dac7a460bd019593e9066d430ca940f682ff0d2a3c8f979a9c386abe54119c4e71728fc62d3d251426ec4f1a9b623889c1a79db933fb52dc3426d6442e96fd50845dd26aa2d159609083a2971faff7ba108b271f57e4ad99fb120c23edd297f405d2ed39effccc03fae83fa48a3d4e9463a930faccf94f5de3910075683acbadfc1a94770e49f53e599edae00dc863e7ae6b09650b5a3b9abc3f54dc69c3184dc1eeef719def96cb2c5279dff827256e88afecdda8fe0fe242c9e264ed0a6c3f9dc08f9eb950ecd0b9449c66916626b666d1877c1ade2b99fc95ad43a5b2cc7bc4f50d498ee84f5673dae50ac8498de3d2a41f61d3f626dfde725d532968fd505d016f9636a24c4215fefdd7bc6e4dacc151805501c6fd76711737db9612c0861946b27c6bdee2daedad128d7089dfe2e26f94c346297087fcfda22cb11e3c2c12662e8e067088e3935e08dfa85173d7fe806d740e024c131662206f14afef2dd285f4431440562301e0ccd4b37f891722ee758ad23e5b00c2c4b3b8d461e8440962d3595e940d8ecc32546d227a52ec6eccfcce569b7ba8c27532e72ed573ab2f35e5953b7400df9999e40232eb0562b3dc11473b297504d94d8b680f818cf2b641fce7c9a7f234af23ad9f730fab0bb958cf1a38df984dbe7a3e6502da728f86813da907cc8fdc52d1e33e4783bca1c314b1b2a835cc8246264bcb6edd814d38ff65a925c2c0c572fa851744e94c11d4da84c16d474f97d3fb47bb1dd84324b5c41484e81216cc7eb618f589e68052ad7ebe78692fc0a1df72ae32d77f324062d9623ef8c6fab1b3fa77c1336ae51445430d775143e9b413ce34ba1a16be0e65dbda8da256753d490def40eb82e2861532fde881e3b7fabbb5252045ff962d5022135a94ed12fe8a42f79d86056ba9e85546089ff43c84d129885cd788e2c4fbcf0729152490a43e3cdfb1a2f8c23d650031038f26f7ee288fd4a460117d9f0647cb1cb8888e0930d482bd9e2a97cdafcd168506ea61b161bed290c5795ea68eb43082e0ef1752f3d83204e693642d3067f9392290068df267c003db09e9ccec2a123e4c263f73558d52b5f52417e8d31b6ed402ed4b27e7dd494d1a7908806d1529e097cebb9febce0b07fe498d59193a8deeb5ec253377723995c9e5c0cffcaa870343c9a80b2671e23f204e9a570be30172fa0797a0ae54bea6b8551013a1eb5ec7edc75d04acf39f089b5b94480635926021fbc701ba11c88d6f88d703ef2e47cd2dd18bdc46b44d9c516a9093caf5ec33ade76913eeea9c07f04958372cc621f3bc13216aebf644c6b7c7bad2f0182d018e97a9a66e299ec63a5a325479c0744aad1046a18ce2a23ce1d172b3988a9bbb3efb44f70413967630ae2e99e6bfd807cec20a1484f0da0cf9398f4fcd5bc8e6730e1ab35d9bf11a91cb87b0e035e52e49f436f5aa301fc1d5d045f460ceb93c916c3656199a0ef034224e72256b
Card with list group
View code
dff039f9c0f2af1a234f39ecf5fb5ead665ce7ae98f1c30d1cf6a1529d4b5f65d09d6e8b8d05f446750f5f5f81684cee51fc572ba136b35fa39aab80a762f999c498aed00548fc3ea90312071b590eeeab982844a9cabd68dff9b72a74fcc569930370ed91e330c47e9289e34e5b36a34e64ba709d395b36855b8d086a0d13b33d170c89d58c066af4f129da01e2fcefb0c94b870f686e86d204b23cf5b84d9414ee4aea574974c49f782d9e6c57722e18a32483e254535cc6ae02e7aea6f9321b1b4dc75d28f294ae16d12486b940701eb71c9c30de55fa09ac2a2b44c510c599d7cf4658b5c1b9b57ec49065f861fa8feab14e282285890e959a4a33426597022022474c080d09644e64b76c31993e694e0b9224eaae4f8ef56fa90fa69c12a741eb2ee9cb00461ad297ea1755daa122f62c0d6cc3dc780baa59b073e5dd48fb35b14fc19cd9525185418bd44d3e6af9f110016cef86c1b79b55aa034fe721d60e510bc49068c897bbc9b71929e3aa01be9d4da28425ae6b701364cf5bc18eafa2a8d23a21e57ca9cf08521e039ac780e5a34b5ad772310b08a6657bfe7cc6ad82c578db37bf7926876cf4725bce8c044aecd10678b1199b2fbe2ed4c69f28a0bad60353ee939e9848108c070396a99cfd51bd957114fb53d8a4dcf9021de47d8caa829c135a8edddb39b41112cc3d2f90299b7bbb8ecf586b6ae6f6eaaf17d0e21621c0d6925038d6c27a362d11d368f41d534078a3a100046904c88e4aeb378522460bd1de2478457b1cc98468551893fea94285429f9d3a57d8f2e616286d965b8a2e9f2f7d9bb0920e22be68c51f8aa4c315473b11b5d33b5414d43f90a1364b7c39343b10b50c52831472963b883e8aa1b056a2c7049f3aa6e3c5eb89a24c908adcc0a05babb759ccfae17f5f4f18b64a514986510a10cd4e9a8246617496f0b5b6a7d01127e9930cc13d5048a6b1a523e5c32cb16322feb19385094f3a2646a1f6bf9e4f235dcdd248450300e5f57f09548174b2e6f2d198c1c5feccda270616f355723e2f6ace22c4d25bae34818b8156b1b78ec204b637e157c6240a717832540ea9df6f0c2c3b129f2b533a8094b0304654565c843f7b0e329b3835d610e62ed30f19af8709622371de7bee5e7741c9391b2b2fcf6fa7d48a65b34b13841bbe5cadc6bf5b2bab8862920be8b4b9b07b06dac160cbd3511953fd9a4e7f40356e85177a73ae47fc1b953d7552e83f2e13e026cd41f2827f85609dc634e8736aa8e7deae9d406200db461a87e1b2e74cca1ab77beb405900f513eb99717bb503f64438d6e1950c3be31834957959073dbf095b0f347973e7807f6afc497e428c04ebdbfe32d11ccf2639495d146a4ec05bfe93022273de364e6de889325550e58725e6696ae29f66981257bc2c83d538a8b2ac20101733501f51b4073ce5ceecc053f667e8a22b2822cca9fbb122b0e3578e982135dabadb1bd2d82dabc403bc31af7ce6589ba7e3521d09cbb98a7543e52afcc5b74946448b710bf0ca88b92bf29d4cb44ff494a064e69df8719e738794fac1625932da24efcf9bb9e8d581f0d49f8870a989806084f46f683f82608360687784b0b160ee8cbca7bc615adf0cad55787d29418218adecb0d78f59cd9476ded28015504b6037d47a520bea8f78011ceb80ef1b60c19e810023ad7955918d0238aa5f994c43fc4a5bbe8cb55c7d91157f18f250ed972b025f414cab436d963fcaf62c0cba71faf4fd276a29f434ae3bc585680f05010e3bd972533f5145ec60f6bfb146a80908a41d6c0922d4e5670865af609a0a4e067dce481952d5785b2f006256c3beb4300c1df4626e8e2b99b1141e3e158028b4334ef98e9e871744080e71a16d807098c46d32b84c376066a8dccfd7f06bf972f48beb9af11b178350b954ffab05bdc5d1dc0c6b9370466dbf59bdfee69df2715935dad755b77924175a5efcba4040aa9952c4f12d1116c48bcc6122f52a1814a06c3c4a6d4f488dc3912089b8296c1ee5793de0a5371e633acc102846c71116224c17685f9d764835c5087a5de8bdd7c567272f12e8bcd3dd251d95e03146e3eeaa24b509e6d555364a1225e9cc8cc9160cea
Callout with two column list
View code
26cd0f979247a95d8d4cac370351e5a6bfb09eb5ba33cb1f94c78c5a06b483b81170ff95de9793951fcda987f9761baea350878ecf965bbe3ce0eae8d05506c1c2b6441dd021156f54483924e0870dae31d42802841dc0d2a98bb3f6be244f71445874f2c19e3f02d343e69893eebbd70fe9b0b07a33b9e77e6ddc4cd5e6acb5cf84ca5c8026367c46555aef36e0e350a763d050f6733467574ac2a48cd0281a6b94601460ea8be9a7de49924f244b10cc4cdbac6597ed888e42386180cabc3a25485b03f4f0add3b0778c7ea7f125383c2aadfbd7a021f4f7f5990bf6ef08d23645f2fd03e031c47624fe06dbce1d4f079963f9952cba4a4ec2302e0efbdc536c0b85bf2d1f560d17334add496cad52234f1aa474fe3a285ae4597ce75611b1329090bd9816f3ba151df674e1772aade0319e5663915d7d4d072188d3aefac158659022fcc6296f61833bc1314998234e708b93ada979eca1e81d4066af29ff8b648031749349b9c2a566a9f17c54aaafc9b68a327927ced16ff4baf9978ac28e27dffe85acdde97125514d301722bfbba0f7828761f051c5ed1e93bbbdce7d556b9ba61e58b262de92b1b223b66cd3fb3f5e3c9a885011095f8311e91aabd75ff1288022eccdaa5260fa7594c6ad62e3b9a7aa6e98fbfacead84120566e673ab7b3248d3ce520b4d35ec6c74346f3fac6d3bb86babbdd3eb3f1957d3e9bf9ae672ecf034b5de351a99b3fbb309f506334cac4b28e388bc8a49b95dacd9c5a4c3b53e64cd029527857d961713d07517bb9550b703279702fa8da77d3f51ee61f085d89ef4d70766ab76b70afe3fe6f285f3aa49b0912174860251c848121f88e406e22cf53f603ecc3599a4238017cb360cdb1c90155f0f09a7bdedfaf61a81c350a4f088bd2f11df081ad4bc48b5b153a269123b34f7b1a5fb7579a1e19264c6709f2d36066464d432dc650954181aeac9f4de04749e9516e07ae0ede9976c986623582880c15246c78f12b669ba8fbe5fdf7de31e4a4eabcdb78004a2782048e557196a09383bd5c1fd9c056e4d20718574d6f22108b60d4679e1a6a4faf0b8b19142447fc36490586849e2235ea4d78721a3c14058ebf051f94c163c89e030a6770c6ab110b81b00b7b50efe83ddbb093b7ffcd35ec59ad7028bc9c726ff1022e653071c96594d27d4ab98e535cf445917497ad5df9c0933cfac652f2baf82227f8c7e17718bde9c3c69db6f4bff3f61428516f8f63fdb7304cfaf87f95ce88be03b8891575d56b5336e99bf7cb2cbdf41c27c0e10dbb84af6db70824c3f228949e59d1fab01d57e4cbf25253e427559fa341b5acfe5b9d3918844318f7394cd8565e13afa3f4b7e8ff3393c9dea06571af62614a1b99d43781d026fd8f33a1eb1d5c14e88e97c44e5ac23e2857dc875ffbea9c4ebf40e1f0ae3d92f2179b7128a50ba276b24632aa2398f9ea0534bbc4de614b5bc3def03aae5f77adf5ffccbf1aa5f966106a98598d011090a5899bdd62c46a76d6e7eef36a4cda7b123188a961a44790c8c53146ad03398b9fbeca9d4b4fdc732d23d0b8340618da5da21dc79caa8e4459548b079a2728f5548b3f129a6c6fbc23e4e55e5e06297ce24d2a92a2f0ff2d2d8343a72d8388639ca6cfbf45c6f1ff55a49bc3e15366f7b8cb2f05277f8afe41258272034bfa5d29a351faac4e761023453e4f2011ec770e6a1211c69c88f418f9b7587660d03577ad387c02adec05bb4c698b7423914c7f77548ac0c19d134021d11342330c71cd78833063ffb0b8e78f921f2fa0f29c89f9fc68126af72dc1ba4a077eb81a0df59322a3490de2e37a0ea1d7c86d9ed9309dd17fbade7784bc5cec699d8b088547b

Collapsible

Collapsible boxed list
View code
31a31a50ad19a5284c318698f7e9189d4da681d2f5faaba46e0d09beb7af471848c3ae5464859078f9dd54f75b58e9607be33d897b86b39eb893aca78cbacd151de0f035525256cedaf5ea5085d2eba9c2236ba5d274fe0737d899b9692167c7d1dd2116790b94a81619a3eb05d61a2e4b849bda5f5d02ba42b79e17dca26d5a6cc4f8708486609e06e651823ace969aeef1f74a8ccaffcc1187344ecc083f68dcd5eb24024102a21df43b4a0cee97229dda3143fed6c3a19347f1067d03c599b4205885d8a21a9f6bf0c758eb36541bcd16bf7ec232fc8c74c936db8f4445d884c1aa6f75773eeb4c559c26c71bcdc1a546c1574bf3d6b8a02268394ac7b7a4c336bbf81ef5f040487cb464f8b01aabd7eaa33cf705ab469d20461f524711e7095073120276784fae38e1f954f92592f869eba7d79dcbedf3dc501aeccc508eafd6d1a34ab619f74b3531a868017dc62cd7fe888b469ee7da842bfee7422c76d86dc1bde15fc87c9097cd7cee0a81181f9660f85d484cca3c37084ee4129dd84d332a456d5dd42e5abc4994a11343fce57980c8558646ea65dae38ae8ff2a964bf8b528bfb6eb9681b1a632201055ecc7c72c4fee6f830fb4c3dc8545e3d943467d16130571e431adc603f4267b7115ddb031b6aeb80cec73a846c09a47618e8c0f91f4b6d8aa9d47ad921cbf32d68867cea3c6a393f19373dbb0d14e78d86f7796559f26fb18d71cd8eaf5cce94a6ce1a0d105b59fafc75aeceefb312ec4cec91a00cdcfd4c680841ff323021e5ceb7cd8aa1a22c8aef1ef1635ba5315d4e5c810164437e1a8a35cc243a0cc0f00360ef4788bffd08018f72ef3813aac25371b919aee827e38ab9fc111b5e2a617ac75cc0a81a43210a33959e76085a83c242c98491dc545b89833b6aacfd8da937b93983262de7b51fdb826d91d47d05789a7991c7d43355d1e6ce22bda5c0ec70f982cb3e5652b8d82d36511562a22d38f35babc64ce74a39841bb7a1c8d4ce8f73099053d3baea374c7c1e2b2622edbc590a52037842d7885cb3b0ec418a6aa9635b8f8bf1df5393967985451e128e8228e7c00d74fc5099641ba853081d86bef4e570f36492de3d84918cf3399792a2dc79721384fe6d35d6aa5b1a84ee13db62a14dd00ac5666562be64999f14aa630a46b0e1e91e4bb8d3018e19b9eeee8f2237493831315b0d404428ca960ecb8542c32bda894de0b578fb72a5704c5944dd2bd3308b6d4a035a92737ba8a82b4bc247731747cc87f7f0f64d7b4529e9b544c5ba7d22ccfd4826f11fdcc7f2e928b7a06fd4ab748cabac2f318ba2df1ac6155840b8bdb5631d281fdf4ef2847f11694679aa54e8879c6698731d72daedb506d7bc57b147bd3faf0092f2a353d82fffa77e2cf0d60f576dd97ab6eb148b20be3924a44f2e78ceb5c5a5e3fecb02d42f78b1df455b7f7ceefb8d6ac2abdadc1480466d35e510810152c625ebbfca06d2f47eb327f7cd3a029fc3b3238f628cec09b968952e9dc77b0593e90de77929a97f29ad503c475e9df9cf21148cf1b93080cbd9733cbcd74450e51d58ebed2f5c2e86fc73f8ab80d854af8b61ccb2318c8ae855649826032432bcc3d0342d2ad532180a3c5b59c3a0464e2ec2314447951fd76cda42db34dd1bc6f3d9e2ad6cf82f592be83445f14d2f4ed48425fe442f82dc25ca07c466b6f309de8d36d5e2b2fd151f888bd1fb71c01fabb830a9c7ab297fb5ea076af80b94f4d068bcd010b4068c9d99c14b6b99297f49157084b2ebfaccebe378c62354708eb6c67d1abc5be0bec3f4b670d58bf6d03468c98fa4aa15b857ea90f076f4fb5711c05bb89db71d747a059f7f3942abdf986af643238d300f83595c05b3626603626b2aeb470e9a2540140ef7c6bcda0659f0bff098613f8df43da18e2c533cbd47cec43484bd15fcc6939241408d8dd05dee2cd1b6e6f6b810bcd72c9056997526edbc97d475b36298b2fd88ddac53793fa4b3cb945be0324810f294e9a51cd8835fe95e2700f5f3d378cb0614311b7f168c359db98973d406cebee9343369bd0b6caac33cadf595a5bb6b907fb8f28c78b86b6c8352243e8ef1fc8a78f642b321ba2f9e8cd9768d5093af85c85c52f251a66084f42ba502386c08475fb97ed0a407a1987883908575f714b5abde058e401a2a07ca3c1c272e7e5a3f29e3107c046798ec7f855c36d94a245ebd27e5c6c61457c33dc3f74258f970a4a7d48fe67e1a424cb654410e9172391415769a3599a5804ae855239c533e7cede68bf646bcbbee32215a9fce9e199fe031b17b0064c447e9a22dc69a643d0393b67284b51c8948544b5580506625cc097c444cdc274c9c30c2eba32f37ec609bb22d787c3beb4b3d946e27d221317ca8e20e31c18df0c659404305a2120ac27929d673c9449b1b57caf4c446bca9d6020edf56aef7c3926a3e9408617ce05fcbc4dce44826103071cd8490981d85315896e8ad566922b3ef67dc9b5c1ed133a36f73f6977169b7f480d6e6159cca8d498b42f906e469700ebd824a35a41d150a28bf077709fdea84bd8a02e200d068841e3b79c2ce9e714d38a53d5881548cd43a4c71a414fcdaaa8dac5336909293dcd4edd0bb5dbf95bb5065a24975269bbbdaad90f6dbc0dd48a693961151aba3173d2840a28eb0926ec7a95cefd1fedcb8b5a163d629a1a9da51db627d38548a684138e82a22d1b2ccd13f20bd66e91f4d0b58170ef837a6a542f420dbd2d11f17ac16f99559e65a460717d7eb7a6a95a03ec62ee882eacbd8f8d1d0a3cb452419e613bc8265f2210aad2855d692b551f94d21ec23437dce866e8a91e6f097185c717f63d8cb1f506260ca9778c5336214353a5a06c44576a7d283d339a9e76049e6757ef55043a8f435d463500e72abf43c2b297c89346100d82243985402c4dc654d3725ea00ed8e4c0e421fe500b1b048e1cc09bdcd3d25b72b870e2aa24c9a64b58ce20afe47746a7944e8cad26fed875ea8b5efe78bb79f86a3329d360375cb52e0d76190084de78becb91eef0dc24844e3c54ad0d7cd5a935a5dc4058624b07b8596c2907bab58e53df34beda0478da63d09d91a51e0332b6b91aa6e3bcbe91f6a5f48d3d6adcb11393b7b4623bfde239c8507060fbd1a5a057e157896ef6d7d7d84d05a6fc58793a73a27a7b28d15eb4eec7cc1d87a2277e8afe9be94d888c19a857a5571d7170e7c443f7cd53872bd7460df21ca291ffc8d73f9b6771172e9a4a5e167264bdfb12bada6c76540615e10258a27ec8986abdedc8a0d7c7f5bb0b4eafac460ace19945e1b60d29c393f08921efbadb67063

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
a3abe1d449f84490630843df64f7535278ec5aaeae9e02e985cc0366beee699d0a528d6188570d095a72aaac75ccadd411b2d9f2f5ac068254ef90ac1d173879e07565efb3a41d97a5a77a430053430afd6037b070aa1d9c592ce0f8b86097313547374b39bcc4c42c586545fe9b391066fd9c65ac8111178de371bb5d6b5e92bbc36e11e4fe8abf47091131867994f20009ad7d16a99e3f4da09ed0e4c24ede7f0b3706f29ed2aa656ff003a5dcdf995bb29a4f5c4a61a4ffbf82ce93854af0d0709601ccd176b6ad3296d862801fa5df552c30e65aa96c31229e70ae7e74c78120f99ea6eb0d563f9d0a6f234f6a4a046df195a57bb4567e9e04a6834df8ecb318504eb7e0a9558ae9c0dbb08e650b3ec6bd830fe75df86bbd7175c5c81cacb9b808e1ddfe5e5526df5c1a916d3090d1932ecaa7af307fd12ab015261e95a3d5c448e284334e0917147fbebba52be4f1b02aa0fd3a81e73c1d79720481f8ea6caa8734d2c5d9c49d0a748c04fb02f6c91aaf690f03f275846acab2b9cb8578493328f088afa6b9a75677a935f50cc786c18912e532e87f8a233c1d645b4d9f8f6adccbb9cb98142d51d8a2bd1efbfab3fa0b9e8c384144fc953d1a3234737b7d2bb3c9688ef4ae5c3c3fa7a1889d3589dc7726ceb595c110feb230d320ccbd4f6056ce6e8568e2517592320f90513d1dc7afed4365349b16d5c03245350282274754278040dd4857dfb1218f1c1618c0fbfd8e09668ff78ca252ed530e96856139b7c6549767381a9a95cad6ccd2cf6d3e64a7fa8347b2c1e9f818b3caa927fe2e87ba3e2e1d630f8215eb1af0c96c666024c7d5d974de1c4153449a39d025a134130c74586310316f4d03ca424ef8cc6f331a4f98f43e2928b99002afc33afb351fad4fa043246b4160a783faad2813fa77eb179c695d8661e3614cf77c73d2f30f0d895a4d33a82c4cf1f37e3d832dd0c9be667e7a424f457cc850e5afa067b07e2cad7e38ef281fa66a4f760284960ccfe769be5e2ac299f01ce9a0bcabc3bd8f5ecefc24c9707397135ebde384bbed19b75bd0bed7889b43d18a2cc97d3b1e96f5476aff4888206633efa3628b1122771bce2f9d41418167733031bec414cd0f808625e0195498048969716f0051cf95c5afe2536fad323d0d99e534eed20d51337b3f848885b94811b7408b30caf740b2ad75a74139fdf4e6c036dbd7486a8a5f892e225dd094205f6bc2627c6329f47cfb1e707b517d04002f32e416d45e9052f764b8c32b95a0f221a630aca9004401c3ff786c712c2989d7c632a5665cfa86179f41960181634bc84f1f6fe28a612569d45578d0bd65c2828ea830a4928c54755f39d654770e8f99e1b44d1bf9c7fadad565e23c03f0bd6536e4993a20ea1a4dca178032f21d738b4455fdf3a979a79bd228fd125efd6dc05877b870cdcb29d36119da9fe2018ce049e3f5060e55c35fff4dc500d6183ca549ca1039519c2fb3db15fba530095d361e65465124068a2c6039abb6d47f2a2f088301d951e4089290fe69af3080b67af67a4fc46414b78c0cecbadc61e26283264be09e13bc1a483a6c284e05e1054a62c65a9180fabdaa343fa91c7a29b1c9dcfa660c927f6bb4aef9206221d484e90b244d6362013b3db7328ea5126925715a9b6092470ff4e214a1e4f50cb6d2ed68207ec86272e53d9e5097e3b5320c4eedc625bae5d11c5617ccc4cb9de4ac35f221074c82824510f014d559a7d9cb188362e43bdda2f00e85a89a7f653ebd200f341247eccca4449a3c13ed396cd140d142a9caa878405c39f19d31f97c10a26182ea67346f51f8ff8e71cb52ede8f7610d4e6757893aab86ff3a5d27273198bd4d175609e4fda86ed0def30ec673c6504a3d579c21fa3cef6380810c103599f80f640cf371c938647a2f771d3e3a2e1572df569e787931078ea647e50a88df56465e43e47ccf5915112ecd87e42c16998c46aed52d42d7f9e0b3f8b519b926e0e248992f1d952c39655fd0f4f0e9b32ea7bb

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