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
7132e6b5d08904efac8136abe45990766ff0791368c2ba36e1f86dc87884afbfce4d22581038abed2c0db84ea18d44bbadeede12c1c44e406972c182bac5762deb88b50e9e536ed1e6bfd2da24fea5a7aaddee61d7c866a4f10b7a2188bef9218e4d5ba414d5813b61629b1d81b78afe1c97365f4ed84f71805fbd93d21e8e34e6d2c4447b2824c837e411acc57fdae806a458fe1c40e4d3da95583fd43d9a1031dc6274afa5b9480788ca9cc7d1753c385f9d80840bb19624f20ffda7e1e740ef7c019bc93a9ea7a0ccd961347760676f1795a56e8b749bf98483eabe31294050402fd49584b2acd8aaefe68d7108707507a991185e8a390cec1d79dc98c05dc8b534189c04cec96ec649e51db491c68a7c58d72b7f6f2ad39d143e29e2705e44d1da1787e1211e9ecf6bc19411d9d898fbed2d02f279002d1a4ea5bb64a11026c40e8e2be3a3b0eeeabc051151ed2e104b60fd800dffb07a68a6d16f53a86eee28756cb16533a07de8088f0626e7ae8c94573bae61fe46bd959c957a7ac11585421d3bcd3da4a30cc017e45ce8f6e35cfacb18e3a8fe0117ac76276797e8afcb3bf8f2104c16b541b9fe27ca6537de129e9e64c18b5f20ade67bc19fd9d88ad6116a128c4a11d8406d39718978889d05f8adcc62b1154cc6290fb97957c1c2df90713359bcdf1f97107dd8a99ff50414c9a44052c2e1a13fb90352a7eae2669691f8bc4afc2362d5b8c01252d9cd32061e2bd5b066a61f999ae1b74318616a37ba3998d79c969d797c9d55c08b56e8b7fe1be9e96cf05f224b028338f14de38e1b8898adb0113c46c07a2d559544f59d451493d581e79c69459cd8f869783b3efd530ffe13dafeb1aa382d24a9b68a1caf7b3971380ad05db26aa003f857eec4eb74a71cdc07f231b8729825544d98f2a2bd8b111f8fbcf091efda6a39870551633f1e055560e0a5c913692cd04efe9943623e3c5c462b5ffac61f13298d679cff8ecb16b8d3678ae6b1fa3d1788a97c1ca35ad403cee7a0575c7f16cfbf56d1c4e8458c09fd12b02c684f0d4ea178e8a97af8fe27aba852bcedc0c5d52efdc021667201ef1c13b9be38e579dc7c534b0423dd289083490fd94980c27b6507ef2d311e7b9eab7717edef41b2956ae7a89b7e67a0aefd7ec0e6376f5a58e3ca466f72710bdea8cafe67d0c63cfc68b4bc72cdddb82be407dabfeb7cbc650da80a46f4ebdef5ad008848d8d05147693e5d113e2d0ca2c5a1e2f79bcab20b9c4c2afb8a37dbe5f19ee08706fb415cfea009094c3bf43687cb7bce51e5b2993ce7beaea4b7ad46dfa34ad7e6fb4f58da65aeba9612deff51339c19d8bf73a87006681803dc5cddd552a49faa913e8aed41682207568b0ae513d71435b04b990192c68d29add929c60bed27f9d85246086db56a86690859f96af49d8c2a0c8c3620a931e8115ef14e2c0e0eab220511d4ac07b8f734a168099d0a5e13df3b5df8df
Simple unordered list
View code
2e6d625c19732cb83adc233c70c5ccc8c0cb35a5c015841d13a9558027eda0d64d3b41cbaf541f76b1a2e2ec4ce20427e505814d46479976f4cf7c732b77f9da3daae63703d2008717cbfbb4f6cab25608da2bf71ce75c787339717d3aaef7781931b18b8370a8814ab1d396d27603bef66ceccd666357c832ddbe9a1d9201194e7f8347d180412436e065b9d4294ae77bc2dedbe2c62831d928d73462e0deb0e7d9259fa12eadd09f22823be5f0b10c7d6db06c8c7efabd945b85a5985f2a0ab4ed1ea87197d39c01735c877896307b3d158561bfd898cf0b73fdd8f89355238b7a5b1b4ecc2bfe55c1e47ed1b63f6391a060859489f237ec8ba4062c240946f895b861b9324745691ca4d9c5fb153bb2616bc212e61166ef549eb236f4a5c71270226865c57bce7bb7a905dfccbadf2b802dbad28f9e37b88eef72c9a97b07b630a7320ebca3fa78e1238d554c114d8360d3a35c96fd43939a5e9a7656c2d53e99b2f0bf5fa8684d65663ba29ee5e5cf3592d8e58b132d8d226dbe7c74cb0e3f693cc77689c87de3e3224ace2c4cb7c3ec42d5823790d82ac74335bfd3fff0c31bbd7c96f83f5844187cd67067e78f9ea10af34b1ce1cbfe8166ba30de533772c4c94180c71ef5c644f0506a678c4603cf90cfb9d20baa723cb66066aa5ac62bb596abf7fa26c182c1a71b4da281206f5b2428ac8dc25131bfef30ad6759b0ca78021f520e9b9f99e0154c710746fe981c8e0f3bf0ab447876cb33c56aad2502b6e220e5865d45ecb836923d2f4fe916fb5e278cf4d26297601333c5cb2442b6111139421409384c85764c53bf388b30a6c8a697dd4c8b16dba7d90878581a7b38d3ab19b1c0a0f392ae1d4dd13184ce4658da7e9a615b8a9bb47f23b7e457dcf51e02e8497bbc301601f0658a25c6aa1c11630e28c231722760b95c8ec4dc986829017bc2f66d3bc36527e6a9372f82db0af0d6a5cbd991edd7ab31742ac437c04a2aff176c2a4633a26de7f2986bbf521c6f73f9390d3a5612fffd4fdce55a37b8ff500835d815be275f814c39ed1c302b7417a5b31a0c87590210a7157e2357435ad930b45d9322ae19e26db83a1bab82fb0baaae77dc7d1bc4df0cc4b5e8d1008677d1463653a645b9d0ee9b96e4fc935f89f35d21daee6376df02c5cafafebe7fcc458806082cb7a806f43220a9e086a92854fc8253c66c48b46cd2aad26908e0b0621c3d19742465b727be7b5eb3bd6695c4e6a24fbe0feec7a36f39789665182dad479388fda00198a0c9ce48fca09596d08d60f312f9fab5a73abadaf7eb9c5156d6ae78dc0746b70f049e2bf1c8a6ed2444e2461897eb6fbc3f8078fc14f88b81c562065ba5bb64ce1fc78f28dc9109b81480ebd964e1242c61924d5bb610f27cc850c1da8e2a010283c0ea09aca338864326ba2b9936d67c39116931aa978535796cd6042f94482115ef79f8c58508e2299ee7dec6c15389794d
Ordered list with borders
View code
0843a775583f3798c0e1c98714274a612878d0444434620e7788b0bf8d6e85e9ea33dfe77971d4f87199acc9b34256937590c1e332f443ab3cce3572fe18d8e8aa96110443ecbb36ff1cca1ae81814a68dc438fbb7caf61b650d9dba782690279583f122182d3f497826aaf1d1e0ab07df9e7b34175712586b758b35fb152337cdb98c3d788b4396765628566a0fd4070df960499829be5254df979379ced6a4a8bae833421edc5a1853ab5102491f011c2f7bfd951b46e055b3b9ff9f86b7a4a0f0ca489c0a117a7f6cee61dae2b3d45f65c183ac7fa4acc00a5b922f89170cc8fcb7a6d247035a833109712ea18870679431f9c855c4c9153fe6d8d843c71a6963aa3ae03e5b0c2ce4b1db16937eb9ec723c12c876ea9727df8848a9503e5794a9b228a90f7a207c27a5980221894ef4f522c149c6f532195310132f930d6780fcfe329a4b79b91beb21d46bb4cd36c85701e96107c9bff109a62c5b511351d12fdc0307694a23d5db4ad4f3935b68c8d82a5aee43b90427702f2db1e2d951274fa8dccd9bbfec8437b45b5cd85cb966ad04e3fdea2e60c2a47f0eb6a9224d100e206787c2c1a0aea4ada930fa2c3696ddff3a3b9e5e53728bc97bacb2779c7b312d390ab7d4fd7c62673276db4c8be7c47de9e5c0c313c529f01e9c0ee51607bb5c4a6edc5cb26f080d5ff3ce968b7b641459cddf1b59e20fe963d1d004063a271398aeb9073c91c878743ba53ac6300acbaa29cea7a6cb32897710c2cd8647096c3e9fd40e828f61b37c7756d0e3bfa5ee2ff5c84ccbae2e5238d1238b18eda3d800674ff2e233dfc60d94ce5f40ed60a10d14ea3c98beefb713a6310bae05ebc17e19151ca2250c93435fcf008527af0dc7d04925c24ff7353c9ed0652691d0c2d53140df7a2d5811520e8b2dc9a0e4b143c070c66b98837f27c1b6fe3fe2e6f5ac1d22411793f141676b64ba3d4cbcf9dd9464e411c56033e03a38656e68e305c436882591234290289aea71b7248517436dbc75ba7ffa6e2e72e58bb346633989441d738f053f1f9396b5dafeb4ee906f9f6b7589594654b7c91297c2110f74d9066076e3b9740a299a040c10a48eb2fff7737a6de950e9b3667f31af8743e3ff17e53e854e9c9e715985f68e22a1c2eaf9a3c816d7cd16f795b5a2c387dcb2159b124155888741681a79bf58f6e42a80f796c483a6a874ca0cfccee66d40599ac30c44027a0bef296ce2d69c0a8dc87c8e1b8a1e8be12032e149f8e46d52d7c89354eab60f4efdb27b5e4dc3875da4a265f1cd4193a2881842cc0b3df86ae29828596bdb2c281aa3dd9d6bc542002920ef9d002475b29ccd37b1172d6750bb47a2ecca4c7c82bace4a9237eb1a8ae8bed2f56410dffe0ac27038896cd764730691095ed4745390fee8b99190585160b8b87c2ec58e44cb6058b109fb34813d528e38b4bd98457df084fcf8418734e3a511ddf9216eedd4ca3499997ef91d8c83cda13b5725482a6aaaa98f3fff0249f05381412814dc1d8e02d0e937
Card with list group
View code
28d324b1f6b21122f8ea8420c5859c249806fc080797c44a8707ebee071f74cc1665ab119bbcdd8566090f82979ab9d1475ffc6566229765de6dbf047ceba08f17672ccca78736122b17f10155aae9cd6c3f9b6e590a0308bc3fff794d904afea5b7d78c76ee8c66f38b2cfbe05aaed1cf92cca980d131db99c1dbb1e713dd8a9138ea494cf912bcf890963addae7b716e2cd468116d1324a698a265b19bacd3a9cf902792beba9eb56ec0953c15325e65211bb1ce47b31cfe5193591779b85b9e541134ba5d4b694b8a7b5addb114c217ef268dc416379d50651b7ea0f466146e213ed73b09aa3c9a69a7ece40bcbd463baa6714715c66f34a4fc4339b158c1214352d5aaa7216b730c8826a42b4d8278ccb6c99c264fce72116f5615917d7cd30a5494c0cf77475031dde58b6e7a931263413849eab2562c843c2259f43f6cc31b59a4ece65a31b1ca41865159b846d2489246697478bfca7195358f8f7525fd218dfbcd9016f55120d75a77f34ef8d85082896cde6f305110768c9106160570df6d4bd161369b48864bff4a40bbc0cb22587cd171d132ef5acad67ee780479f103480af843f4ac1ee71642943fbba12dda7583def7c3fb9ab4cd4bb8ede36d0a213d695e9fdfee6e17d542bf399add05c04721a591b1452f06af61b022f99e0170a1355c153c5c3daec05918dcfc20f624fea539f29949838a996fb49a5eabbd5cf7e590126ea0f11014234375b4348d6299e23fad7012db4ec3408ddad472742a711da3cfbb42e1c8828b64f86a9d37df4c79460fe1ffe1a7f0aef17295ed2000687873fa26035f1bc11c9c2806ff4e3840515bfaa5cecdb812336ee6a0e75bf6ad4d27177063bd22a74a2e1fff70d0172ce1b5c049851b1743a9f5edee2e45712410c0415d6d3d6b6288c5158ab6dbfec9b16aadbbed33a1d66d6666e81962dc9d396a553d8fcfb8f1df06837196cc5a1bce7b363aeba6bf1114644bf763f875d59992ac47c766661b3624935eb14d429e4748e371d91f9344dcf8351be65eef51d99af37db2adf30c324b9117a650557f9a33807edfd3a695b2ca15b22ec96d8a3b3f8f3defcf14446f1441059cedf7b6147a73c9033c1631df489485d1d2844ead5b0c4c50f61db404c19e42f6b9d331593ae538f3e657c9e265e48cf75c728f98eeab175db8a1232e7792bf16062190b098dac9651c351631ac371ec6b9cb340492ab76ce1051318931f7b7616d0e0d3f2b859f72b3943edfc69892f1478a91bbd0549dc11a7c096971df65a22125229bffb6bd84c589f17032e3fc8aada0355006f21f37e8ce1f6f0b2c8a23aef496dda8b6076ce49471a8491bcd9dc5c2f04e72118ac2451e40d884f5b0eb4837de10065a80b984f602df94ceb8fd76d7c8a9891e472759103b6040f0b60a501585b3094ce9b26db404e58d5f8cb3fe2bb280de303c6eac3ddc5ecba2081f134852263db694c2bade26c6a9a38c657ec328f5defcb7e25c449edcd7000c5cd30cd2896983da629206d8316cf998d79e23ce6cee256d2076d540615a60497e187304a6d2a42522111ddf856036a13e5fe643640845949b0abd92552d1eaf7f5aed10c18d005ef97b5ffa8663299d50bbab89debcde541868fa440dcc1322d2d8f5eff86a65503504bfdaa0fb52e1be8a5b6380e243742fe82c93d965b941fa8dc72fb4385f76fc3b2b0066a7189612a9165e3c977a99b971ce38c84d5da802c27d0807dd1dee78f021b10a9a17644f9ef3c479587222770cd9be679e41c0458a01a67c87e050518c0bd69ff3a8c24f88811b9fdd746fb77432ea841110a8beeef0ed69eed02699c70d5f64e53d6f35ec4daad1e48d531dfe1f144fa5a34759e610f66c3c601d25ce787f7b3321a9e23ccd357cce9263481e9429f94f4b168798de2c702f48e8502b9b1902e846fd2d1380ad2184c42aa71f32294e25b558fa4609a54a202ba6c75312a898c242c8b8abe2a74fe400c48907ed66e316134879bff14734cc52a682908b62702ef1207aea9d3242990366b339c30ba2b689c3bdffaba90e292934e7357ad3721ad2869121107669f5b3212bb615d3be6f92153317987b2d613b1f577ac42a165ed37e1
Callout with two column list
View code
920547dd426af0b1ed9f818c7693488cdcea508dee75e3a1a57d11e4f26f830b8000cac3e57a74556b45b1792e92709a1708dbbb10c3019c64104d8e840168f3d3a61d4deccddf2c0a432467f1ff8e1d87c2019a57cbd517e9255babb1ac2f2254f55d83ff737acc3769bfb0ccc6faec1792be469b3cfecca846ef330b0970263a3d97c6c86292d8710a36a258ce6f10de418f12766423e5951e3a607d88c6d49b3f74046df9d51a903abae967d67289d3bb67cf1100e18f2fd498461f42fc40f1992cbeabd2a45ef2ec0fdc653ecd4d3e7a6f5b38c7939b52254d72904b61dfeae50b17db08a1f7d0086f3a99ca99846d6a5d985419be54b54491b0ec14906f9ec34c521f5d01eb55c26455a75b1f1740711aa1845f34e3fdae87c6f38122cb58a64be7170b95aba1c489b38aae270c85ab0854805d4e5c91e9500356c7841d5bf91f23f5e8a893721566059bc39bcd5e336b8a7794b1ce5ca56d82faa8204e23d41789f4bf75402c5fb6c84fdd03d3884a13147deb69590f29c16d4600f2b816292751264f6395d93c5df40efc0f7133bb2d260d1f31b70002011df30197329b2fd92f8d8b228a6f9fb4ea693f3e1b939822ae92b6c39e665afb633e3a60a1610e80bce90757db637a1c49324b478b09cdeb7969884185e1739e1fb5e32d57b88d579e93738d213ac8630a468a0344fda55042ed7fdbdc7931d9e2bdbd7ee0134808ed2200800e24795f1e06b5048ccc23c2f481418569f94b5e8fbaf77858a0a9f794da4297d8918ffbe2473afd96d23c46e4bc1cace6f64026321851a44b62c2f1e3e5df4736b7e6795a21ddd49f345d9ee98a870da690f3a40a9589b8279ee00d9fac0d34462b34a68faca0396babc84a5f4e3a0d37328e4a05c969d5217f7f2157c607f8b1244c7e03b1f4b48e7612239ce713a9e7a04f5e5071b7ed30feb64fa7615af0ac9546ac2a8e4926c62af46775cc12563015af675d023577b9e004bc8792aa951aec9603eccc1f88ed16344082888478b86c46315dd0536b496554343a5c55544ef425f485f57254e8e859a78500caaf42beea788ebece8fbf04fd770d0c4e6c94217a6d77203679302d06db3750326457c3874731b6654a3cd13091c7192e405a016803c2fbf3a3a1c7fb467e86bdd37b9594f928c1b075072c32043879b813bbdfc391e63388b7be7b9fef1c081467f04090dd74c10f037f2099fadfe430b5fbc84b1d1f9f399bc869830733e0c80a9068e53009655e4236023dd6eb410e9ecc58462cb08b69e7bd769cbc091290024e6ca98740ba897f992dc4fbfab322d980034f69ba582126be3281ffe125ac45f6c6e10850a8d3ea27a0848aa6f0c0a897ace66b07455086ec17b95c895f47694d7185e987f176b666ea285fbe0ef6c81631a50c5c83391d75517354a817f7f5f0735834df370d4f817997b716799681baf9d8bd6b87be1a62dcf132aee1efb54e6e830b4063ee4409f43a88044e6673ca20a467f892faf5ab1afb8440455ba168d7c6280045d1133b2f6060a0370ccc5defaad7432c7550a009a284792fadbb387c8f82e054871a623014d6308188e5c6c631ffb6d474020347ac0d080e22dd55e35ff2c4c6bac741a6fdf3ed50dbd7861c62ad4f709cf9dbd210fd37ef41bc28f5884109ce37cdbb424886474a09db6ff76c2459d3e4893b47f08f1a09995fbedaf0e1503a2f05e6a1295031652366856ca51e291c1d3fdc839d150edd90d4ab01ea4d4f46f251ba3a99ed7ff4923137bf35d8d917351d8f09fdd2bc07e373d3164642cc6202ccb83c23a0d83018d36fc03ee0dba540150e7b68bc9d34f7eb29fb1784b0e2810478ac2005f5e97d5492c57d92f9958cc65d

Collapsible

Collapsible boxed list
View code
640221ad0492ee0d39d4bf0a51d49d9bfef523843371da03d6620250ae997ba1df83d708328c5bc5d5a2c6561826eb01c03baa37f58be1a13308c4f7f6606299f60d956b69cf88b7838b52a55e125f5f221187411dd39b5e25a1afcaf6c9d7d1de20be838aa83e947b7cfb801e9befae21c52d0fc0145cdfc3dfc75a81b9ac2183f2e49192c0f77d2b9caa4ff7ceb8fb32492d2b8e375f306e2ddfbad78de2cccd28206fbc177c00d0bc793e1ebc1fbcb5a29989db8deeb2e0f5c39738c0b45f050dbbaa4edf28a4ca890f675a516f1a1b81d09cedcfce5c873b1cf37823758d05bbfa648fd6882b0582758ea9a09e129ddf7a9c4574e90de91fcca6dedf3b24948b2803420cdd1de289666d54d949ce2d4ef57fc1ee1e4e251efcab8454c2ace9162b30e8cf7e2249c8a72a199c6e2641651a60026e4f198a7774b7aebca69510c1e2e6d6a7a6ff3eec582b21261a74d782d41dcb7f09c1846125972165a2387879181998752460b4d82022f67059a06238a8cdc5a5fab32487c7c443b9a975db6beb474fbe290a0b83cd818b22f89529b348948325563932f91c061e7b6f08dee097cb8c2661e2f8e3b8b88a68799d2c483daeeebb2fb0efdf421f2b254faeb40295be6f14476e665d7b8708025f684c926d1d398afe21dde943cf517f27d5ae54e2248fa09fd2ff084d049fac94ec241e8a1128dcf484c6a904ed746cab4df23dc28033761dec4229d4d3148f340a5dcaad42fe3b93008e06ba50a7952cc9d87f313c2b6f25dc7d1edf8aa2717a2ec8a99f0c3c0a1e5ec437169a255aac59a1bb4ab01bd30d805d7b6d7e04a1163c686d5e294f44a19e9cf7ec8c19ec47df3c1dfb2df4654d800ff3f39855904ac19eff92c1accfe7600c403882944b0b9e219895e3fadfff9414c1ab98d27cfd4cfe958b62abe92db901d2a81a4545350785face8ef26adc1375ce76d7d712cbabb123b9094c1b3316d5a38c02c783d90b967d141b7099ac1d861b8856a05f9e905b86b562a8494f78e83e10b5794ce61d829818be01c11a67545307755f1f1e11f5925a47365f091f3507074392faa7fa27a7a31ed9639f84c388979b2a8cc0c12ee03e2695a289ebb072ab1b1643d9a1ce13bd13e0d6fbbdb9f40c7023cfb6870d7805b3397b091fe54453742e0b1bc79d68982483c03d7d049d16db38d9f072663d481c932b2452cb5e7a94d2389d61421e3340756dfba58853dd5468a72c4019e3fe587f021e7aa3aca3a06845f62ffde046ff303908508b5410cf1553def0da6d7aeebefa21e167b9e5489bf14945226add9f6830d415a774423396ef1929b53fab4e5bb2f94c19a07f3cf697750f4818c2ce6a6e87cc860d9a207c5c0934ca4dc0f8c9a5a0b918845c22521e3437d586c85ee57bf0a7388efe9a8db2a9cac86a5d0d6332a179ca5d89869b91249603b5c3019b2e6a0f2f01c93fd024f6f2d6ebbeea3ee1bea3375529763183e020117134d4cee45e2f7270d2278a926b6f09b02e2c47b000c6f84322e996b9feb2933499d08a3522d85fb3166875cb274a22354ba25036c0fa00dc416fa0a6c9f356e4a73947e73aa7c4d5c7cc162d220f0a76326ffa363b5f22277a3a8ff25cf80e8a7262a4f0be1456e8cfe8312382182c176556b89eb0d4bbf7432fbb6db800db752e6a665bbf33bf2e64ea0e645f0c2be47ed9df8f759e32f182d9c655749affb693f3e66ef406cc44635d92e38ebbfa459a5db89218c8168729cba11331107e257eb930747d4c29c7e6ff12254dc3eaf1b84cc6f08e5a2ff50f24ff50886fe0d1114b52ad948f862b6726db7136ccacfff9d938de9beb0b074aec1b0d43f1fde1ab0721e01b3f93182c408fde6d3765f841c773b10605594bb80a7e81f9b4d1383c9fda759ca12cc42d08fa3bcdec5f661b1c7c88e9ddcc65e1e8a63e135c081b279ef71cc7af74b1eb6f0bab1575480913ef2f19b08f25a048b8071632efe786594b304565068e8950d3bfcf6634201ef52dcab7365658413ae30bb62252978b97b227d8462ea17848d09cf4288338258180b886932407cd9a57682b786c140aef4537eecc8f39c5e2d93b7f30aa32950b8ae445da51fad727929c7768a21955059362b4e6b8f75bdf05db10fc52449f9b5b9a32222f5742887f3ed8c5018b6bbddd595db0b26c835bedc5ec8dd32d560ae1bc9dbe2256a3dc24a3f4397d9dca23ec91f11a29f20790a2631eb01342115fcb55f4c082911d44e3c307b5e362f3692b0f0b4429d781780f1fbc0dfb739cc1ef2cee7988f4d23f6b47ef1b857566f373b05716cbf95d618f3096365cbe530d13e3ae190870fde3c48960315eafdf95fb538222541640784dc1f1ff26b863820d732f60c2fbb10d6e25abedfea3edf1c65c015140dd47cb650b05be1483496575c4813c1bc0493f03acddd49077caa2a956aee81513aa1fc80346b14cfea86d3f082be2124b5df38dc66a79880627ddf5019222770de54d32506b9c15f72b5bf90b1ebbf396eccd8c9f89f99c29ac881b38b0e2369f5b7414cf9487cfde0c13a2eade2e4071adb7e1be82d7e1dd4b81c0592ee79e6f571e262c03b074f4841a988ea522ecd33033a5c85a3a73d1ee648c0a1f9c9d58f66c94a68d4dfb0147d0df59821f788e90e543ee334055322d8430f8abc5af81e50bb8ab4096102c76d41e46ea30f74925adbd00f18896d92a51fe00c2b8a104e0d542558179243bb7c7008770746d5cd1d165019d821db97c98c07f785ce059e6e633192b923f50ebf9f028b17b308e679cddd75a5cf5a35f9173d3da91031cdd33a9310fc87067bedc559536c2ab74ccd1e14eec406c48393f04e1b1f24c2fe2efc3f9aa39878abca1fee09e4bfb26044a62aa28786e526b426f39045fabc55e046d050d93b978807d407385d8cb73d65f9be23165a79ff710f7d65a09fd9064125902ed30c1616773590d83f4020e27c869cf10d563df0b8f70b6313ba96032202c1edc0482a367f9a7d5e24727b0d01a16ebb25033a04f576eeec1fdb52340b4e393f0465765110395bb09f28247f80b29511aee7bb87e80018d926c165b2510bca75a55510c709116c2d09c47cf0e1fd742f4da2477afb93a9e002bd94ab652ab5b68353c76b54a2faa7773a90bbfb970790ec1671154ff36bc81a0c91e47132a96e965033819bc0d79f2645d135a7044bc0af5e77104c200600002dd5db34dbab8503f7c27db18a1518461f1e02d4ed0b0f6a802ebb03f2ea6de401c21153b84150be44eb0d2ac41fac81b150c3bdfa94c6fa97385857eecc0debeece8da2a555f1bb54f33e4a8e97df49cdf7a4c652fc02fcf8a

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
a5df6f85293ac5afc1b98640a4bd6b21fc4301f75ac305dba66a331c312e57e20b6a4bce53c9f8b34f226aacaf4d43c3a09f7e08dbc81d6e8a1ce9d4d06b2bea9b26ea7ac3c3fbbee4e1e90a1f75b22f8d633252a163b5eeba6c244507e43fde6bd320a08b0a92323cb58df1b9b054d86262053cffdc6b5238a6d2b73d413701e2f917ebd9c08adfc9b1357813b7ecf03f466c82225667b34474fca5f2b7c79ad47190b2335cb2ed8a3c70ca3da8103e3fd91e018b3ebd1dda2d2c54b8f1969c969dcd5a7f28a3d5cdcce804e58aa7d1d5f639b54df73d62ead7a0c6240cd3237b6f5ff78861fc28374eda2eba70e343a14d5c522c99800295313b7404d4b25e504cf6c4068761dbf8b299b280657ae7cc1c397c045912f4716242741ffec8baa5b9581fce7c1eebd1f079e0e3bbaa46eb0e8b99f851166f4adaf77d57e08052cbd94740a48a5364f2397cb24f3ef19fbab37e2893187a57e88a3d08ebed25ebd21df656cd0101c38cbba3f486bf46c62423f305aa71589ef9b57651b41cca24f113c6b570babe736536376449eabe1573a1a7d167f53f20be7dcca21ccd48503f75de559cd553990106c9a2dc03d37987d64c1233adb7ea0795e6241d0e60ecf39fb9928e5eb481f56673606f57a9560be4207360a85d943175d7c23a2efee1b5d3864df4781fd9038839881246334d26000f759004a486ed9cc16c97becca7c05d8135b469f5dc2f3649fb06a7cb30c7507606a5a3feb972c9d0ae97e812f78d69af305baa4c1be33fae0f91528ed7840794316ac26799d43a8518d12ade3ad135fdaa3aaf5ad007f789db056a5828d897dc75e280b7de41e821efde3843ffbae01b18f8994fb9c52b065327c4b5eb932170fee580e73b3ffaab99a3047ab9aeb06b0666ce9e6c495c07fae6ab8f772350f2f22393af4133231142d0094727d3ed7be7a0c242c5bcf2989fabe8e929450e46dc7979c588b7bc5ae5e8b0d5602e212098a867b0e78b07345c33ec2a39fa48bc2ba1cec6cae6a4d4cdb788c7ec2cca33aef4086e00fdbd0ff19244e07e167e9c09ea69fb4ade78f31759a7e9f14786d60a09c75d1c1ac58d85aaf21b907d39b1723da37d124ba10bf6c34bafc701b4160af41fc25fa5ff4415baf3f2de40f054d93e89835aab21a3f5dc1be8ac29afad317069729d659185ca18f9e1f73a6953051c811af5bbd171d46819f9dadd83107fc7b307234f502131d82b542e934421f9477a6d81f12887242420354bb31db19315b31655e1b3ee4398765e94dd705f54d83f20a3c1ec361cfe8d6d6f8e5aa2c25ba2c762c3cc8a5a2df210c5e663e9e4846f8551ede98e930e27b59bd3e2e1c785db0bbc9fd6e77eec185719aaa92c29e1d393b95d9699d2100f0a700eea0799309a87b58b4a4714723ff51af2bcfc38e9cadebc9c43da0876b96ffbcad73c7e81ba8a9d965e195530a0d721b3b76e865d3935f65571cc1f25c8cb4c3aeed7c8d68ead4ac17e46697b71c1b9fd8f374ff7ed62ccae27bb572f95793733ee0cbc80e5f1e569b9653c2639d597629f4a999aacf1cf3b1f664d41710b0b2364385a0aff13ef92e56e0f0a7bae39bea470e0c4e05a22a30f6a2a4be3dfae2876f0ba41579352ffeb324464047abb24b02aff497c7acbff00b1ed8e9e5b1dc54585ff7ea9319d4d903df418850cff44eae86bbe9635772825e973fc67760dafc465e0c027d3a9a5163d129aa40aed69a9811b0ade5481b198e1f8ae8e4427aa2392927d0d8066cce9eb5d6bed9c32a2d718568166fb0d0fb1edb6283dfdc4f147bf12d1cb93beda726d6090688da181b1e34e8e723a7d0b05a11288c0a60da22e062e4b8d63e57269617277b6d05cfa5b60be0a73db73bd6ff78f951310f0461ccbbb7562f3a0dcc317f40ce4d56d7fd41df3b23df82c7ea5f50b5c88d8d30637a4e0f66f9ad0014a77e8b2e4a759376a5b85cab263719d9827d69ccc25887055391505ec92a4c7e0148ccb44e4ffeab3f5cd1440bb60ebbf4db356edf61c

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