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
bfa24048c5da2f8fe28b118d232ccf38e4e72bf4d3181ac803848a0bc50d69db60e8a3ebbd79e2f75cbeaabf51b4b732cfc2027eb351cc7a26f049550326aa793deb0d8989a052038d4671f15b0698f05643207acb1ec2c959564588f4b2bef589dcd6b2bd0b84e1a8d08d4f2939028494de10601cb6e509894b794f40c02d2fcd4c98a527e745d1b9a132ef4bdf2eb723ffa85bc51fa6bad32d075b43334b3014049e64203703ab2e58ce6920cb1cb45e6602f0bd5a8dc952a0b2fe4b7566b0bc5e3e034ed9dd3298b1f8f66d4900ba8d4f98411e0777e499b03f185a35ca6b9f5e130e2f26a928ec7216ae7dbeafb8c5ddfd6e9d6088eedc4947daacb50c3fa9fec3b02f57b5baf703818d0d59b4fd4fb1cbf8f12b5a9508c55c101e4a53c3d2f9e961c8d73b11efdc05ac040bb9b0ace505bef5d43a0defee81abd40e1ec407d82c28268fd82d09da700ebbcb1da2967aeca85076fce2d166b9e95d853d1fcded2470f35085ba47e07a0910a698bbc0303131b4d6b0091b5270c67970c336c1d0697c972ccea67e69b3f289ecf280c84291ce5d539800908167453d9de78e4ae532ec26bfcdfaf00fe6d98b25f0840343529f79069876b7a448a1a035457158087a901a234140479d87184e2992238dd2ad0fe6252ef25be3950af18b03d6f111db13b10d4c22fa0bb12b7d54bd683de0f40cd6ada5eb5a2315f8f87c951466b5342ea185853d3e1eb9b94c06411a3e560823f05fddbecd55ee0639f96fd32556cb98c98a543926a58fcf1dd2b26a7835fb38221da0c08ca28bbc8eab139c66d06b05d42d1afff8c3e26d2a330f39a7e5e3034bfbac74ab07a0cf27afa3443910eff8677fc0825746ea8c1b0f75200acde958c9012f23badeefcb0af52b19b0787944c876b6350a8e5ec0687cc41d6a37f730665e980351bd125538346ab6855a52bdeb69e820a1e3f6c49892814c436f04e7a89a06effc1f2cba1fb1cd0bedc9d70333e6189a855abde11bdf9aaca260c5c64ec14348b53d3de4faec7f52815ec0fa4daa96f3dfb3def7632936daa58c460f882ba7be1906ad8d4f7fc3049cf677c8964b0e714c313f001bc0bc1c6e27b0f8b04fb1fc907c0ceaf7926e2f0faa355de8656857ccb3aac4a400c14a4f86d06235407e6acd238601e2124b37b0b73e2d490b6efef213349c57a15bdca1d949ba565dd2988b5919cd959886da1e26150b34027eda7bc0c9ea606cd838e5e745d1e7a7046d81024d5a213aab9880d912676707b5500928ba27e66727828056c66b41aca5d634ababfc8144032cf304cebf62e0a8d53f8ea74b0afe021d5d92273839a8b82f8f67943df20d7b6c78e9c0bc54d5853bb18f5e6dc2c8a0355b0adeaa2319f0be94e0ed2827a6d8880121078767329debfd98c5ec8fee4944f761e3383c2c0d54211b86c46c10e3199167d82387e4f543739c452217a52e917599598cfd3284d7226093b1ea4aeaed
Simple unordered list
View code
b21a1f65a086b313c59dec5a8655448c727faf6f5de4219429a07c3adf901bf6263b62d45a74345c3a0c6151f517b1d3accdb8f6ac0792f9d68d52b3924aad64f3ec735a207fffd43c7e7841d86cfb84b374d61e830eb92f2822d8cfc187be44450c944728dcb4768c230513c4bbe771ccc1d1ac6600e85c7c496f055b78e11ef23658ae823b67ebb4f1177c4cd8a0b8173850a9d3888f49ea85ba44fa42b72736abf978b71f5ef44a00fee23ba0856e0eb61efeb131b1e7dd7540823c7f6148e7cfbc705806c92a6cab02d7a8314faa86c8f64ca6a852f3538c4e3dc911898d8d045462d78188fc671a4c51a681e1c0309d267802febacb04b46f7746cda44fa271625ce9315ea135089a4251925018629b7c6177431ffb27607100e33cb327a6a65acb8db1b2a8163804bfec1519b54aa348c3bf8d8183bc313f49bbd9ba976e3cf805f63118a64ab7283443563e02f417194f04ff1b468ca51b5fa499193c56ef6d12c4b7232761acd873d2a39dd166868dbda996dc87107d091cf33ca8161c7326958dcba899ed6b9864d70d72036c1ba364397366ff29b14d94c94f029ebc8eb88789b7f7978b0472ee4e5630136a72d4a7fd346f5f8af2d1093079ceb1f6ce1cdf4dc90a201dc8489863696e27aa9afc6bd66350aefc34fabe4f8263512efe4fc4b8cc2a127c1c85b8062171de5a1e1721ec6f110729b277a7ab4c884110bb06b7a03a1f1fbffcdf4d8aca9df37fb3a37cef95a68890c66aadeb834b65f5682f6d3efd5c6294ba452ad54f048538e41ec5b05eab2cdf87c70ec34693babdd273c77a420c2d9d74e7839bf753a0830ff769ce61ecfc6a7f3088d79a3ae63da88afda3879f04b306c44cbe53c3f5c443f40252c43427b699f3951ed497b4b4c59187e0c39993b81ceee3ef05b0329d5c899752bee3a602e90ce23fa8449bc0a4194eb877c661f7248203881ed9fd6aa6e0a2e9c89df4fb7c82f1264adf665ef8d1f3d66a4ac2a92fca2ee2ef84e6dda78a2148d8aecaab4519f03ca61f9815759f7d3e58c09080f47ce8502b9e26920f28220a442da9b8cbb1b66863180881bcb0123cabe42e1f368169e8841239aa2aa011a68ca808212352e91d6c47a928f99d94bbe33fde86a6e32d74893497fef7251d040dffb378e079653d33644bffba61c2f29164677f145a3c12b2375871b9614a374d022e2addac72591dd96cb98fadd7bca4b0f61b9f828230cc8cca0f4021145f4c978f42871e664ba7a23d7797bd0166b0f6951e504c27940de561a45d8528562d7a8b7bd708f29d9be50833e144379ba992dcb702bc286d38efb5bbff660828119b607ff2f2a34c5980b6012762cf8dd93a154a2de013549ae0c506e7ce7a6e9a93a102a127fb54514da17b37f1f72b8f4c56c7a484952bfd6d2fb93fb280a824448bdfb5d82106e2b51b310ff335fb0392bd623efdb26e3766ef4618642e97ed5e248c4e0bcf9dc2f2c7
Ordered list with borders
View code
c6e12c97cdeff1750d1efab43f49b02cc496ffbdf7fb25a3976142ee2e2e69d14927c12ab325b8440d793611690bd7d3517455c1dc4f9fecc0bebbe3c3f26039ca7d350bf15a9c227a2cf9e77dd4850fd2c8d36d918a401ae60353ee270c79201c10f82f412c95f68e890a6763eba6fb87eaea26b627358299e907a3bf96e3a470c9faae3c46f9d9363f5a2ad12ace9e45b429a219bc8efa27f08b5bcf1f34d75ed61790ca90d6da809e1987a1d17bba83755b393757a19d3311b648deb8cd7a5938b82360a7309859366df8374605f50198f40e3220739949c7a09129eb8c12570e1e7f72fb190b6fa62e3225b318010e49cffb55ad94dad38608bc369fad4a6e81314cdd7427d80b5d2d179620465d628a2b2ccf6e1782f7ee30d1f475d77b9e3c32adc82b031ac1f4e6d042dd9c2c2de95ac4dfefa611f3da19859bbc793625ca48c2719088ef7091550b4a07d55461a0bf7bfbb2e999c0650f7af652eea51d8b369fd0e6475bb704ff9400deb33da5d1d661e2456d5650387ea8cc3fe4a57e56e6fe94c9f860632a9b5d4aa0024537cc3aca0ef68bd51d864100b8bb7a8b89bdfe76d0edb362686110473a859b82d205ea99084b2dff8ceebd2346372879a6726a6f15b304111156a76810962f464e689f7bd1062acd2e66cc501d15cad226ac03a33c7ca4061d7bc6a4693e5cc076105f25900a125889fbca862bec75f9556c427bf5e499ede248475891a5aac553279ddbc24fd2e7651d04289d381121f78d20a51d611ec94c788bd5860aead770d5ca472c9cd5f18d1b20ead4f45fc7369bcb558fbb4d9263ef5acf4049d9b4789c8cf56eefe7227765ce90a20fc7947dfa3ef9c0a184ca9dc66720d80083725449b5a0f088d6d5b01e2a10232a146b478b0cb8a46522bb437baf985b9d9974c6f85f74c25aa7db920e927816c99bcd15fe19e9b380f52e3af23a55d8e10f3e8860f613b8c30b6c0582c9b5232bcadf8f097a0f7017e9d75e1be70621007d367a3a65da082e7d933332a1e61ff0e8a54909d2803f7d0f9f834873ecfc038a0e28ffa64d1b17613b901b7a1596339fe22feb35b532d47dbf7f60e06061ae1a2fabd32a96b319122b190f37cc1ea40a9814a3533f68d948eb934ba9fd987949bf9d90c53f0971d58eee4d87a1d07fa0f432ee0125c94c4186ccc1c0916164c0c2ae302f94bf6bd452b24277588c2f92ad709a17ca5da0ba4dc7f9b4786c5c9d3e18927895a5c9f706014685014d4268725d2a41429711382112af644a1c97a3d374aa46b71f9205635f6bbe5c73b80680e7f197b06e139962b2eac3432d61ea91ee845c648c2dd81c662ce6286b02e8b04b1f0bba22e6e92f31b94f413e6feec6683c62fd880ad58760001f6deaa02752d9cefca10239cc7f47517a703bbdc159eab96e82652c17a9203cfd13d13a5cfd61ab7028d54324a8c098056430d9e532013ac00776a7b161d114d7cac128ad1c1b5785132bf1aef6ec7d6bd1de86d455b212cc748c5af84f6c81ca51ede9bc18
Card with list group
View code
c9000aa5896c980bf109d9c30e9930895cb157cf26b98b4bfd5c140138fe9420eb802f97de96253c9b109f8c170ace56bb11f23f4c5c228f0061852462ed2e01cc1c9231fcb2a053e38f960ed5b6c59a9baad94c01f5c8ad2bde2da379d07c332653809a56dfbb429d63535fb82fe57f6167fdce4d70bb2e78d5f17287055c782dc924d471d260dc5ede118d7e04b6506b159e1e226d26dd7dc306fd19d04d05bf81c8825e5985699b73b42cda7723156e118cef8faab380289fb2a297ee8c325c7eb5b5429dfaf4a13bcbdddf33ec6e9dba4c5914818d853d07894989dc2a8fff2a40a112be1577c18c2a7393f9964aaa37aa659ceed00cb5a85f22a4e4374904b91cd561bcc876adcccd1bff1b9db545782004191706ce3b3dace38269af046412328b57bc78f8953dece060f4c18a9085d51c91267b58f9d8b5ec81c58544df24c1f201e6f4320c2a8460fea9c5f84b1b626283c5d8c33115d9401ff589322090d50cadea673b4efef869696bca69f1981c8696d944eaead87de53bec57dfdce8eed13bae07b15e65280dabcfd09009d9cf56936847b2e7b5429b52ecc65cb40792dcad4f9622e9aa8436592d84a3bb8f07459044bf69a8a9847607a3f2f05afb31289ef3703272f7f859574e1d6db59641b59481b860c1f54442c6ecd19ed60970db0a67b2dbff76ac0825963690799999cedeff4053e0b183f19595feef48650f9d93040126c57ebb089503598307ddd6a541878f1dd5cbe0244560b17be0e26b65cea00fad070326f890925a5d9b08893829fe240765ae77e4c24a53a087a78300e828bc813136d016625248fb61ebf4d0bbdfa6a8ff91d1e1a7bb327225dd659649fed6194485a6eb9fc200f1d2018625f87749ee6b2dc40c9e5d544dbe26a195bd67a7905dfe538ce67bdb003443d212ffbf2480e269646b279708215f5981b85e3876cba2ec00af3acb3e29e041d43b11b91dc594dc4ee853b9fc9571ba979a5ab0a449f9c0fd40e5fac3ac209a566fe94ad3f9fca693877b0a079c9df1e08ae92d77c265d10ff6d57622385629db48302236b6e7365dd8640d404325bb1cc1d775dd0c7a94c3e5e23c9b46a96d9b151d78cccf4dbb85cd453f14c3197c08278839149bbbeb3a229c6a9088377c0b15d3d143c57291a649eb9f4c480f7d776806b33b17f7b00a94d9d58642b0ba13975bc72d324dba6b5d4b6fed0397c061c04c1db37ce1207484b723dedfaee3d20418bf21881ec0ec8f0255c6718395a189be57d1ed42f960616fa1117a5d8d7cfc67666ec89bae5acacfbbcc268f7d5703ffdeee8c9c1b2c587571a33e8fa88197917d647cdec59a8a8bd0a3437bd64a8238e3a0a06e24e585348153968c36e131b09b873cb2032e811bc5a0ba54e88be03410eb5d95789e66790ea5d35ec716796f09b939ca67f322badbdd7016338184479b5358025102ca1f20aa1e448b91a9f8987f686ebc0268b602e844bc2f28966712063675ab2398f9ec64caa9a27e91059d5d5411c8f5cf3729ce59f7b15b4309546f0242c683293c0ae8de94b8791e493192fe946add205ccdd2357b0bca344b5ffa22d468a42a501a6ddc6d474721ec4e2418422bfaf1e31b6546649e73b8c0ddaf8eee6e792ca80833e2980c96edd262126a4bf676f8c091259c42be04ce0e2632e54e7768eb461aa4fd24732deba796076c0bd504b6fbc70e7262a62a19ebe0258f9b13fd0899185f3d534dc1787b55cec23c81cc6828ab9dd8ea00bf4664314c17ee0c005e10328b47eb3400500c3bf081af58b8f0c89809f5457e59f5988951a7ba8c7aae34d0a80a66afb6da214ff48e3cd2a24b68757b4ed7b264b0df54d31be9cdda60419d0a752fbc19de301cce722ad7889d93051725eb43e683b1ef3625fd706b6006a4680a9f88c6f6dc15cf83faa1f1f5ef2f42fa4409f09d80fe1191d665aa4eb9a226b88b1eda10a11eb758c9ce2470c69b6bb4d979bf00b4ab2c2a22055e825963edd1f8b3a7282212062c1da65be0b2d5b6540a1708e7b68f61215c6a61d1b8411ac56ceea3b4df80cc98bd3475cc0dbb925bb3c5dd4949ee91a37585489af0360d870f429a6ef116e9ff3adddebc92c9d609
Callout with two column list
View code
ed33985c68e29994be31ec9ff00c20fba05c009942a47b2aaa4c45613cefdbf300274c5c25569b50901b268a9f0162d40fd1dfd6c335399a6e8d880fababa02bfe506720c1809209d81aebd598b6baa443356e1089eac24b978c8eee0a0b53561a0992efbd0ccfcf98ec77edb7b5200323d5ed2a244943eb197b84106338dd34d88e0df7b2977811d2f70a9cebf190ac88a773d28605ad66d670aef645e43626dc9a485cd83b77171604a790e2896b688dc32db2f9cc18281ee61cc1ca2c7a1aa1f20de209b3ce3338d38466ae226a0c2f0548145b8344b39f73b02e309a8ac439af8db7d09f8ea1370bdb0024fb55832764791bc124d7764184a6c7e264412c69460878edc6ca70f80241e061310ea8d5f58a8bda01716bae678d8e1ae28ea44e91e6dcbcb79b749c1bc8f865c18b6fe673fa05b3a4ca09fecb714ba04246b1c468321ff608e506e67496b2fadb308c60e981f8629b216e8ad9ff81e1b73e57195f277c1a47035985a2af574945d10530fe1ab944d6df4bc04ef2a608b05d299b286479ec47e47aeb982ed91bcb171546e7b4e6be809dbbacd5ad3a66ab88365d578fc8bef1fa5793065ce4ae2799ce12b22883a212d93ce563c107e42eb19fc9afb8ee0737c58270500e097ea4cbe98c02761b64ca8575f92a4ebdd6ea434f041ad721314fd3104237b82e8f30c1715061fad9ee1dac1c42302cc4bea44206b5cddf422e0f4b77b40b617fe0d27201be1ddb026924cda05fc477f34f7518f1ee5e7c0c65b70639b270ecd995d861831dd0ee9e34f071d0bcd9cbdfb00448c8c10e997c2e9784b2aa83f840187ee826ea33b51acad6255b1cdd5bb51334b94fe2e8814278fcd9722893510b7c40c95812ea6fbe4dbb42328f6f5667ced10b3c54795520bf2469eed8f19fa63d4b91b218f823626ea4a74ae5477e4adb1eeaea4553982d900aefe6228084c633bedde030aec2412755e2a5394b87771547c64248b1d264e6dc0c75977211efa3bf62d2f99eae094bb3bf2aa254bbd83ec8c4319c2a17461fe3845700e5150ff584b40d4600996eb2013d35c85035afa05c8595e2c1c87ed87092d28765c4d632707e123f10108d60108f97992426386fb2641b58041a14a51d2f901e8ba7dfba585fafaa5bf2315d27a105a5cd30b109661529fafd725a61a445bd3581a1750f864de65459cebce5f28185f4966d9c86d692e45fc930cf69159644a023b90a83c1f8aaaccec23540fa0c045a79ddd35065047543c38ac386585af59ca19c1c4d7fc2a6344305d860ae297dde8a630ce190fe2fbeddc76509053b9346b739c44b327857edb842909eae24f0c7145bbf2f1a41562d7c5ffcdd59244c4d83f69cbadfd53a8ce79a89be662b1fdb34759aefba717ed3ce8f686ce415daa1a60f6f5cb81b274d893071329510426108cd2fe082b7964338e1f20b524a9b8aaf8fc0e96ce26fcf6c6e5f3009c2c5685077116453da1e86e10f808b96ec36508e2bf64b850c2d9e3de78856ca3e00be99c823fad9098e415292c394179080fb504e011702d4fa3b38006ee8d9874b80ef84cb8e83ad1cb7e506dbcd219197f911ea5e036c18535123f4f2cb679f55c7ef8772ec2e418e8b2e24c750963b0e5c4c0515a90806c0b5dc184c85c53faeb0dcbd7533d25dc1ae011e5afb46450e162704c0eb7b0c592d55656eb009433c70c24698b95b9f7c52c26c67c619c86d64a00d83e56417612abbbbc2f692a8ce5cc5d8c942c6f57236dc9d1026c833de30fd10d4ba87dbb6b9c38eeb993562f18f403415b2bdd433892fa7ae0b5f17b108db0b79b0af9381611eb7954f9f78b8bdb04bebfeefebd15e7d5c4bed85f85f91fca0e1aa68657f

Collapsible

Collapsible boxed list
View code
979fbf5bca91575e7687a97ad0890d4e5cde33d06b9a82ca5cd6f562319570401d83940f2e9c315ca073c0759df8b0eb3c46ccff86298b3d2049ff28a209209b4b1567c17481f8b2af22009b976aba674368cf57c21aa63245dc8c2e2bf21101db832de51538670cdab9af90c26929cc4d2810d75a2d5e470d4f95867990ecede3f1412440632b7cb8648ae27bac3fe3f6becebb030f3e00ce0e69ef3889ae4292ef74d70c9596b1c48ecd3f485236d7db78a84d303125ed42e2bcd668dbc23589d9c3429aaa8eb482055b74650c075d504d0452fb6fc5cb48d392daa46501316669767d3f7a5d38798eb97ff0be2ebcbad650394537ead1108324e5608eeada6c708e65346d3a633b3750e28a4722d354678218c3f1723a920429b6e4804a7a0e97a00812864c08f264e2920bf9282a8ae63f2555f84b56c99f99fdcf8d901a605bbae21d2411dea04c5ad003e7c0ad2a72e52bff9d0357288c5b58509b16eb576e5628eb23180be90f63a554042117febce8365dafeaa64d91cb0563d0c8fcb5a3bfd6b31faecc85671ae4fabd0ec4f36d65e78fe09fd73858250c9dcb5805316bc5ef4c6e69661de9334ac2bebf8d0658a25f9e8213a38e1c6fb94f65e3ce0ab28054113b5dca8b413d9158c88bd6a92f912a7216585a1af1382e5336bf0688f7b4bb7ec4654fa045bd00e208d3a1e2a9c6061fec2e01ac0dd0fe8955a650954470d94e9ad691abf02e278c7877af04ef490c1ef67521f52a8ddb9a45708cc448fec8199b088a94d5075623d2d0a68d7043cad610ec29172dcf554bc34cc39d5fbe543b043983581012a8d7254f1893570419d051e6fb5aff4c17aa2f167df4b196d069c52c92310360501308a1011171bc2878fea58b770a7b68b4b87ddd9602f940dd52e2fc47e25deec0e766f4fba070100255cf39b4fc67d0b81884c7f9cd08641a195adbd2df61a5bcadffbdde7051451cfd3611e977cfc152b69ecf6e3c62b1bb957b0fd7884d0c68f35944c266477d0851acd54212e57d6c59474151d2526251cc7c36162484ed99fed2eaedbb036651d182dd655170f0d8a2d7d8d4403d919a7593005c8363c4ba32762f2a35f2df7c8ebc4fe97a63a6eabbdefc1b09067ec562e3a4b0c2ad214edb734dbb5bc629b286874590e3bf32766e64ced320868fa1e87ec1b3470d49ed10ad30698e15fa90fb572a4731e20dd4f23bea020e32719edc51cc062a2bafe0081e4dc605d8756b8cb20fc27c11084ff2fcc984b69ed20edac2c1b785844212dc17ebd28cbd3eba2c64f7f7ddf21a896dde4b224a0e2e04b48192d3375ce4d03cdcefe0fceda86d8da207df53e12e3e7ea1807895b60e837bbc526be6b843f56d6df84331971cc3aa33ad604dccd1c02fc7d1dd94a646edac3fa4fb36ba3d09f85e1b0f0ba8110ade30716431db2ec951268ca458bacb67d0135c476b0f62d34e8665ffd8d8ab644d649540212d831a3cb55177de5f99dacb1880bb0320de52c35c08e1ca5376700848c764ad936b38d4b064192e3e1f08525bf404c14abcff46e2fac02f4523e8573bc7f3b82a9ac671acd6cc02dd184c6920b1c92495bcf687e5416c3827c1c3cb293f67423f6a22ba487bde5b2bd74c6dd80519267716e2fd02e67c8bfddb19ea1c7dd90c0860f98b31abe6d7711e452bbf4fa6d2bb59883b87736e8aee01fc3b9d624bcd8094a88b371f2fef161b7134521c41c0f718bbc258491e92b5664a4b91f710688d76e04b2be01965678dea7bb17924fa7a036ae602f94c5928864ec216e1a113767f3349abf082904ae528c7b3d1b88332089dc9c00578b9f5b357b97703b81cbbe7a9ae23d8307a3061893405d1e63c5e0a910360df9690732552c03fe3e4b608874e156275c98beb994ed1d8d10815ccf82c39bb36cd70cbb885312c4f3e7a4e2aac6a95bbcdb4b794e2acbfc505029e1cadb51aac8cffd4965c73263c356b735ad3bcbde8087fb1aca99948c6f12e17d2cee8468f0655a3ac96f5a9f606030a524b208d7734083dd0390c7baeddcf1fceb57288501a9f95f63507e95fca735cc61083cc75b16c997c5048036dd083866a909807a730c075b2f119fe1c2ce6634161534e1d3daa1ac74f2efedaaa47319988d28b3335520363c5fa3459ef4869a08cf26ca7a97ea34bb62db81844778b8de59fec32657db747924fcaffa615e2004ff354427a498db5866d853924fe3869cba0e6154483b29c574d91babf309d8dd9c0c9fcf4ba9d7350702ed5a4d710977faac05fbc393cbf88ec37bf091255bb53738af71dab48a143035584ff9d38f3653bb72f47335c08ebf28a49bc70bf392635ade6b87bb4549f5af3ac2d7223478a7dac017f6442f540bca171fb84d70d6f51a9ad77c56517161bbcddecebc3bc39a5d117a39423914839a9733fa73bdceba02bbbd38a233a4aafa13971154b929546a6ac27cc80b1f9bac6ac286ede4daff4714691cfb477cd976a2ba0d53bd2f22a30e05747cdc0294cd6beb2a415ec2bc96201ddf04bdf01dc532814b768f290fddddc21a57a08b3e9d8523f01a535a49428f960555f6719b391b7d5ac0f903e8dfd306edba6f4a448a7bab4683fda4fee7465c2f2ddc8baba1c131c69c75b3848ead63e32bf51d074c500b3003fafc9f0ad9158661f4a82f872c6beb4f56fb673df62f0a7a3e9ddbb7305ed5c6e6b940cdfc577e564af3302818b90ebc8ce4a95d66e9e27259ebfa293be809c8b5a0246d9e88e9e99cbf1454bae1b1dc45ec77c53e44bbdb410b5880a390ce7baa0cdd319faaf70a39546574c0d5a3f11bb5f96e605f64b7cf54186350a10ae8eb2c3a4e8fcb301bc6cf31725fb250b5973238de71a93b7a6be19303b42c1242e3463225ee00bfb323bbf508c6c6b03d46e1a3296fa81d1774955ec991a7d8ae5923fb6d90317f3262d4b5e5042dbb54f7635c1db58f57bcc268a1dec474fdbf8ddab51206e77ab8ff3efa488a9e9808fdfdc97d70e195ee5e92e2ecf1250b97153c512251fb97d2d7f1d25865793bba18779036796ebc9c03a3573a31952438c362b7af3eff6ca94a256db14f6c4f47d86629157cf8c36b1376672345d58a5dec69fe4ae85e0df62852b18b8840b195a13a47bec877e1046f0b4a058838fc4015d7a5636cc2e4e8c69a52bda29a85ec5f97b3a73e664ef46641dc68feb13eaeaa85d459ada7531ecc4ea65bec254eae27adc5d89c92bb3c1e96d78033526cf5bb0886a63db4b7a32d49ff04114b5ed4729f181f6f0468550bff88b4ce555f5a5a03b29e9d8c7ad8d358e2fc2495760ab590ddc639c7d200a3f70973cda51842e42b7fdc5b8

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
89503226706ef52ca9544bf9ff1b6ad075779d1e4dfe5a2f46633774f36bbcaaecd22bd389d5d4f31fa0ffe66697159e12b25ce5940f0d6a76698f131fbd4b83e92117b70625aa04909d0ab7ce511fa622e4edb7590363df18276852ca64f1e397787dcfdb97b4d53549df68eb7cebab47ac550a1716583c9b43861f910ae610411578c12398794ba49da226c8313ad780a9d5fe49b156100663262b7cbbe9769fe5b4b93444cee4f21b31ffe6cc1883dc7542ff336e8510bf3eb7582249ebafcc2ebf7cf16043cffbd956403a4e57a750056a494b1c12d0bd0d319385b22e29631a533159e75186338eee42a397cadfa9766c97831bf433b76a9925c7bd56b14a39e4f2ec2e714493efd537e8af46781cc7b58953df35711c1ab266de885b5ddb6344c560fb5e4d39477d20c797a7cc762c3688219ecdafc4d428d4c32f92c7aea60793bc2d9963cf119ea191b0de8eb3103ac4618619c1ebd57a5043336ce9e34142d36d833e1ab97fa0c63caab7de4b428590ad45e0465b19bc22bb069ab02f3bd92d460c5da0b4735c97afa0d65fac42053db734c5c8154c62c3b20b6faf58d4d21cf5e154c282b74361cbe56ddd7194cede558db826152f6c916e043b218bf29128ef2323d80ca5c1fb8dd39bf0ac35e304fc6bbe91bc6a2c3f5127674af474a58ea3a1d81475594d0a9decb02be37d9c56978715f93db5b163b3b76e2f601ab5647b8a585a82e9c97624a8a0aef1bb3fff11cd746c1c98ad12a6c50ee9045c1e3500bbd5e5e3a3a8055ecf637fb96974371f12a686fcdee137c4f5b406f22bf216fabdf1302ab5ab3d6d51edb9eb7af3fa65dd35229c3d1395540d44247cb6f5e8a6a623cfc97deea15a9a179818d1a8c9ac710ccf474ff7d8dca99237aa1315c4b1e18ab2e03611123b23b25d6fa84b8d232bfa4d22bfdee86b43bea5dd747d1cdac717093c226f7fedf11d680aedb0da46874327ffb6e7e0faab81014f60b26589236bb7461b71da0c3d8045b435fa42fff07744bca01665d380ccddf55bd13e400540459c0f89b35f895b743d59f76efa7295e8350a218a5cb20d46183ab3549bcd1f377bdb860925aa89d45d0c3640c40f8ea4d7a7b9223e5ae0de7a1ef5e7824e22b6ee5bd25e306c0695de7c93278a4280bac4c5de293d2d4b449750472fafd9fc684398442a8d9a730e6d6cf9db9990689a05b9cf7f7ec66c430caa90338c0339b6ff7cfc24e7da0ec918654343d764889a0ad146c5180b0f9d6d4df83213091081022e922bafb78093d6b473408ba53ca7c996b163bdaac1177630ff1c6d2b390aa11e17ef05bcf1a2d166067d249df8a7c632ca5b4c2ecc2e2c7633a1e20c548c9e6d3a1835782c53f90d95af6206511fee481cc0832e795f6b114db4f0a1c9c3c717539aad95ba601dacc0499320a6795640a5cdb222f45efd8ad7e46456716832d72a6b6ec3df390407bba0dded23a077d938d2242b95aed41edacae0fb3f9250d969b4e66e2419f603bda63c62c2ce0e781f22d095e0809873830b62a4a30ffc782529ba03b99ed97fe3c5b3424e3257037c09774bef0cc51171f6475ef6c62243b1b183e814ddf04cf530a9dfdbc65da03caa51a3c4bc854cb46377ef6fb8995f86569fb15e773617df2ae9ecf0b9934fb609196b21d9046a60c904f8a11cff7793d44f25fe123baea9a45649e0b11109f96d8facfbe23490b612d7e70a699bee7815abc322308982062c03f777ae478539056843a84cfbc79bb5336cc523403494325108c90022c1d81dbcb11814fbdd401b95f92feb582e4312ef0b34e322acb29f1574778aaa60a060017f795542da84ef879ea50a203d27b4b947e8b4dacb22191f1e9e45a843f0251422ac16c53b19847a83e06dcb608e7415682c1f822f0caa5cff0e78d0e95a273d1f685a800e82c5ccb7318d57b8d9451971cb36b1850372953c5784a79033062b562ff1074ce3df753f0d9b71c7c30db2c4c645c299337cd9fb66085dcb43a4cedcd06e7efc9a4374406cf3

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