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 bd773a759418bbea0fa84fc399ef01453c73ad5129478284a9595a10414356d0970d75f799b1dd304e96cec6c1ddfc347bd3527508bb0b59457d24fce64faef6eb6fff98039ac6297643b7c2d38f4bdbdef58b94472b16092d36cb96179503b93501e0c0c31d37073a4b1aaee1105224db5d556e7fc3941d72cc513800870952be8cf2cfdd911721155e4d19e8cceb32fe31428f28aee3790aa3bc6daafd8763f2815b7571bb6fa96589d9582f79bef0e7fcba3c75d337f939f8b85172bec61351a209f0d3da0a28f13f8430269bfa1ba4232beb206ce17dcc5a24988742a32fb25d833819e6b2b8d27b73951c498adee990f89f04e3d9f0fa35bd9bc533802fc4c0735b33d59ff78eebfd8a58b67cb97c64139830b21206cefc90a0d7563d3b9ba805694abd0a8996f958e2b59ff9e1ba72bf2a891ab586834d13a8a4546646305c5186605a020bd9bbb17c3ed9be1494eafad0d3bb076f327acfe980dbfe2975848d114dcc6271efa54e9a627b05c05c2021c26a63d7f3eeec4fb1afd021630ebb7004c1ceb5bda101a335debc5f824fa5aefe00917bb93276f81cff9e071e0221ea7a1ca6e017ed3e303830a5f5c3b4fb68ca17af22276cdcd9607df1ac5e287437f25dfc592ff534630ce9c7ba3e6876a29ff91521e828e86cc9ef7897b107d0a68b2993d35554565364b07ec4f8bb7bd5b2fbebe2c7e2603b51807f740af993168a5d128db6e8f497fb95017fbabd4aa407f1e47b21f3c00f5fd44cc208bc3cf78508208dab46f121101f95f080d275a090e950757cb78f043cbf0a6c9dd0c23b23bf77d879067c3e8586d7469f912432a858159acf2d31714fa0d6a9deb709ecd90eff37641f7ea9688b25ddb9fdd1ee10429f43549aeb306b6406b9135dd604b82b17078e6f05f14c7250e117258cee1696de2b56b9d9057f2098de17b2c1062740a07a337615f944f03f763aae9b0a242117514ce074aa106bbc9eefd943513f1abed951ce1997d65ee555bcca40b7a66612e36a18d2c702b49eb35221ab82d5c970bca125c5965dd013c90bc1cd8c8271036a859816fe2f5802f7a711f8b0394bedaabc822e2a010b297b219e05afd6d4e43a9f1a57daeec1226e1a588ed5c854bddb388c89ed5cc2bdf951d904bdd7f6749a1ea5af2d4f01dce099b14a336bc2760bcc7935a8834e1c60539ab1b2cb89b83904637980eb7b61381b4089de1262eabd332abd2ab9ea3fbffaf0058e8146cac3271a06dddee19152fd7395159caa48be4f5b5136a2a8b99544f651a4f446153374b129c2afbeaaa43a70c682b7e21daacaedf9c1e119e3c6d56ef51829777b58ba02e2451fe4777cf3c5312db0678aa09ff516b5c1b88510e2729d265a966883cbdd9c9ad6eb8a639a90342b8919643ac55ac0223fa311671bec6cef1ac2ed8236cb03f0f8202fce7601f0ab5895742865ad39ccbe99225b200c7dd499242ffb33adc7f7cc9888c0e2
Simple unordered list
View code 5b97526591b19ebe2c14aba8697f331e23d32a2c9b9d7520874679ae9a85b9a875565848fe5736dd08f79484858f247d2561f7d316dacef56a3cdaefbd3c5a8e09fef2d555df0cc39e3db4e026e7a7495809295fc0549e384675df53b87509c57b6181a88d54bb13b8f69ca79fdd48f178188747f6025e993dbbf745d107749a1e43ead70f39c14cea562a8522552183c564a2cb934b909b4f452990b64ba662bc0b88a7cd81f982c24d658b4e4a3eb1f319ffbfa9c3f38f3fdde754a7a11acad8aabcda93dd07b397497a6e63e35bd0e78079c453851c09578cf9de9d9397d69cca806c6e38f6a285299537ee054b786df9681eeb7800a6c1e54a170ca57167830ba519839b7a3c22395de8b02907c586b00ca117198c5052b957c8058103f301c965b2b6e9bd431ccab18fc9606beb70b829c8d91f4cedce2f26438494082a340411871634838f8476a0e9aa7988bf820de90aab449695ec3a6dd6fcfca9137e83ec6a276723e1a675f11430e233590a519372dc5272fadbe756e1b2403d6b139f459cca3047e2a83bfec6e852358c2935b32497fc5471accb14ffaf74fe4f7c9b8a06f3e772156b89e9d323f17060820114293806aafeac6c89da86545657105dc92aea9ffe5ac71ae1709fa38793ecd1e8bdeb33c2f4bcfa2a505490ff481040fce32ee1e7d7f545c1fd2576704526ae0361dd855ca362540edbee5fc881694a493fefca3ab6ad71cf179624a9001efeb4101e1cd2c9a0d8d3d32a4257a317fc7d0991ebdec5379b5e5e07ffd42c8e552c9e5417e3423d3b7652dc9221debffbb9da62114265c7e84136c085dbe09d77d45788e035d699bfc4b17640764e956558dfada8e6c07f58ccab54d19a00d36a62a7ca84abf538c2bb8e4491311219b40c83022559d2a9b3b93a7e1184173593710b5bc81ab676e750a34efe1416638bfe89729aebf37f34442f50e560674cbf56ecce1e758273ca42144548ad1ec17db307dbdba48f36f093c0036f8c03115a1a422aba93fefb8a9446a00219309282e87167d689f79ab6774d45f047ecf1d10866dbf2c340689a78ef9a04ce531ac2ed47671f52967dd4144744eab9e5a6b1bde751edb2ae60e2cb6813edefdd401471e355d53ea20056775e2b599938dbaf80b384a32a7ceeafb6278e78e27683637d0ed8a51663ae793fd4fa8f95c0cd22fbf81731fd0332a16e23d8d56c71261727df018d8869e6a47dcfcff0107682652d5b1fa6a62d03b8090689651d441671b75dc5d0e2face9aca5d85b0cfab8db9c06525268b55a568ce09d031f6cfa7943dc68c15b24740efa22c92a13cd0c8d220c9f3b40cbde0809a204850805b17e08948240228bdcb95b57e331384ae18951a070255fcb587951e616d274ff5b89214639ab41b6e921e6237a5299118149e36d0af9c0a47e6b304f8b498c69c82c2ba36bf7bef4cb43057078b7343b825ea75a4f09991dec87e1cd57d39c083
Ordered list with borders
View code 2f5cbfb1840f284fefd626bd952bbbfa8078ac3308d687dfb716f0f7446c5522ecce0349c77e03a99192678c9d8d44f0d178e8443e70564776168e00fb426a7b5c82563704ba71d583ae853d0677a9c6b7d7136ac6522332b7789c8fbce305241abc7856231c6f1aa77f0c306cb2f540dc7aef33906e045830e19de9da5da264cd632f670d61eb8df07e3b42b621aa248d8a2ba9ab8d7d7fb90c5c8168beb7331902fd435764018ec65c925636e7cba2e6ec3eae85846e72d21531c069c279a0b358bcc325290d491f0f96370ada0e15acaf6686804a46a55394ed510d5b7e9eceadebd2bdb4bbee425d737f482bd26c6db1f01bfc81206eb180e7e6225b384ea3fa2917957ce512665bcfba957d8170cf363b618013f8f05c4e7fe94ccb2911736e77546aeda90f96f48f9e2f00cdcbd2e7b152451faba7a39eb2266c2b6fc9f481595b9651a9dce4fc21474db395b07cfa7805340eebf61699f40d76c8ad99140d8bfd69f2462913c05c51e66d6219d21817d872f731701c391437d537795d4003e7fe4d94ac2ddf05da68dd570197466fcb07fcdb28fab81f1a4093e971ca7d5c97d45471eb13501b8fa18621689c83d5a5c830817ff3dc4d2535039d52dacd0b8fd12edd19653442bdbc2b70430c2e056d4b0c9df6154c771e4342b49b5ca81551d9fc702ae18358871c258beceb456f7a7a824c9d9dd268db4a785b51bae48859dcf8c767f6dfdacc274a13583050252754421099ac9c781cb0428cfb76a65c164db9343b7422c6f6afe2d1a386bb98b21d9e6912ed2ff5f2d58bd9b9395507e44b5dcc0a3bbc54e023e99bb82670d30b8b2a8b78903cd791a9261e66d4a7720601d008b98017a941dc72fa5e4056fe2351ff18853598da54a04b163045832c02702041fa6d805973f53c70d92c3a475e1d9c446570967e224c4c8aa1ac194a4bf95410c615506926ff61ce503d5125aa168944f66311d5d22ce2cce567a3abf452c9c5b379ac12d7f4fb15f3605e16f25392a72f70f52a502e9b2f9ca0bd7ffc90764e28eb35d7938a6710d3a77a21cce7665e58551c5748fc0e21495c6eefeb14d0da7079c0ab711d556f53561dd163a944fb28f2276d27a74874b4c80e7d6531552df1a670affb13a26195565a67e561ac9c06869ed11d74b20df4769b1d98f70022aaea156baa52a25980a40feac6f647312febb9f7e409369adbbd3cf88488157df039f15672de3fdd0e485a1e6cab98a451870e75231058a31c3ad0b7cd0679ca2de3bb300c9e49e1d98c3ea5b68bc66597459393abb07a6cd33155496431815d0de88f79f41bd28326cd8af791a0ce5e1923791eb6a21f8305fb1e35cee3c7816eda3fabea3ae659534e46884113617416ddcbc0408dce081fa0b49e3713550e7a6847e04febb3268277552642ecc68f95bce1268bf060508bd9a930374307a9ea9440c054e64cc6b7d5956ec0fcc109b0e07b541d27aec32beb53dc565a3bdc00b63a4316c1702f5cc1057291e1b3dd320e3016d4d3b5bc419b
Card with list group
View code cfac22b4eaf1788561ab4cbe218f64cf524cb7acfe4473a76556bc8875f20df58b06dd3982304c9e288eb8ff98f2b3f2f27593fcdf183cbc77bac73dfaae875deb2e4ab09577f6249b99fc12c051d7193ecb7e7be11a64fc09699b577fe81d233bffa551d281f9a403ca05f6f286d6ee2811d94627a42aafd68b55a31b212aa6f821174d5c79529ffa2b6146cbdf8c6d9b052b51009b4a8b4f86109e3e2bf1a38eac3b3abf922a0e9b3ddc7719b1af16dc3d363319bf9df234c3de4472be120551781c738923b465942f2b2d636cd83d5e6c8f3954595d1e8b0e4ad79863b7ac72ead39f45fa33bfcdea9c52a13b11bba41f23aae1cc1c1579e79737a545c7ff29b01019b993b900ca956173db32ca7ff7c001a09f186031d4797f2bc7576c43dd42521f91e611c6b082429aa0e9b6d2a131c71ef1877b9ff8bb4f80b8facbd4d805e3f61df3c64790f2ac51b9f9c7a169002c12a87efbb093801b8a1aeaf146c43d52a7715c50242f1ca663525e2182d9dcf73146f1459f86d68a3484e022220e0a9f541f84e13d42f5dcd8ba754dc9369b912dbbe5ead7fce305640801be1f57527484bcdde7041b69015ba839c3bbf3455e15ccd115ead44b34dfbdb133ee2d9b4600bcacec0a7869b538906b3d7bcd1c2deaa1c991508035d60fd5b27187895b74a85cc987bb3c5a2b56be42fe2bebdaaf4c41fb1b26c7e9d1f32896a8292df7d7dbf4d2aeb9d7933b36f118dfb20214993d603fa45817bcf5856f750a9851e86edf7fd9a38bc73935d454c1921c48a03fee8d3fe1784421abb913bee3053531d383ab9d0950a99523074996174d9b6e8cf05b4a38cce80f44d9d438f486edb391e72eec0fef361b492b2989861315360765868aba95c7ef1a5d587e002255af57cc1dcae7665fd6be0738915c28db3ed91b12ca8d71a5f6c23d2fde9f6deba102feb521ca7384655bd1d5bb04dd300e0ad73b8c722e2b60a6b3f1d86620def153dc2a5e66595be803d5e7b1c4e5544e0f569968d17e01d7760b5bc59e8f3c70775cc47088de22b483f60bce0edf318852c1da466e62a4d88a04fd8cea7a612e604065513b45fe5e7fea1c1546f09c0ea3b1a9f4fba5be7221e2e9a5494e3a8374d0916681e13ec7cb581984b28b2750f5042064c6a1a0db3ecdabc619be4d222c717e110436d09641ff574d7cdb5dac188912ec393b3a17d1e9d633123f882a59f779041a779cf0f160dd7cbe5175d9b95a7fcae0ff33908ae36c488221717b70c43dc68a15e7887d5a969a66e97472aeaa35f2092bb5dbcc0295e931910d5e00473b54efc11756a8c96b1ab6eceac8a980f4455aec4e65552a29baeafa6d6cbb526e7151ab5b743b3b9451355a05683acd9cdda23eee3d3d3348493cf7358b1801ec9888eb31cade58d1e0ea65fb34527daf5a037bf2124b48ce09ef03126ed957454204e3266b60f87e4e918451b1a9575894e08671cdd3349c297166c805a5f32be1389b26cf8628c6a1acb71e0409c3a2f55830f482e7bd1766c84bf2273e3b1680f0706654c05b62cc8ee79055325bf27a38e98e4ec07a817652cb56e14cc39179cfd492a8b5d4502dcd95e3e3faba4ecba32d5a006cc799e0bf5ebc48e812898d9d07b871e2c3b18f3989bfb3619f4ffbe200679ba0c1d5bd48402b50618c003b791d49c525091679019bac39082047f70f05c94815c62a44f264d6666df4e014a9fc797fb88e292d5e315b1aa6d1d7667d63ca180e44469609903337ff74b74332905b2f7bd9864b22b83f6d97851cb39498133e28f6bd1bcb7c8fa770eae8a87b2a0c6d6c11e861a2de943e7d1b011376dba0f51f869fbc559b45412ddcb61e0fbdcd7843dc1d358cfc8431825885816110f7913e98aee7d757aee706db4f0e34376e27ef786a510be9fc45c74a8fac312c21656090aa8d31463b697717383957bbfb7d8feba6db849afa7dbe9cae57ceb80bbddd1859196fae1f5bea393d501d828c5fcfff55b2859cdc687953e4f51c6053d63665ad27d022802d075d40737830f3ea31ed1495f5ea7bbf237ef10cfd5c94aef7fbea114c6194f05681fe5eaf6f1de74b5c771a0e43af086dcf1bb84deff337d2d235922c68
Callout with two column list
View code 7c75e35af02ee5c925b508651f47825d55c170f8ea6f238546ece0a3fe589ef205ffa7918de03f94756a7504159644560b85691ac1207e5dc7095b87c51efbd8eb65272bebd6c0b95cf49cca977eeac93fc9f00b4b649e3bd0e858fc69cc2ec6ed5b0a5c74d6e4a761466fcc76161f610f838fc467384e5177713e931abf0412a91c43cd05bfbae61eaf3a43d6b1db50715e0041382c2ddd346b6a15cba5c810ebe27ada41cc721f80535a582853273b0521550e9bbae3154d8ad1f8c0ac478d9867712afe00935b862a6e060b488447cc315e4125633262c6fdd83d62ef4489eac9a471525434fcbb31e80ee1a7fb6542407394634809e9f458de5817db68106a45aae8c37c113454a7c0c4fd79da837cf2e2923ebebd857ece869be40bb2a8984d62f81fee40cb7741208adc6eb0c3371e4e7177ac1a9830898f15bf90fa4243b09712c89898a9122fbe54c4d9fe1fcf6b8ca795d3cc3fa39451227c4b73768b1bd6fd851a31d8c9ec40a655069fb707dbd3960344ae4cc08c5a8b11a4f47482d15fdebbe0f1244d1c7f6c492cd2f251ff10a4c06c609d692c6f9d1ae1fb8045b63ba62d3e3e13599c4b0252b392f3ac073a8cd699c324a47e308c51511287d5d126a9ca09175b5d03b4f72296864583df4cb9faa8227d2babd6db861f70e62aad8dcf548357b0d2230caf979e1e248e37028f083b01b1c929accde9b81fc360a345d17eed32ba42056773bf45264d1b6e84b86dbf194c549520166263c4c2a0de0722a145ccd7daccb9dbb008392d68c5f7e8166376001eede690427e87c5498ebab9f8ec965728670920b8040939213203ab39dc3ecf3662b2d331a8e2cc584528dae6060aabeba767015504af405308cba95447565fe70c9e43bcdc10ca8b3617e81e0360fd6e86d428c25402548d500204238e9fe7dfd354c01568563eb5bec416ad3f510d6b4c5dff906f4a68ca253a2eeaca5f4fa5f47ad79cb80bab4e02489cd230e8c7cf1c546c347a70732d24926d45a720b443a535557f6d3ad094a61c8baecf9db84313381ee016e89e4332e249f3a4517639ed52c8ef57125b1f1e144af3b38c3add4851f1681c9923d65906dfbd1c636a49cba8f53f17723f46e33994b258bc6020b936fbe81bc97b4f167e0800e27c619889e28db3929a075899502c514b60ba2709c6143e3dd3c93596b2cb7bad706a93fc32e093da32463a4d435818102008fdfbdb00eacd3e9a51d9ddc2537da86dbbee472d38137dcbae2d83f5c77415d1264d7d0043b7c72a15ba5f60a6fc51169a6e7a514db70fcb568ce28143ebce8534e78788511370834fc8ebe0a43dc0d265832de83686c75a3b49f04e095272468a174ae40d5600032af541a9282d539beed29dab5ab1505cc406c3e8b5c0a6c4bde5747cbd95fafbd95048364c76f963e0dd7b71bbc94f016353adac8e9c06f15c2fe8ee86ca1ebf7827e14bcd5aa9269e92b6983cf785ba2f2a61784c99437f22acd71b2c1904e43b38eaa9e5777ea0bb0caa763cdaa205940f815b184e4f2a678fa5f9d59dfedb96efcf99b06b87df6719fbfa7781039b6f0c1cdfa395b2a1a2f67ce6f55fb1e8b14fbaafdd6ab8275d61d5e30137f87949e406181f3c9e22d3aaab6f85de79a4c358b7dc74e811d65cb4b2ed79a71eeac1f7950d10ad2c5324f5093e6b34d0ee894ec88c51a5b7504648eda9e7808282d6950f74269b104164a75c1a9f0164680ce7be9ff374321fbf4ac1dde5049dfa975696f22fcc66b1e980e933173ea2563a56df35af94467cf72196c9479ebe24da972b1608ce9a69bfeaed337ca82b26b64efca76b68e4a3cd6a21f1bba0a9dbec2f60b114769d8415755f60266f7583
Collapsible
Collapsible boxed list
View code 4a5701449b00a4ff61e23bce9ae00578e2412ce69c7bef4eb8b284dce5bd714d5adaa6e09b1eb4549aa335cbd6412fc834bb2f7fd040fc8fb0a40fa59ac03c9feb33c4cdd8cfe247d490c4f61e6435ae1179f258c338cdf133237892798aed60ab72eb26dee325478c5af860e9a604f00e94e4a78daf736dbeab5c96c7c4f529b07804b6a2e2f4f12e37905c304780d4f8c15e279ec08a68ae216f5958e12ae3c32c75e7b9ca6dd423c144700dc91a5412127757a07ae07e9d6d75c001709f193c9a48dc07d2fc418c71c0367f2c249ac16ff5c60fc523a0b9516fadf3f4dd63dce50fef58250350f5d3c96fcd0cd9df5c3cbdf1a9eeb1cf257054f9db25a614a153b297244655d605ed724bf000d36d74e0d8f9462492b01f933bcceff5d21b52ba94923ab58a524ff9bf1876b7c55e60f8cf2d1ff3123d8a3b2181a960ecb050ca1a8000b884385f871a5abf4990ddc82d3a602077c645906bc41aa33721317f03c9f053822e3ebf372eb12a51b889f57d20fa2f61333ef5d9a7cf24eaf84107c0089b47c13beb9e8ab85d942b1af522648399d4e8fbbc18f60245e3ac26ff9bc514b5841012084b1d78322168fffbc9aa71c82ddffd634c2e21e753bde3fa1bdaf8a52e81c125991c3dfeb8d66938a4833917b0beeaeb975d4fbf138e7fbaa8191e3e9c817335cd23a8956609671a193419afc1fe637466b0c8e5508d70d4a94da2d23cb475cd94528c53eb32d27d5e12d7dba446d09b88944b6e231cec333aee8af122a4cce254f5148f1b16093e44915e8c28c9f259badf19352d83e2b6695d9c15707aae6b14a92deeff296a7bfadba933f82b396cbf3c8a79df6635029c6ca3c4b0d7995249d30c5e1027e2a5080e037bd134881218618df272be01a78226cb681753f51e3bb9a1ae8dd26778043fb5ad3dfefd78b4f02607c20c199de1e92f4a2b122f91922e18cf94743ebabeb258e5419c0b41905262501b1869c1f64fc0446fa123d436c30095e382b44373f4d00c49fc86752e0239b7cfcb1fe42f5aa953e64dff112d7666389842f35eb2a01438c09116f2fd3c0366a546e441a9f824b6a2b7ca4d5616a8af6d477f39b3c2481d8005b6a29f5cf364da2ddf83e596c0a889d4ba0afcefbbd344a42c740a6a5068b461ec52dc8dd86dceefb164f99ed984d7f118395ee40734ecca32649dad05558d8f5a59348be494b5abdadf208bd6dec0df92538e5073613447d1f15f8d140466089de004535731ebd9dfd1a034785af830a71c4a4e27690a065ffc60e778bbc543fda2c1be613a4544e1cf006c4965e3949645294530bdad193391588bb50af1016475add3b0fa3dc5ff8e06f46803b526eabe2e93f43d56f6f8b38f6c9500a56c513b708ad4a63879054b5123c2af327b0f61bda371e87c6679e8fff06db3d39c41abdf8694be849deb624707d5cf00e27c3a9eb7e2dfc823bf860dedb99166177256efc9e28d7e2adb1bbacd416ccdb2d14a578495e6302e6ec5e2bdc10739f60e9acc41169f1b6b794e5a468b347812e52b6529b10831b9703514f0a09016c8a9b54469b4a41e3b6ddcb27ab778a52f15a904b78cd8b7180860d01de75ec1b5922f6216873f814e4764788b5cce409b583d10467dccf5694529dc3dfe3f61585fa1ffd35084789fe344ab865582e26d0e76e53eb6c6f341f3357032898ac594b1bd3f1b9bc19243f83a6911562b7d4378311b9e21f04de5bdeae112cd891c40e5313bec3d48a2fc00aa267108b870bbec07b76a0c6e32b44382076fcb325a9c9549f4b7b1633a55835e1fc0fa98fe4fa6929351e40b3c2a9459e7d04fb900faf339621803d5aba83e5a6e8b6a62843b723bef96a0ae8296c26cf75469e22a4cf4330eee7113b48937e56494639616fc31bb6552c7160a2271a2689a55701a13b42dcf598e46c8ff75fdae69fdce9bd6c083a41f06c208967f9005220040aa79d4875f44bd2324802ba64cf626cf09f585929219019d09881acb97bd325a0715e39b7f1758c4f0e057fc20a4428c7c386c92d9a6ae8861f1744043d265ef023f916eb1286dcccf223f2213b1ad0d18c4a60ab2c49bdba2a65dc8cb92512a4ffdc9b5cf1a05d976436520cc944b27dcb0734436db0aa7c642756d22919563b9b23aec00d3b52078d3920acd51b5e21b70cb8a131573fd1e232ae916b234f123f284c7d0ec35ef2fde74a702c4c10186ecddb96c77f9612ab8a70d470403cb9daa32d0aa7a1d4d649460115cd438b1b269ecb44ec4c22fafe8a3a86e6d686d9352c054df148df1eb01e7a04e73f853eb54a02f87033de5fcbd205e7986f7181eaa28738b70d7e3bcf07ec117cdef79a44f60028fb66d26bb055cf0b641680824271e23ab4587ecc129e66a20f72856321a88c46b719bfa04cb1e63671be81c5bca66db953539ca8e5085151da572f5af0ef8d0d27b35b6c8260541dbc95f8e06b7b51c14d1e0a16f154ac1a7510075ca569b45af401bf69997cbe14e7487a6d6b3abed8ea78cf082f3fdd805ebd926ac203653f0482445cdd961b156ed5dad7d0369d188eebbe5a39da455ba9fa204e7af3b47edd9e162b221c0f6e08e01ed40fc4550b980b66f8f4fdf265968203226a048901c30d0a200803509396206cf35898074d8eeebd95c6a7fcb6e603e930747bb79688bd2fafc90365b67151bd095cd89c1ed2c1129ab72607098c20fe8edef32035d60fa9e05dbead698ac1592c9aaf60a1165fe95de6f89619463d316287c2f300c641f726611ca96500e04b1a6d66dfbff64cd5633f065768dab6291c63288b1b63684538ceb23ed1f2a8576108ab012ed0f16b60612b0e83a95b62ad4ee00280947f0b72f05d881b65122d54761b98bcad6d4e51b19ec07134922065434e58f49ce408d3d5b88db0ba3f5f906b6f57419fd8b8bdecd5b7c430b9826014bfbdb1c5d5ffad78854b08349b49e943d33474129197ed4e3741e025fefa9dc4e89db2406bfeabbf40a3a1da96278b691e0b9461f36a3c88010fcccd80b004b15e1c5f6be76a0d2e19d2c1a71c3c6ea64845dd705d18b808ccbe67f244334bc3dddb3c9b1c23ad3fa54261087607a5f48b8db945ca47ba9bbc80e42a8e7efa170e26e558bd03f5933ce10f83f5a533aa9b7d21ca8465c6fdac878e2f1bad05da05885c1badb20e5d4a87f00932e818994d7874034e777f410404c9a2113af4a2fa417b39a2ca9654d5fbd271a27911e017d5e3b7120297c45303a191da4df5f18214c9b4f34df02d5e9226f4688cbe7183ec4c49dc2e61bdaf6f123ef5d6febe949a2c2fa9552c1d3eeb392318605d960c190fea6da8d462f267f
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 ee0320472a893b8935c8dbb417368c9a0f1d8a891b4bcc74531bf7b6bffe65376eaca4bb6f3fa78c06475717e4e19e4941ed62c71bababd6090ce4f8addbaf0da1c6b7efb97d5fd495a428cbe65ac620b7d76088eca6dc50cb78874295590e246cd254faf4c4203a631791317a36f615a6339271a98e00ceed8f158738f8213491c5625536a1c7efa423066cc947e9d2f5f1798bd6ef74c5d1143bc58f16f6ab65563fa344c1c7996facd5d2a744871d19cc7abbf639821244d90405c4098b383114207292864a841f0a29b214ed226e5d99bba65b8f8244c90372639d0ff727e11d6c29fc03746103de7c013da931cc6a8eeab1bdac2db29efe4cb8dd2005447da85c814abc646866a9b3ab134019f260a895a6ce78051fce73ded6da30cc25a45f12979989e4b55c6bfdee7a774e018b4aedeb18b5726c77f563d9d1ff1971672616e4067948319afcc49e87641014b7458e9ed0501c997f426c8869df5b9db64a80d95344b0ea9960d715511f8178c936b70a76c1f60d54917621aa1619034eac4518d504c6da3c3f6037937d519e4304be0f221f69beb0635fa7aa9a0ac16a3a9c53b2cb2034caf3718706bc20f99a3e7f01b3c28c2bcfa7e8786b5ce4bcfc482930d84e4bab9b82bc80ad914886ad9626cd2eb22e818a68ad714b6f036963ed4ab0c49f5e7fc14b1df26ecb1bdd0106bcbff3406dd015b418c4edb3427948ea7a5cf8830fba7a817eee4fe28ccf01688cf3a61511f0bc73b67cf21b9dfb15bd427461a1ff921e82940501fe0a67167f870e70dfe5470b56d83ef470b5d15a25d11ece802700b2bd50e1e82407ff837fc40cf3d41a61341281b57724dab7d113835bcfa1c3e2af2e5f4742511b4c0b8c5998b1b5df5e6d58f9a06ca9aed08a3d604dc1e5ef507a54b45d2a5664666f5c31df27d32448bdd6166e924f295a4f209c080c1bcf9cef6a867d47c7d7491638f80f015387b6fcab848a53d4d5c54fcea1203f6be85d657a38c4a889725520fde843851bfc85406e02b89c7904c9245b7b5e26cee7624a261d9b85595dbf4655f921f601dbca2b53f6f40cb8f5edb6ceee937572e7b0b69f2658c8b3a58ea1c9fc5eb291d3b1cb9751eeb10d7d753ed9f25a8c2b7bd99a16a755fc056fdfa20803d9789adbc5e92df25e42971bec38cddb7f73a1a636b951a16e942b2d4ef61f09dfa4586a9a5e1d1a3d709ac03c26539736d879a995a148b4d71554abd08625c1bd66f96c0e3cd2bb58acd16662c53c60eb639124374c37d0e0d15fec1f4fdcd2036b50c429373792675b7fbc4319a2f5f91eeb164f69f15bc32a15f5dd77d3df363792e33e197fc5568d14c015d19a26c9598c4b2f43433cfdb70949b9a270ce20e59e55b912336e6e62052908d5e6b348c8201845d29ab45b3898fd265aa44192e2b5d5a06cfe4b3bc4f78f84935aab53d58970619e75ffa2fd74c147bf9ded8217d3e50f3c8b6f44e1708e4165d2178abb8b6cf95a1970a04866ef5a47c433ffb8deea850d4067e56aff24f52a711f0e97b830ee2209cf75d270ad11e0f717f64cef4ab17e2f0a031b1ac0b45dd8a7da18dcef01e8050e7d63100aa226fda08bb6145e6a049615b95df287b6eab26ae80f875bc79521f749f2f0d9a71ae6b10d05a78d6c4fb11b9c45e79a986f979c26157e57bf5da7d6c0c359bf883f84097bbd39c585b5786e871df759df7599fcdcd78211b02fcee1be527e050847f22a57798974bf308a511f3fbaaa4d0f99dfaa95bf598666c1d991759b0fb09c2e50296aca6ea3b7c4af91744306461da9fb0f5b06cc35bdde27d4b7fde73f5c513f675ff2d5c73f07c6f908ad33fc16e9c093339d34ae2edae422b0b493c7edafc70699af7ba29a08f3d0fcbb0bb648e119a83251aabd6c29cfe1e5f96a87ab5424b896084963e9250c2cfb113cae8393fb77af0412144c442ca5d5de23b7824041814e42aa624ae2fab709b028fd1716889952830e81046a8ea2ca0f621b07c406aee579e966fc6c7beb9b3b5a17
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.
