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
2e72df293d35f163f8d60c411c833c8096d470a18e78e624520c84be0b4fcbcadfb0fe945954c3460670671165c04c1a0c029cb851f8ccc7fb4e22feba4732e9f6d2afe41171e715ecb8a04a44e205a39f0c1d33953f5b8abd68c5d79a5da335c025566a7446699a8de17b3e0ddeb98d7811be2953a11347368264b82b54bf262949c7e6dc093315ba7b67f73368273d73c958a90150b6325f3b70ca8dbb28c95d6b7acbf35afe70cbe6bbc21d4c05df00a702dff9a1040fcfc2121fb9b739485524baa4677229c5b6c1c78cb03a788bcb7d784c5339866e00414e03bdcbf16c4c94eee30074ecdc3f4e9c779b7579a0b03a8b851af2e2f35d8a31861c66c82c281daae8f5c9db605ec9c348ea41a33e5099a66259db67e11f3ad4900eb3906e5c916a2c365e3ee3456fa8a3ca8fbb2e1d8294625fb19ea75243007d28b2ac7cdebe842d1ab168f22efbd4f336daf0a4df20931fae2366cfba33b2584ca983116dc1a4488c718ba2b01008ae73987667e48ac96614a05f25f4197483d404f67fe71a71a9f4c637e0c85448fdf01c3e1af61051c13fd64a425ac1578fd1ea0d8ef29f7c3d4b72b7a1bc587cb4bba4a14eeeed0459a08af4e61e1e358631cd67db1004879b80989a29a25639b74ebf9081cb79a2203a4db4240fc4684a3bfb965da7cdfa887d3d84ed84db6e67b9212db536338c8bebb9c8e6949d5bd3349a18bb964b3ad67674090a0d561217ebc0b2970e88a48783cf5d4f30622425c596871192d5d497b3e020c2683aca40e6bbb4663987bb5ec4f395037b744d7afcce0e6bee46167077437df85480124d56bf2f9407ad08b1f7968a4695f0397911d25b9a0933bc10f403231579886a9299043dde309c9eabdbe34bd925df72afd774ce1c9148edfe0ec6bcbfdd5b8d73687ffdcfbd69232f42290c59906429eec7baf47b5e7db987e5d5f76a1238ce810e1ff64df47ebba7b126e3dc79fc0992581999821dfdf7a7a234c5959219261bb053e147c237537a3ff3c42fb2b3560fedc664c67c0bd6cd6e5908103bc4aa7bb354329791947f6de3ef9d33de6e987c03255f86b8f39d5362099356585a848a83abfd7a5a006ef6a088f66c2a0c43ce5b9e7dd858b97a89bbf979d8496843af1731a23d6bc572c068b29fbd4520e5d4a87798186e471efc4282782b6e27fbcda228ea61dcf3ebb7c79cc22c7610b4430f2b836b0586cf7a413faa2b9f503ea687f361370c66b7e20c1233a9a47c3fd88a7bfb5b8b610b4574ee67e237111a70fed363db1746de80211c4810b61ea3344389a06b823567af6580ccd32ab773233cba8b276cc108a49668f7e8f4846f90d13f781e552960f14c994647a5225328ef7ff102b5706e36fe719759a8613d3893e331a1a284a8ba5cd0036be62ca93b648a4ec1e50e4760cf1761749d024217367bd9b1789089d137be7454c2e257bab022b218dd3ff10fd7ea6cc673af8ddfcc26d785
Simple unordered list
View code
d2c99de6e3aca04c04f18edb9ff2eacae3cbf0803da0f950f97fb265fb0f13b5c5bda4c2885d74292224a0156d6c59c3762e5b9539134b81517e80748251af9d503847600897fb0113f24d8a6f2303007d65ca7a5b8a42e70511c81f2120d192c52d122d79a6070ef2ff4637e0e09d0fd2693b71fca1b37c9ae3ccdde7c40a060ae8fe83a509265a6d71c989e896bce8eaadbf9ad8c9944a82fe0d1c4b1c29f641f9e28516294acb312a3fb6f024c0957964b5da358296c1e9f050050472900c0d12e9abe291e765d0e1162282acd19c930af1289692c3a8977538654e96c12f165fe49ce3bcabd50f8f8e378bffbe0272adaddb2a7567a57f295ed5c16e369e20a0e23dbc87bddabc3871a57c6919adaea21b91ee359fb2cf2c0afd27752c659e3ea7e3b5e730bf9a589e8040ec05419b1a89661f77375a49ce1bf7fc2b24ada474f75359c1e0244bc728df01730f680524b5501add2f7f8a9bf432b9e39850ba270e4b0220ea699478da7d18584f4a7897ed322dc3cbe0214a340259021b1b4ed28e268e88622044180c9eaabcf4cd61d2f9fc51a5c313d518f4677a1d172751dea548ea04bab9e8790fbccf2f4997b0fcf0788740d34592d464f48eeb24419600c5b4786c01083527db11744d2db4da77e7e9f62d13e7200d2b33ff4b8ced6e55ad514ac06382c1af31d459453c848ebe60bc669f34c5a0cd7cc30d2ad5333975aadc16a8fdf0dee08b8c29137111569914297632b4ffce4b0a325b5399369a8690a46b62ca394a369c7b1ea45ccb1e203d9c5467335156b11cb47a86e4ac9deab11c069da24af683bedc1c3935b99ab56805ea92f029532601aa0c315a104791ee503606f3cb7817ce809accc660c66c9732886771d64803ef7499600359248c61d534d12cbd88c8697d6b81c674eb183b3c431b38cc21fd2357a74b534044e2568c0637537e66764bcac6e9c27e45b366769a683f5e17114e729341d0b308bfa15f195c9f3bba655d9a6465b0ed758a18f877b388c61f5ab9ead3c06fbf8c8711823113fb16f29a1581fbc27d70fde751e3b382219b312f94c7a782d6af57599d0104e9de3a8b948236078d69a67e9da5426f2c6a09ebbd55887e62d3e2f23cff916492460c6ae5148250246dd1266b2d351bee2f79953b141e897934f45589f144142bf12da65966a5daf557c07af0df4b5a2480ad5bfe10b6f93d942ac3b86761ac71aad3dc0e1aa0f20880a021d3eee17a577fb6904254d2edde55949b818bccd2f37356239f049253c135576fb56a8d1963e1d03a3e99afb448237975bd626b8504349e696c7ca1241c287eed54a364266e9db1111b60a79691000d0428a314845f90becd03235c986fca93eb48ef07868a9718ad3798c28ebab6ce705d665072fe173e97990e31be990f0d8628facbca6957f02f227141b15b51c3bc3c3a713a73b85b9c10d6f300a4c0647c2058545746178f635b16b345b902af
Ordered list with borders
View code
4e3d38abaca67a02c9b979579cc857cccd3cdad2d5f2784beec816ebc280713f5a49f38d016afc2eb94a5e00a1b16068a35b46584fda2136636375d73b8a3ed09eb35a427c00a8cb39297352ffe4c6768d3a2841c33e7e7e6365d451f565d50d954515c3724450d8392ed7cc32777fef940c12a60bbacb581f5f405642d4dc4d916c6b9fab236745136d4d748abe1a763b2551dbcfb0d27eb35a060906b76593b1cc9c14c3fdffefd9016aee1c0b68f019a408f08b56066bd88701fd48cab727495974114e6b98845a24a14e3e0ed07ca2e75a0a81455aa5f0b4e1ab8e2de52204f5bcaf4ed09160402d9c4bed5fea9a582a1308b02842ba38c12519c2bdbe074f4e5e44d4f05398e69f27005cf00c4841e1533b6e2df96b52c9c293f4bd6191058bb53a383b30cd326d7c11fe84a08ae49e84cef4fd483589110d40c7d3d1351a7900a7a91f16929ab0f9cdb83d6ad3349a8f544194203f00775fd72c2801cb068228bae584b1f96008024182aab2876315c0d4667564bde2798c9eb808ca1a3bbeef2fec273580000f09eb2276f84f3d7409e41aa80bcd4172300a38f4e76447a8a14c367bbf41fa67f1e0e16b926c5ac204c2df2003254c7210e9d1b249b265623ecdde79ab712e50a3110acce9396341a644d38fdec79b5bd6c5261494d28f7169c67675898f32618c1884089e3267217e283f802852805db57493b80cfc3e53523ec49ec8a6dc154f024fc7505c4f9f6b5b0bcac9bb08896ebc86648d59a982297e8272e0221f73165be8a870e01f4eec460c60e646e4530f4ee56d8e592a3f7f3ff4d04e46a99dfa4b14bece88ee6bc8fbfdf3bcead4d77ccc9e3e51f1ae12ec28d2269cafa0aab3817f56d938ce1c3ba1535c0eead34b3e3885c479181c65606870b78da609eadb4bb0776b0310acb6f44145a0478ce20425222855824dbc905528f96fcfe5672396c73cc80afd454967f9e17967a3eeb334b64dc2d395fe050224ff62e9267b16eb23a480c7c2a651068473a6afef9c2658dfb6fdb76c33a867781698b837d808469ee17f61914c9f1fc304a6d9124b884970ce43f34593e013b5ec545df0f7bc35f81bcb88873534d559d01c5fe0fef52c13f990bb16743f183109a35f47b916797352694c01e8feff6c1d3bddaf6d54ec98c03e3f1df9b500b979c1856f49d403cfc8c6a0313d2fc31ec33af009b01f18ecfa57802764d78ca740022f61cb51d49c8d383ddb66ee72ee206fb254fb8f313e6bb81841410071983e820968df76c5bbd47daef5d53ba71b160fd97d57a24b09b6ab67f2a8ecd090fccdacb53ee96733a101d07411c590e7ef4c5288f091f90b3d026706635ad942fbc52d95e44e60eea9dcba56e8337926d2bd4a0af38370be26ccb2390b366ce886699b5eef5ea34f602f462f655d18e59d9f9e9e73f053ae59b53fed14ec8475d05933b972bc512389dc8d07a389d67bf138d3b050a405b55c7c9560f6e055dc4723575bd8046f3f3e7ef4893b3f1b516882935c58f9d81c9fb58e
Card with list group
View code
cc79f80c600e455d1cccd24cd665e8579a8cd492fcba011f2478f1e3f5e3fdda8aa1f7911cc5f902b5f619fe0a8c11ef5ee777fd54fead0e6c3dafcdb42d0dfd079f39b649541ca90627eea2acc244f8ef7e0acaaf201d786deafa5770f5b780c060efab31f1bae15903cf18c0383530eea39418b2730969c586daf81e194b373385261ca49e964cb663d89adf0f7f35fad37a752783eb19232940c5f20714e061b4015834a59c2cde00cea85ee6447d818e398c16956f1f81c3979e85506e846473aded2b6f631c7529d7398e9d3a5eb9bb77a1783bb5eb6c23df06fbc3601d08d24a13b82107152b887b4ec680fdbfa4f5a5a39f42ef3917e27e51324fe0681a30e3446a8cf1f24671e75cc84cc692f398453a576186edd1f030131a43e7463140d2394aad7aa8c9b3d11d20a3003d4c5e186f1e7939429a6db448d0161314ce2d6ec5c25f50d21881fab543c3f5eb93a3bda78edd6ccffddde510d35042aab980d6efa0d9f10bd6e4db7c279c0635739d1fe420eb7ab0f2ace6fd75b01e0a16eac83f25afbc88336809951da7d292b14bc74bc65ba431cb5fe0301d657d2551241abcd3499c35e086c9613643c8af606b80ddc9fd3361196d58d7db8932fe47dd7aff3c98ed053ce73d33599518372f3b424ba0820d835fd0d7a7d7348de99fab1b63154336dfe0d9c087a874299af2eb94f2fad70704d1b3c620f88460cc22e8425d5799cd823ce0681951b9fddbb69d030274ed4fe12a77ebeda52557ddaf825d7a1427a08a9b9e87f7bbf060ea15fcef2652b1fd9d9cd62c85a1f27c207b4a013c15dca647a6596cb511641fd8add74d1bbd96e7ab21c9906ad25d0d0fb2149c26c6369b4853070065afe0af596d481a0444b45dac92d6e82e3b1ac2fd22a835fe974b087c9b65fc6cb7da34a8f794180998f4c149baffdf918eb5bb1ce51d650e4d57ec73ecbebc8ecfe917e096f18f628df71d69ea23c8e7dbfdcadc9f1b43e22ed10efcd5c1da4d2f3f4c70cf9cb1fa7bca3911301e76f5aebf763d6e017474250b13e0382b65aabcc7688a08e8becd5507c57f3976a7a75fe7cd715cf6d4e8624d5fe596ef10dc6dcb2bcdad635d4a0c79a8ad133e534e6b852ba529cba63f85bfbade4525cceb639cab9d1fe057fb00fdd6ce2a5ccbf4f9a758d731441c4971830bd5a23683085b69d4018c1630f8720cccc1909522f0bc4d81e23fac751c9ecf8af9aa5378d85b8732d6578c41255bb97d3188b9fd1025b7f86e6d63a919862fd798f660139d56995e81c8efbb61429decb3a7120d8d9bdada339f758892d9f3defda43d688af537a96ff498795ee5c53db74c826957b66a27fe5636c8ec36df2f3f54e4f808f37cfdd52d02ebf1a3d3653d94e9b99ea74191913048fa9e51afa38d8ca60d49203b1b819ddd0ca8441dbf687b174a97390a2dcf340e4c3c27604171e4dace7fd22776cc5833f0ecb5d3f0b75945f4c613deb8142796a38c07bd634f9dec91270ac43f025f189e0e2708fa4925e67f400a456f4ce4ac31a42fb29c88c0b9f3857dc8d3ab9d6d98b9a9467fd00f6e28ef9128567548883186543e1bd9a7115557f1d0fdfa8d8c32a1f752436718a3bda38109af5addb2ec019b541d4e197dd698ad9b3747441829c1e14407e8bcfed0f4da5731f1c07904eaed0326bf1ea4f435ee2c0612d5aeba895e41f6204240e6d1c0d6b1d244bdc727630307cc59e1b9776592466bdfe36665fa76daba8c48608b2310c5ae68ff1adcdb940fe004abea0cfbbc141ee516e070d69ed9fd9f471603081c575f1cc538dea9d1e1e12690a7c3d7ce476540f4d79dbf0f98265d2346d8372d704fde4c880205adc5fa9e7dd54f5a94d32b51b0651a54754330d32452e8d8deaa91e284e109c64aa82bb115566652629c00586d0dfef7120d6c49ae5d2e975c300c2831e9ab6d600ec50e592d05edc9ed0d952fdb2480e006a56feffcddc2d78fd7f1d4712f96425b7131fa77b7bbd5a5bb23ed3f9973d39ccdfe03c3118f91720a2e86f2d06fd030abd4496c9899148f87b1a1c75e57d39ae11a76b52eaecfc0459bb96ceb99fc374c91b08405a363732708424a212f2730e6b0438f5d3efbabb2
Callout with two column list
View code
47f1a7d17b7a36167d8014d898cce742e060176a36db0fb178369fc312da14b635628c9628feca0cdf24610b996c35d4408a6993679106ff87d31954893d615cfd2275d523089514a8cc749405f32908fd89ca3d35598efe6274a51a85c6e0d7ac2b8bfd266f8d61151f84db2b066530157e77bba3708bc7c743e3bb767937ba804799a73f0d589e30c9d522b225531902b7f662977d618536b2d222573c756317f9edb5165d09f16d65a163faa9ff2ad46eda725571522bead1d4227de0697c027b0d420ca2c6b3468cd73b8e46cccf96cfbf6d77577fc1b1c7687765aee61c353cfe3e7a7caeb28d53fd1dc9a62ff9287bd5ffe72e85098304cce87fc6236a4d7525cf9bbac2906265a5279e1b56c951765be7f1827579a0affad0d1fb5bca943c0f0efca5208f078fe694d045fd4bbc7277e0ade217c0ae66e477177702c0d13c294d92eafb3c456deaedf17e5abd9cec8852cc7a357010f4c830b980533290b016ed4181b2f43454008d5e418810e5b8ecc920fedba4669685539f46d3271d32b29775ecffebb63d23dea625661b36a761c0eee381d201cb6e0f26d24e83e89c9be8e37113871da8100465f4e7ffeead68628a2b16e4a3d907b9036329fde8c08ef3c4e68eacfb27a486b8225e693d0d5604942b7e8e92a5a279bfec1205d18679dfa370781cc4a1d4c786e1cfd0df88092fb5f25fa041bcf76c8fe3d0606c590adfb94e438b47f01f5fe379ec872116688d18ae295230e1be4bab811c890d1327f288ad08d607897a9fa634a3c28bfb5ea8061b297cf2139299de4dfc5334efefd05a7eb9eccc10551715200e6ee52c06d542d9239d441b085b44415441bcde5637fc2ef6388f7b06ab209fd7b02723e84c27503ad5ce5758e9316538a1e5cef1164ee71ab7adcc118863ac899ba33b29b0be106164c18f3e649093d55fe1c39dbdb49813efb2ceaefa8b08a64781346c33b44352b0d52a4816bf21faaa14318ed543d1172b305048db82faa5afe035053b36e16b3922a4a572daa4571195c83220d75d991fd37a6c0fa5da6350351988395b15c0cf543fbdf1ee0f7680fb41d7dce7a35c9c8d8e837571c3f5482a198ef148234e2375818bdb551f959dc96decfa24eea7d8218efeee6aa113bb10e3ed55dc00c4433df3459c97dde1e1c9a7f6ef781c320048b98ff1ec6d40c069f529f4e6f66e2fda52b36e7b257d0487d8c291b7a3aff28bbb51448163fafb3e8942690e3a0a7ec19092ad07ab8e47a633ba8b8ea89a7000b74192fc46c309b8b3b9f885cb37d711089f07f25a4c730b684c4ad97b321ce37265722c955b772ff1b720b6683728f9aed1f658a61bd2721f072122f00c25a65090b1da35fc428a1001f9e8a180eb8456436fc47ed35ee3ee3e34a9440e67673408ab412e394b8b0a3a6bfd2cc99d02640c585472505a3385717b26aa886588dab03634e0ca3be657259bc40593555275c6dd99241ddbe102582c6792e7008282fd9035de41454a47168bfa59757020432d4a162f1f7f0ea4dce3addf3b687393f5980358998a5856c54ed2ebc9e595a53af2610788052a4b504d86781ad514ceacbd11b4e66944b6d22e0a7b6ad4a089f22de3cd50c6d61ef795fe20b46b7bd44ebf3f5752bd4fb7db8f589ca4d3479b5c5b94f011cfa3ae45efa669a705f58360f0a078d01b2e7f0ca8bc2529e7604c0a8e365c3cd30ab55a956688e8cd2af07abcbabea317c97918402d248e5782f0cfdd111d8ee3a84c943fb153321192652ed39e6716d8d74615752e7cc8ef424795b9f5cf4f7b9304528d604db8ea657689652d6ffe0a5d63b09fbb7984f9f6398cac223d1c2394dfb4b0d72a81115f69a24353d873de

Collapsible

Collapsible boxed list
View code
78507c787f9c339907118359ecb2b07acae25d21ec9f407404ea5ff8327403ff8022540f53cc17fbbdc6f1ab63ba4299daf3fd8b7f50e3359d8e5d75e8be5c909e63944e3274657d830024fcbff98664f9c25569542441ed10d6f4682f11347353b5b1aeefde378937be285e14a16f02492ab3a6158d56c80f0d0e926dd01792cd2bfa2ba3c8727db4193ae47fe571f8ffae8930231e1c2c2fb1491a4a50a15d7ee6869ceed94761990ef0768deb39bcead23fc4c9427fbfaa4254ff7d93f83e7b49522f0c45dd23f49d9e201153e1bba0babe8e36637daf7be3f8887122124f5d3cbd3c98d7a0e1f5fb18bd52fa0a7367f178e53ba8303a3137cb549c82074fe678bae0f0284b4edc3268fc75b4dd7add5c549d305346658aaa3dc51208bd3390c9e644025296c8f49c66041f02b8f76325197f5c21f3bc3d7980eaf1d907cb3c273c479048674df40296cd1a2efbbc83ea89ac7be83e8546ddf335ea85d9fc8991ff257cd6796f20744a99a4f245e8961fe7e6f80cb61b3988d79f38282d30883e72d7a4a5338ce3607a9a0e8e0f8b9e854a370192ff7d190ba6913ba501d5f6bb9b8c18fbc76b7e2d35d59dfe52eaa2bbdedf468eb7ac14c7056ec3b21d36b4b3fb15fb039e4f0da7f358bed178b98f80d4d43d8b1ee44ec27addb30360ba2345d29ac938f08c9b19bf57cf9eeb5ab9ed27edda2b6fb19b5136fc2425066bf0eddbf2e87c7a46c2c26f87172ff8e72acfac15db7a8f11d282ae418399754cce8fb35620c24ad9690021b51d86d09e6e11ae337ebb21679a3e959d9af5eda122ef2018e34003dedcbe62c7e454aa5618fba02b88b889aa44cfd5dd156cb3ccee560ffc3e1b1f2be4d8255495fafa0c4c6ecc99d1a5e2488d8c2746ddd0893e215106bf288e3d95a94a39e43d3bca6074983516632aa93fb631fad96259b329a420e207cb30f18bbac4e98287597b912ccc462e314ad8afd22683710c59a3c680b89ac270f510ed02b759784666a849b32e6f36d260528ca2319be392573b8e0c045109dab748c0b2dd655d25878a57abe4a91c6861954b5149b3c8bd8fb0d204787f79f89f923a5c1a2c33296ec08cc0a0befc1c4fd717436cab549792c821f28edcb826bc9e106cbd91f3eaee50a5ea55207c58c5ec2107c3b987bb5deae994a902f2adf741ca400b828498ad1cde651a7bbc9f53eb7db0bf89800cc328deac5df866315f4f5b6e8033b4e21d572a57e4a0d322326b409a2e4f9576d89dfcadb343f31c9449813bfd31700a5e456198178056427a1a122cd870b75523d69f2efe5752d3516cdb938328e95fe016f5f840e3c0472939e41b22475ae8e3ec08a1f8a3cd6096d53282f6dd142f827ed567184c98523dfbef06213c9fa3e3b6b1dca27ba8ee4fd8b91c6005ea0bfcb83e0d2feb0388ba40221272920613966ac8f11a28ab85c54d4baebb84b0a840de169e2534e2eceeec324c7724a7afa467dbafee683a7642bf2f02e12cc1f3a37bf1f4a76332f4ae7f3bd5b6fa100a33bda0cf26e4aa9a8d3150ef2010cd33725e66bf2dc0b568bd8b5d93669c3ece60fe73e33aec2b5f80eab6885b130324d29999927850e6c9cb81edfd44dc1d92d8a22b59f151de128628bcaaf604d22a14837d30b9a372e881f0db278b304950e9779655e7559d163cb9550d9723b46dcdacf09c74d0f7c2fec6dfa2de3ce88a218c6122bf6c913825ebdce1c12e4cc386ce80b56dbaee4e7ba340caa7702980c2bbd7abf2de83cf07021f4a2e95c385d3e4a9eee5dba3df22e9630c82918e530915bb17db29c5d7f2abc6021af2086e2a4e96d3411acdccc01bbfa1c817d78acf234f2bdf4df0c5a5d5884a5ef0e8ee0f85701ef793435047ed423df7c9d9282b8c60201f053a56c96a9ef78293423512a94073cb4903dbe80f7a790502e5f13d359079a0b44e44ce7c7655500c224a3415cf92f3c4994d8b1c6c549898e6d5e5c110752c60515f3ae62702bed5cc0afad8ca1d8c821a1785a12d295efeaa6a19bc9d87075171df5394402fe56566946da10f492262dc4f86b47455ad4cf4401f353212f3a9af7219d8ba36210deb30cebe53af4367770c8c4539ae93bf3eced149ee77a73316669605817ab8fd3e5847eedda80b742dc7cc4e90b68e0388012c8956e622b0015b570e8e72796a12f2ab4e431e257fc314bd602aa103676bdbbf4fdf1121aaeee43313788d3092b86f76afbd80c21b20d2011e4e005f5e17330d72331251b0f4d2a306363ef36f480934a624d14710d36bc37b6f4538ac2e4db1287cf8ae5cd3c9a477b40873750cbd179600e3a924b5af3fa9c4307315a63d231d3ba3bd785e7fb183f28d6a3f9096099c2722cd30b6c4534639524e0ad52f7379afd2539f04c63fb2b7ad716087e3e59a90c262a423c9c81cb65a1be6f2b43c1df1c45bc7f4e4cbdf3dbdf9eb9e4c99d23084ddb82a5d6ee6cea947bb20571e4e76ca348309b7fd6211e3ba38ccb0d76ff3072c81ba431b0f6499a848a4c349780828350f207bdc792f0254672d370ca94fd52b57b416644447d4d9d6907f6808013d96e9d10012857f0d98ab1836e4cd5fa4ec6eb544e3e7ffdc9d24994b8faa4ebe5b5a1f129fef52af9b3d86d175ef021738aca99520f10edcce03ec50fce2c2b276241ac15128043ccd252cae36ee3e2f9aa87a602c77029e5000e414a031ca78f7a689b6817093b6f39b203b538c44f3c2e1c7b4e0fa87bf03263e94b571b15b770aa1747a50916d3746d74bef9ff2bd85732183676732a95c852672a9a4fff1536470547770606338910e161cc02a9d136fc7b9138732fe535ca14ae5632646a88a0a539502e2542f7462f47cc9d1c5599fd97389ae8d9a6631b45c0e58b6ddbf0a3ff4d9eb49b7bea3334f65d432ad18fc6b4b584068e1c396c3d969d860b49abbd03bed7a85895400e832931b9e5de68973260347853fc03f44b3b336179c4694496dceb63e0b23c3b445806ef1b58fa5e300d301deb273016d18242bad2c32d7141a5ede28251693477126cc54eb96da88f101a422227c4639a688e722b20c0d6eddc83c10ee4f0aab338bb5a3f68e9bd687e4bf653f07a2a92f145b2adad5158ed521f540a1d13b1a28884b06cc3b064438337c6abf4b600014ad65c4fc71b88eee3b1c188a8880491705b2bca54c858cab4797396023889d042a7f6ecdf266eec961fee55a1e2dc7b83792de198cdb90b779f4e7fe06833bb90fc104105f8036dc8e3d79276874c5f290039b00177783bd58cd04adc6503d7b2de92185933c55ddaf0ac4e6d463524f691f2a492c802b25b4a0dde44f767b02defaf4

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
9a0c315b0a41e976349b2d38f1ef07614c21bbe8c6af5453ac7f90e7a4a25a054d990dd40b3bd190f940bda73cc0994f5b7f8d85fcc6d34756d8bd1aea858fce9abbcd1b9fbacd4b209f62bea1f115bc92cc2f4ac9aaf4fb1609da2aad1e0b039fa054e3ce2b280e7479d8d961d2012a258a1648f86c1558f57a9db7c42f02330bf782b1b66e1685f2adb8fb2646cedeba25d560a88dc2ab58debac466a105caa6d8093eeb1ae8d04d69da4d7b4bc42e20fe30264fe9a8f9cd541e01c9dbe76f786873fa26d025f9496018519c65b6f5feb78cd2a060eff17889eaf0dd8d87020ede205015f0e838b2df38642b36b905639e489f640332ead1dfdfb7a41b4debf576972b09416f0587d05e276a49447550ded30be8f100f7be9929dc6f763940bb2175deeaa1393dbac985f44b8d878b251d33ae02ab3b85e25ec954dddb001c00ecbac172b27c49afd9ff926e1b0723ba329f6abde0ed4236903e479b1e0ec698b1bf8bd21b05c7681e3ffe4e55aa178c57843be7a5ae34b6eaf017125b0e76c249ac871e3d3bca1c06c2d74b54f0088eac0ce4195cfc57b8ea8f87252cb4a55e65f1ff4aaeb6391549408c08eddbad6f552330d4170a1f9b2e34938928ef6de72d4de3110bc4c5b4eafdf5c98c0b81fd5d0674845716e33d4cfb43bc8e694fc075a15cc597636be206d73e466dfcdc3ccfdbb53e1d796db9f6423af757d9acbe9c9897cf2985d373924ae988180418f2b3b5da54e0922a788df84ab99303092cb329c4795b03e206326bfc166e493680f355271113fae580faa7d5397437726563f7292df58ab3c0d23d9a446ca18f80944f42eb5b340b23fcfc470bc857fb8b00f8166c4296bc8cfe64f2a5a41289d2378e13f42378dd11d0c293f6f4cc061ce213ed8b0c07cd0d32afb66db24344b113227b083a5cccd6a1f0ab5aa9e270862f6de8892937e7eabe4a035ea34e26731cc000c842241a20513fc0ca6f193c0b89b63e36079c7fa3d5e42d6807877f99fe17eb48b4b011f3851efcfa32f1db06d5b26da130f0e8f4e406a0b544d6dc62b8093d69b8b100c4c4faf30a74ba957d75eecd24941ced6cb358d1f80277cac5236f4901277bbbeb292a46d3c6f331329567f3aa9afd7d24d25632402a7b5615af646f80d9b604312c84ced8586dd58751a20533e8d200a9d02c75b74faef94134ecd13f075496f05109080db5e99f5567e79711cef55a91a608b098c32af4686af327afdf4231f7e0e6d7d5c57c4b42bf3daf9a9e5d12fbc389ae2472ce038426175e0cf2acf7d6ab7b452a4970f0d3424ef865cee43c715f512a86f1cb35b6ef0d5d69019cd7742d83017d82a99907e164c228e2c533472b3bcd7c2512bcc9e8304691daa0611c092617fdd088a199da148fe216f17d324fb54651eb71c46c8287f731c31728a70f0e795d1bb069b332ffd66c7b00e0436aafbba474936848cef189381bd877f69273b812b6081db8e70afe90d411fadd544388d0664d7d4d5212ad6cdf2321a962fb409ffb49d3bc89bc6ab8d680d6ec3aa0cc4902536b41f7ebf33dbad1e524aafe62433bbbacc160fec72574e59a5a2dbe641eb45c2d8af053d188c77706a3dc4fa9f4458a19aceecf0925fec63beeb225c53ae1fcf21935ce12a511fac5292eaf0b77cfd41c745fa8d7224c32f9eedca20cb62bf45a9a4f5c2e4fdfc0d7ab50b04db0c46b4c2754bc78135bf1453317925a56bba4dc387bd46a42529d6b3d381ee7758339c6c74eb1ce9890be8082442ab1f537f51f0f7a30da926e1e97e01fd89c4a567d0b1061b914a9a9bf7df1aa652f5ce658b139f8b21e97bc5bd018821818f388991712b3ea66daa941b1ddd73691baedfbcc0197c5f7237e035a49113f85c074a23c2369c06a95e0de97e31599f25412ccf1303aac538ddfac48ab66990b60baaa934ae443410409c6fc3b3400d636a93cc6022febf90227a20f94ccc02e8b7d110f6161569b8f19a29e5c9228434fb0dec089d1762b70f41d49500f7d581bb05886

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