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 9747aa33c9c8884c9fd18fed4f2d26f6f9e76e67cb935bb2f5532dbbed1ebc7097f01cf51d35097c754a72f75c95a1481bc432bf674503ec2016d249d4777ba62d4a50a584b57db72cdc7f6391a385e125f160159a64aa0c149b1e40458a304f67aff34a8faf660f6f59ac5d2ce6a2cff10b92b70dbbd1494cc8ce2861a27d381feee1a268d05781d14d21f5ca93a8cd94c0a992b2da043392921862319d230a58ae9db3fa385c55a234c91a1569f54a845f6c793a9a9640d0981d53bed193c778f07f781e14cf895f269ab821e3b0d46c60bf1f6129b0c12e402b64655d7d52141a1e953c3a5fe1d08b97dc3263d97ff52483886f10621739106bf8e28aca5641367278f599cf9a8dfb674632e33e56367ed9ff019c3e36b4524802c1f843033a4d5a19fa5ccd235478ff67e88b3445b120b5b18e3c017da4232b17193f92a45072dd942d4e00256c54c25e0ccca19d4a47539293829bfb8f29f391c4180c29c4cbd0ef4a40a0acd48b1d3eb54f0dbd097e552be1d51756e1f9cfb21ffaa8954ae98a45ef0fdea0cd687b717733b82d8ae375ed95cad2d8eb0a972f8a72916a7c00d87a7e518df66a86fca8b8280efb911503fc8325d232b20dda2a9f688b969bf9c981b9b16cd57402d93052b2cde2203d4c0564f51e97bebc8fa52b3b26ca98ae7058e38ba909f3e09e0f69519b4fc4cf7c9ae54fb5c6bf2e24684f5668448062e3c2f6d4b7a3ae7d9fb235c64567153ac627e02767bd150801bbb1cbc29fbe1da37b91fbe5900d793ba5fed4a85fdc5d633bf688ec9971163a90385f9bec2dce6a0b10e27343fd302c0bb1b4ef186f60c8ffd6561daa6d514f94db83440f0945854e0153a22c1b86671cd552e170f0dc66aa2d467199b63948176000199761e9a80f8d0fe4b8fbd446074f193a68c2482aaaa48a811badf5f0bb547992fd6440b4c0fdb8feddf20d0fc14c8825cc64f625289d5b3d58f7e009a2947e53a01c1e8751ca326c1096f27bd36de5d3fdbe4dd9a472fe4a6c449a170744311d5f6e9b0f3696105bd4d06b67129e6c882a0c8981e6125ba3d26da8130cbcd2a2efd7f24fd68f25915fa86accd85d55f1d7f98c84229b29b80d3c8293a8cfa10ec2146520959a563fdeee3c2350fc2f558eaf4aeac6e132b514d4915e1b499c868329479eb4336e77bf67a0fe1fd370adc1591d3f7d148d8d5982630f1b64f329b980337ef64ea5e74504d12a279d886b0d1ef0580de3d243c0b1fedf4934aee1da8f0743f2b5bbe3f29099da914f2f026e51edadf532a89447497d2ccd217cb7b35150865da2a871e45a595cfbbfdd8a27d41ed544a1d11c6a0bc393e58cd43eb1910e69d11e201ceffd66c706e63d0dfd405337f4cf7183c366f5010959b0b5acbcc9ee735244147194744f4506491676b66791836b866c41eefc65d90df3ab16752549c047041bc78c3f24cc8ebe68261fd7cfc7e25986bb781a5a0a55442ca8
Simple unordered list
View code b3206a1e25423d406880df96d65386459c710e8b5af1ea1b2c69c60b0cee9d8ae1e636ae51bea005ed01be7871197c1123ce058573d795354dc1bf5b6892ec43175e419e2ecec2fe465888d565ab99f035f0659dded0c3644ce991aa31a5901047d4b5d5120421cee1e64caa34298b3cd5b83df1bd7a98c42e530cbdb5c1d8af6360ca10996913287cf2cef2b1a48b768d4c19279a05aa2ec8af99d21975705efb95292d59d14dc012d3c891e95e8a89659016696b9522d34d1f98d000e890d1112db22ac8557a91dffc01daaa8b00d6f47c41fd05e6c89f651dd1444a98244404f1e782d9c305f61c03b04aae221be0c9bc2a3dadcc7c0bcff65d132d889d437c779236721a341a0063e248e5a753f034a88604fef4a91c610b59ee3ab597fdcdf88b7fd6cef1d78c9c7e791eef2d3230b93754385abd420d0e4052ffdcff3c91f08872a18bbb27de8739c01153d4eec0af6397b036b5677c8b3c80c31991c37a55db3ef3f814ea9b9529610a2978b8cdf7373c2f8306139cd29f7a768c63036c1f6e9b8fe280b873b537ea3c84daa6b136e6aa36d15f394643d277e2c89f4fa92f873220d1a667147e7add25f4fc22c258d315f2a42ea34ee0f7797c476b1cc13aaeba8816ee21ff19b7fc990da858fb4cb13953ea5caee2f3e63611360a4678a03b35e7eeba06a0392b469da26a8f23be6af188578c59f0079d1cd35fe16b1cfa3bed5c56ed0ac3d455343e3583e720753a350b3c4ab911f5aacdd20fe46e32516e1cd0e7eded7d58e05349cba3b12d36f8822cadfcdfcfb7946cc07cddae9067b654987a4047d33af1485d04fa2ef49a6a89fa4a47fe404f6193663a003211d3d37e923fb6c69d34222cde3cb5b7a304f401d83080fb0a945d42762171fc3cf10a9762ee14689801c2edad2b63647008cc6d0af897ace260bac5db36276be47454b9d5697a6cb4c4194b2bcf87f93fd6c43de51cf6920e1547728d250ea6ede0f3fb6c90ffc0e3d891ef756859400510fbead31688f1e2cd722db6ad6e78901c2b14174f590021ae61f51de6306dda6a48b1b7ee9c4805746dbcf768e03db5983f6dcd09593774839db420714401d3012e51ded747a0f2b94eeaaba626f7cc3b0f6cba9588762f4963ec79ac50ee4139eb4f9d088f221e9a924b3d4ab3c3ea0dfef56b94c0c7179c45a4008d308bf67054ca27b094d3f467122129b51a8ffe6a2037d142eff4278f716e1de938ee1cb3b5e24ab31077c3725c853c5230618c81fae1bacc500b73fbda01712212311d5621f88c0dc06efe55c4ace72a0fa6a366497febfde3828618772596fbd66f93a94fe0a47a9106a41d27378dba9f4bedb20b512fc3ab7a3ac8315aa5b339fa9ec2be79b0ebc209436d45ccd692e8296b4f04bd9612ef84b9a98c214af358865cae723fc6328b7cf1fbb9e7b777023afb85a4c20944907b845fe17ddafd558cde3028cf052c5463e00dfb01808a48dc
Ordered list with borders
View code c8bda3816930ea08f66a93d37de5e503d5bf458613382e5c9bd3c63405bfb548ac84ac717d783716bac72a9b1767ac8d60eb01c89029ffdeb2585be6dd0841a75adf52a1f09ce2d2747c93d7836545db8ac14bb86cfaf97decb9608597901937b6d0938140f8e25053acc38e0ed93b85c9bc545b64134794becb6eeb1382d54c2537816461459e1957f72478c52421680368a4e75ad1380d92a283a30589cabb42c5e3fe5ac10d262b6ad47ffc09b215c42a9d271ca0be71bef52022f664b348ee5d417e47cfdc01ed182b932f095c640be01d74c1b0149e663be129c246ef1ff40a6027f8be94f86b4c67b7a1e06233b5020fe51253aed88ba791f3246b670beb6c79b59d7b60d5ffbcd8201d3f7460011441429645fb6b6a78192ed772edd3c91e75755108919c0c793fb67ef9dd2079823e19de8571058342bc80437d9fd94b6a7da673124da2effffc6f29a52c2cf3e1e3888b122f92602127ff522e8e23100c7345b9563191867fd1fc145598336d81ef0d6d8c8e62ebd716dd47d91a707d2f9fd21f3f8a677fc11524b9eb3b347862273dda9e3ac12c3283522fe21bb342658ec74da55d883a67322cc0741069f7d7fc91fb9d365da55ed5c4476d332292cb29e6eaeb9b3add85e5e9c4950d0227ca4adac8f326d65b3e864a18b8a73607ea33398c91d90ea7e109ed063283cd2bc9c5e3ad9b210845c096d4ab0d2140c7e7f954aabacb1c0184686abf550401cfb4e8ebbafa0d7aa463b28f03d217de19c668c5ac375fb3e3c58b88f271332a7647d9a52ac6bce3bd4447cfb98925e9d1a2e5d673da371a2bae4d2b3c18df61e53a2e14be3d1c06e1690af1ba783facc74e4a99ae3fa3e7082bc9e1d88879f0aa444ddb1093f35bbc67b7d03ea0d7036b78483f893f942e6179932708782e267e4b5385be272c5efb7ded8b3d6d3162c145ad9044a3d55ffd6e9a40a85ed4bb0cfcb87b9e6da49647eeb9b2848440781da402c398402aeb7d71555b97cdb269143517445b3c0837d512ec5e3d9c473675da6e4cc4438ea4ebdb77e89f73a78c09f3aca95c12b7530db16f5b346fa048fc3d0ecbe49c0e1a0eddad86862d83d123f2ccf528b76d049d0710d771f38a977f3c5fecacdd7d78ede699df0590c7ac2db43c1706f7548618dce9adde846389afa441cbecd6a301fcf99ebdc74b1d43edad1cabade54584aaef8c0cbe34412321c850ae9ff1447f3b163cfa41f95a685128d554e73d0856e1ccb21c32709a5aacb6457508bcba459cba5dc15d0913f75ee3ac303210ce6a663293a8320b40faede14475379ab1faa8ff3c06006e2157b87391f3b450607dad1f3b0e3095e354a612a8a07ab2d81245aca26cf8d202d54b2cc97d72f0f7d3ce96e58d4c3023b13d11461acc0e4ca5981e24194ddd8d8cc695b4e7a8b8b9999861d7f920d46216b109cfa6c6881148216dce366900d24073a06b1a5558325c3bb967abc0ef095887562b07135743ff82beab73b289f35ab0e5e4d568e4cca5dfe89b6588433062
Card with list group
View code 623b244c7162773389ef09a0b4c401ff7ed67ff9424c2729430143b729f4163b0608274857d1d369e7c9afa986249c384c6b89d43c8d392f653f5207d2b3d099ce4a09e778b9059171ba23c48c3565e535fd58610505460e813f023798be32c571afc7cc8f85fc31c4c19b8657ab9e14af3720669250fd2545623613e21fbe0791d23b66f308e61fe383f1607b0c2342b0869604652d6af3bb1ba175c3c368dd75557e5a8bfb1037e75cd952ee2e50f6d1b3e19f49986b43691f097ed454fa67aba981a928fceaffa86fbe041e11de62ce505c9857069361410bd797e07bb5b4c0308ea780cb2c0fb2658fb58ac8d134c6881308f39e4a3ae2132336fc69f03977bfa231db107079330d158fba47f68a480de03e38eaf139c8dc4eb444a37a7623e563e7048af9dba6fe0f7abac1b840a4081309213054a7da60841e716c57d946b588383a1ccffd54e5413a12495d35d09807d49e74a5149a0e17d056d4d7cfea53468d00df1647ed82e6726d8a09f19a1b28b679b9f707d5f748d4cf93aefc2abd92af11b3dbee98bf25b1f8ff7ba60c6508162ac5e8125c70f12d469138ffaa490af06cfbf05287f587eb5d96bca9ba008f6c01b4c7a9bc06de6229f3dfd25f7991185adff86e52b8c2c80a43f535368e8355b51e03917b046556b0cc0597f0c4f116cbf6f3e696c1635cb5d487dbdc66ec8f96940d986d03daa9fac099632d411b6cd845b872b2b06d4445e09541790aad31ed77c4aadda02ab46dffe247bb45933aceb9bc34c7efc77e959a49112806eb95fbb2771f9c16727bf7c329faab1d626863ec9462258bc84e75fd75035703b989600ad30e3d9e5e07661c18ae15456ef223805e092b83d8cb24d537f05d789e9b084d66258b8a2addc2f1f6fbe3af0021c747bbe3f337b1b26b7480a234024f5580b308ba004423d61cd76c368e9418db6f7a911eb2ea165f14fc1e362a95a41c0f81c3af6954cb3570139199e70fc22c96a62f6f86159af5dd4572b7920722099a4664b1a7df0ee2f8235b5adaa470c81670243c882b0f27581028f5c2f9aabe678830165b89277929cb6a6c9a824309fd37d69d64f118409301f4f7a5b0d32b2b839dc689d264f59f8288474ef74b61544d8600de2aef1c539e2ae95bb4fdf8c076a34c3f3b34541ecf4879431d9527dc40da6a0167affae90d2fde0d2953dac0f13e54f0ac2a09770ed5ae5d715a0beb0da310b776c61c50b64c666f79b1f658ac6960fcd3775012d46e7cc58b3e93c32bdfb3d4870332fc447ba18ff238b730ab92d03065bcdd036ead2e4838dbef88589ebfe5f8f80879640df2a699fde8de0c4b69a0033a5913b635498862ae173ee8a3fb856350cdb583fa1d3ace0a7a691ebfbc5bc16b71bac64da758cb907877830e21bf400bc33d2a5a2b53cde33691ec9440fb22bb8a83bdab3b676be4befef5476ffa008a45a448c5c5c63f8ca4fa0189a1f25b304fdcc7290365320a1bfdf44b356156d42e318de232e63b608665cd35c5a699c60e9a84700237cac0f698bd86774c90d8201b1a27628b8d40b9bd450e133b4318918ac73fdd67c26ea3756864c46564f94e1801fef41c922dcb65eb0f834137531b96bd235c2199cccafb1d98ff416ce2ebf5e4a52f5f6d23c49ad985553e573a65880cee9cecba40c4963d3510d27c265fb928d503de2a26c1065edafba0c97dfb2beb7eaef6fcb18ba224dadaae8a7eae3b618a3c87eee86261849473c99e6a2498da82c7bce11d958ab58c6b7b8f4b7d057b8611f810dfdb3a9bd7a8b519b3ff80dea6bb453afe1a49ec8e0f3ad673b317cf1e8944eea2dc42a3ef985b1d95bf49e155806fb3c6d92f9c48a1825c1055d600bc85be53a8aca917886d2bec4e6a1cf183e386338ab226fe82c21a46448d58462aefb6b3bfbf86a4e6144d5711ecd0aeb55f5f1cc40239f1bdbc6529be05724955dc7b9a3088f491dbafc6f2dca27845f9162e42bf1b1a886455ba33153364766fce8abb89fdf496477ec48da27946ee0791d3b43650efeb6acc5b85254889cace180673c5b549a8ba13a63f3f8468d66248a02b94af06d340ff054d333cc61be24fd78a95bc907a15deec137cb12da4333d
Callout with two column list
View code d0e6907bf9fda18ccd555d059857e472633eb9a06bbd92593bed5c351efaf43c39f3dc68063e3f3688be3c8a6e8be53b0851bb76eeef44cdee86f1917be085b29ec4fe65e52b58599dc7378d38a917ebb6ad4d5eb255f59c838db639e195d42a874fd8ebd371f2a7697401c1cd2496e49a6ce3da5a56733d906fa1e4054b3fe1982f4239ecb3da4518747d879e2fb0cf55f7eb94f1a06b73afdb7bf558a2a2220dd399e2eddc185994d5580b666a17f6dbe9c8f8138840521879856a923b1a2b4ad349af776506f2a1d04f9e2ccdca71357225145f17642622968e7b47e2b2b2732548846604da78e92a9b609b738b034b84453b3167344362ac9b13b00479268c6a260fba2be170e296ec0dc99894f6fbc7d39fa7fe327c046eb4017009fa4094acb2d6724aad43b0cbc3e368f7c0a3203e497ca2907ed921ec34d9fef1324170dd111273b0afabfb97b75a5ef9fa79dc1a94e9afcd1295321f9302d60e1bdc35e18dbf021293c8a48f3bd999df02541a15bf970f02506f5e71a3ea69caadbfa720e64d275d9bdc9d5b5c51051e5b31e515dd9da0b186a05a7cff72ca5cc761d89f0ae87604ea6486837cb528c3ea03410485e5a52f106bed02f42d26a4d7a27db14e14a940f454cf5a74b2435eca589442f075b2ecac43c2cb32255695d0fd49d456374503678fea356d1bfad16ef896bfdaa3ef63d481dc4665bc4105eda54272a343d77375c2ab403250dc6ca062c709fba536dfd344b113c47e75bb32a697ce7ee931d267886c6965adb6df5c5b3113b34790131d932c9af4c3b9217b4bcc0dfa977766001b05e08fd7803e480964e794e4923dd4b378f56630986cc2c798d53b7a66a32f996fad55efe9fb6b9e407f7b7bc6d0eaaa9d3d4fa6fa00317ae57ac944c2cd7beab09dc8979945c52506d6228d5cb2f0fd3e87707761c5e8ebf6d5d5a6f27cec187e19b45420589b8bd1ddd45bd1b90972404d34333807a00074c162f11203ec6afacaf9aeaabe072edf6172f453d0cec1656939b27a63494ccb9a6c0fe9ab7a948bca581ce6a91fb26890820ae28a4bd4698c8c30275fa2e65ed8b3d1eb59deb3a2ae65d7f76de77838c4c7cf3cbcb23493501545d90745a47e01182f9c49bf200aa7e66f7216277588baa33e528956af17db1b209fe7cb70994e7fbb35f0a41f2fc461874072e067ae989754261e3b96ed6f6bbcadc720dd2de7ae85c9fd760cf2f282036929e91da60a852423f29bc46fd8fbdda30a709d72ad033bc52521110100c6713bb85bbb1f60e1ea9880f6c64646fac8934b01508dc5d8f6d1b63ab09e091bd2f8fa70863249e174b16feac7bb67b61e90c2cb45d45e740ec5ed5cd29f89b6efe51e801b3c10a68cbfdcd543bde21a83648dfd1af2115b551209ad6530ab9e3bca5c5589da025a0258747bb191b82541d4724c1f5087c206d0e630d13ea01a1b18c097d21d93dcacf5e420c34439555ef5eac554c1e5a4b12a3e733423e7ca499c4842478bff2539810a091d2671ff19040917f84fc1e4d6b4d01389324379e707e7dba3a08070d1356bf90ee7f03ade8058e267a4cc7ac78b626056e6a0a0c8f7c69c004863679355d59563546b8a2896146da127d160004bf3e00637d56937f1d6a480441551613407c7bd1adb8b28785bd0c94c823f2568b96ac7676bd86432feaf5e19dbaf7f5a6f1813bc68c93992ee4c1e377cda51cdb5dd0f5e72461e9797aeaae6d21084434f08027f74421f0f4d1316241795165beb86aaa781a734ad00246038580822b9c03123e36352d81fa4ea2ccc4002340a6d4a8338e4aef261b2e0798070ac8e6803666d0db4e0708bac87beccbe3a5623294f0d5c78227077507c7b
Collapsible
Collapsible boxed list
View code ca430ebadaf921168d92cd02d71fc821e40a9476ec0074dd7b6f624bc2d6464c5cda625932deb32e434eebc9fdfb6e08be44764e7a6e09dc16d1e36f7a4c2ac34335c4ead3bdfc3f87cc88d05d061cb61dbc7a999073bba7d7340840f12bf0ae32a6749fd814c8e98de005c8dafc00f516b56a320cf08f35261ecf8d9e319b5b68401adcc2fb4b12fe356a31ae7c7afc27964e76e195fafa0a71c1c39c077cf603b34efdb952986bc2ab634ff311561e33443cf1a19e500f24722b2fb782322a041689ca3dd4f2251ef90d47b12693a9d57556717123d3aba8e253dd4b1bcd1d255b3ae8806571d1e43f1c8fa965b3f641f386bc8680872e98d9e2119c2d680396613adb8ff975701a07d15212ef5c1e167f3d44fcd44875de9ad1a94fc15e9fbdb7641b5a83b0081bfd17e3e11cd6ee78531328e193130a1fa0a6cf412b8d8ba6e0057851d2d17551f7bea0a2ade09ca43d06a0d18caeee90ad500181f1b1b71b658f65fe4388701712bbd0948f1124dda1b211ad40efdeda39b0747e439060b4657e06e05c502619139fb3cd46f5ffb960e65a59abf45f29571f8d7b29012472e0376150267b26efdfc2cf23fdc07329e03dcf23fc47b035df30532b0fc04210d18291c1e72e3d4ad537a9347547773c55bcfd0781129eb1de5b5b6da25fdc0926fe259ab305b083b4d6ca6934df9b86eb44cbf8e84cae5ef08698dbe14fb66b691475f4c66b10ce3cb0d3da0bd1d87b364e553482e6ba5c4d90d729e46addfae86d66811e30ddb16a1168683a1b2e18ed6e1435dfa0377200e5b6694066789faeddfdaf1282e1e44dbfe36c19e6de0f5fd1dd8911f13bd5499352a8e6b6eef8330f93a6b25ca14cb42f783fc1c9476b8445292919c47b1ef34b02f54d64882c6758bccfe8c0baee387ec76d68928b7d848777cee21ec2076ec5df8be830b930f92162e13a2be3bb8fd349110e349f6d8c6c9ca830fe625dd4a6d57071d17e0f8f16a249a467aa86fa29dc0aae49a7b6682aed2563b9eaf586e8e20d9cf3e8a94ad0f2bff7cac301ee1b0071d0c8374e5482c55dc7316e7a8bce946844f61063e4a283f2fec2872fb7f9049685c9d6aeac6fb781bb98f56c1ab5b69296cfaf2e40583c11bc13be3d7b3b5f841cdb62c765eb262e5eac1ff80bf68ed54de4e7d567fd5ea161b44646125eab31424d877cf67585942dea07873631afb16f55fb873c455faa6a3a057708590949ede54abc87a6df7029a04f8d5c07a5c9d3f8cd7c6137e8078e4a7d1471930326c8b5631ded43de25a3f90d7b66bc79c8c2ce284a5812183ede03d46c6b800721c9720068e9859d51220beef8ce3e7be892891f6e450436c1c0748081e3d6d17e47b3c6be25e9136251b375be580668d04e81b9cff7c472dd93d847ecf16e36b0732785b626f0822bc47f03cdc45d6a88540bb8db3110ed2e80f0165c9090401dc853d3b707591c6c15096a0f04868e8f71c8f4d50fbbf4a293f682bc78a67a762392aeb9e4051a64526c5a27c9fa698a16f69cde7cfde78a9608a7fb917813e9b936066681b1076f8767c4c40472f4808edeed5bb7fde446d51416c82fc8578ecd7d900aa005274a37b15030c6c674a92278fb0cf75a5d0156cba5fbc0711cea6e2640a1d29524750fbc79a41c646c85e0a833682f3c338c25c4074184974c9ad118568223d1a53949013828353aefe949542dd220bdafc4ffab747288f88b025018a21e09dc47cf8d12db3b7f9fffa00e879315e78e8a198f5abfabad908fe0455dada10c81a02813e3f8c5cd2f8c717aaec72c4865e310826418648c61c0eceda11f4af11521181178fbbd268970f6d850f23fd3471b23db23db09d849e83e95be1e51103b793ec6293baa3e8d1be6789e2c53a8f23741ca2d7ed4f9c0794fb00bb41253172d4fa151d1e7b7f2f2c90b80ec5890a2e676671f1a22594e23d0889bae597acac0fa442e3fa49823cc9a406ec09f5602d36ed5c3686adf90e60d0090e634b58812ecdb4f5e97ebe5f5399d0fdbf58b1718bad26ec7ca637fdd997bad7739a2c12f2a9ecc6ac9c85531e93409e9a98b89ffb9abaef694c8eb5bc2362c94b2aa717a269fb077c9bbf046d680692e6dab88bff89e7fc09185148eb38e7709fdc6189b5992907b16d3dc7afd6678978bc4391787367f8be70b018888703887a4858f73084a50b220897cd9e763cd913fce2db0850fd73644b476ae664c24d2e4d643f43fb3936d1106b65bcf6c8fa3131596eca33db774d74c3f423750d78fef27a6d37db88246db1ac345d800ad3704a39fdd7f2e54409fc804edcf5ac31922471642bb60d9d7521cc272010bb020a92dea6d9e63fe4899e51c3d056783f793001ba4df708664074021cd47aaeb49de55e0d2c520af53ee89c98dd2606578ca2b910f39bcb8a5c198b4f8e46d50edb42a1081c6efd60476ec029cc2d3501688ed729bf6e3fc3f850bbe29c51be375c1365999c8437df2d2cf8f83a1fe274a22104b4101567a8aff3903abc9c42ee7ff43edd0f4e4d37631f4df912c2ed0fdaf872f9467d63ed90e6d841a0cc9ff66ca505e6052e1e4b5ba2bd2414f72af34f739444467c7e9811f8d9ee3fc63d82c474c167274ecc7e78f450594508702475d5ef0de958f4fe3ac308c317b8ae4cff9578b606d4fae91e810014fc5d4512841e9612fbf0c22478fea5efcc35691d40abe4c3d53cf45095a3465f2cb16d999ed4b05bf6eb3c8c0a7fac6622b58290568e50649807b025bbf7700153bb7dfe28ca8bdef2df751545cda3a8bde12ae64279c04d8982d43efbcfc750f17ba6d3183a8fe6b5ac85e8836cea482bf7e822b272a199d5397294c475f204b79f9a89147f5d6afbc91b7d88c5126ee2b8b8c4fed46ad4799557248d57a92ce9813154254caa920aa13e03f69715677b9643cc5e8c4880de9bf2483c82bcb881ad2eb3112c1a1c40b0e2f5c4c680d4ff201e1452957c7a9517e8bb622ad2bbf2a06a4dca07df7c0890a78bde6280933019d72f52241b0a606fec11938b8e0bf1192c2c3a8dddab051291fe0cfa51a7ecd99d17d75d686edcc8b092afe2fc9d9eacc0e360f50f9a3fdbee5d3633cd6dd7ffc40f0c3f716604c9db02ff5ddaef97f572c95e57df84c9756cae41aaeaffec532549de75c1d6e7e60dfb848a7e40be51646801ef4d51aa25aff68ad3b90a9e2a65e990790af4cabb426132207e6fbec0362c7ed8abed31fe9ff2c66f8030ebac29a771f10e103cea7a29950fd411c7472473fdba6e347d9aaf64b20b1c9bd3e0b45788dc323b06eaba099f8f8076462cdf84580858e96ee5afc986d6f7ed61765c47e
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 f19b1938e0a51237fcc508078c480959e9ebdfc9bce5ffe53f47578791d2faf02f39aedf9b309870212a7724b1ef4b780b3ff13d488022d1241f3158af69f2365a48e8b14c009db2853d8d762003e79512fcd77ab3511c80b8983959251c734cd969daddcdf645c68a8e4f5fbe911a55fd41e65bbf9179b905100f9cef6592db46e65d917195c36e19ee116493a7e7399fc1a4d8454b170b5d1c60eca88cde677744ef0644463befc970e6e1ec246cb233ad862412195aecdffe618621ac48d4104e55ac918555731564fb132687efdb8e3ae1167723a7d0d581588ac7e10c7d02e3aee25a7650880379a64ec91d211203bdfd0956942f9e58099505fde4388b1608263b74fe2e0a41c779282b7a6220fc81f670b5b3c60c43cc8bc9199eaa02addb10aa1b823e7db81deffd5dd4d2f338747a087a3fc58871daae3a7750d5730e80f9118052abf11c1074b34a44f6ddf314f0480f41cc13afb60e466558fc67a9e631f9a6983a2ffad4ae6a69d539669e0657ac47ce0bd9bed23b8437f339f00213fcb2bffb249abaca7fe6e49dd9ddf839adbc29bcd76602ce5b829a25a114095973b27c95bade57bd3a8cc307615a96a11158efaecaec2c62a1551b521bc98db9e9966d1b4ffa54e933df64b76281f44d2cdf535feb36b775ce9214155ca318659f71353f5ab85af9e8209f0f22164ae4522a50dc21f077227ec6451597e8db8fb1b2e84fabec8e093f282e59283797da094deda358191384fdc1e6ed1ba3436a2b093063e339ee9f459cfc96873e13d06e5e0fe397e5c92a7e26c26dbf230d43a5b6c2ff0bc8a0428f22d1df9520a8047a89c54f613d6951a8286b570cd144a7d18f4b34cd751247e48a45690a5e4785233bbb6477c0e0f862213dd31f602b81a7dda246e9b4538f2583d3796a44bc2df9ad5206c075a50691deaed152a4230257b9ca7662df929528f3ee089d57b355e4676d781accfe1e9cf70e115a45c98bf86860b15f0026405e4255bb1ad6f178b814bbcc4ab7d3052f8ed3d0bfae90759bb1533c42bf329101b96795d930eb974e4642d6c1f810f5941e6e4bff3778dc994447583d815324ad07102c80a6eac896b078b9f27760d6dba8d33f632f45ca06421691e5fad0c910084880ad469e65a377df16c91595bc3e3ab4969e85ffb1c04dfb1edb45844ca1eb0b16b541fc5c07bb0b041c55cf3625326e8227c9283a240182c3280cff3723517e43198823bf0e99f8b5e0a7f373b6cb0065f2b339f899d7ccd1202c550935d5e20ee579eae1d309d61e15ef4e47fd8f8be83bb93e889f3481b9ff1263057118b9a970c378ca02bf7f66e5be189634e4737e6560a9af63e3ac16af08c63dc6fc601d70da367ba9308104c2a16dc00b3ead442aff55e76d324dec0c7c4960d159c158b0c9af1893eea10f3633d3ac8b2037be97bb42679eba45ac77cbfde5a4e26bbe64a0d2e34ce6761efaba1d53ec869fe214a7db8f3314a184ac1325693d00e200f74724d3e9e33f28dc0f37e124d3b50633615094dfdd582ad6d68b7221771c3ad698c5fa941ce708fb8e675e96c42ee25a04ef21ea5c5b8bad868840c668bc1899cb087a5f65967325c01aaeae253101cd730726249b9b1e7aea9bf619a61da28e9fa84909adcc0017c76178ae9bc528733307c40b64b3debba1d44e9cb01a84b272a86b03241a9dfc0ca5dace1db2ff8378c6e5a5acc71d192d856c0819239ef35e5f6a7c15430f8a01e05e017124f9ffc8b9079660d27773b1560259f742d4d34ed9a4db57869ffe838416cbe6a9c3bdb4d9a7173970cc619840e57c0ed9d979d5c7fcdec42d1ee11af1e8ac4029b1bf38f82fa6b66c0f818b9b194eec61e6a1a01df20e925148cd4975b4620b0da224a93ec0ac023db7323cc67fb05e11bbeed24dd5f776106b9759844d0f3a84e5f7df9c7b13d734f60b17c9df97b63c4faadc6c9c7d43d71197c9febaa8f8edc0f5b9081a6d4df516b24c42f6f10fbf851bae0f3e2aa145ab14e9f6500d9a2cafa4c0
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.
