Simple lists
The following patterns represent simple vertical navigation list styles that you can use to present categories, sections, articles or other help center objects.
Bold when active
View code 8b016475ee1504bd9b3ba2ec8f8cfb436841e19ecea113ba5918b4c1a6637a1f2da86e5dc1726d1715a9bde34c26b30a73fc42e6858269a9c55efec6822e496dd1ceebdd00df74a5c19432c884a894d21bd72a180b4027900196234b111d0226622e787f5e8d225f8e809c78112895c713250c3d7237dc3b22d226caba24ecd59c951ae036d2e00b5f297eadf9fa7583fca4976259b3da7ba15dbcb29666c0e01b54f80bd65eb7adf3006124fabb555ac57244434856b90d7ceaa89699c1b70397024a714fb9794e2f34d3d6202a00713204e414b1544570a257a06303c49570e2ae915990d9e6935a049cdd0653f2920a3a2ecb61df27c56e7397da51a15ebd9ae9fcfb61693a7c7300ce68b4fa424c1fb0d4c370ad7e6f2eaf046d5467e8e5640a2af81c06ab3b842d7689095ce78a058b76c6cf5c6a603874307cc49d1594f1d8a6092ec7b3d55bc6ef5d0c0a6d003d1e558166d4e8b02ab41802715c9b36bac012a73ca044fc536c94375e4e5d5abbdbcfbfef84f1850f45af5e3a5aac5560d23db78db79be0d87321d5e1275748076b70f87ccefdb9e018b35cd4e0729c972d9fbd986cd3bbaf21273022d934dec1caa6a4bdcdcb6c4f6c83852d55c95cdccb531dddcdd88de1898716efc6ebbda142474c41fe4ea4a5d6aeebeee18b1c971c029e2b3b194b7b6bd2ca9bbe3e9b541b5efbaf061707e6d0ebcf4bba4549074af88dc34353a2ceaa98e28f4660f12250e46bf1eb5ece4cbd2bfe297ed147f297bbfc803aacee3571e3e5715e0a07f851184d205f40d27b41b4c28de69b0095256aad720f49b998d6b282670cfd37eda7caf98adf652c19d896e7bca396d91f30c9e3b6c81e223b31168ee9f7cdb73ce9b63f312d03b6a409fe657232597630672a6f17ac8bba4112c008540309cd6f201ad263dfbdcf79882b1ac0aef4ce5b303d36711673c75ccb24b866f2b8b3dabfda314e4b8e938c749f373dbe8c19fefe429c69b9069409813dbe8c2d401fd1658a43674cd98b8cd8f68c39c2a5d87e6507e6d27d8edb3a4197027fb481f8c77d4eca7b3ee9bfdfe32f4118a0dfd10eabd4a44c6566cd4d4cce904e694a3f908e4748d1272e455caba4ec989ebbaa
Other styles can be applied using utilities. For example, use text-primary to apply the primary color to active items.
Rounded background highlight when active
View code 640d37ec85a7a040b4e41d6455afc60d9a9dc0e914d64c506ec5563be26b58cfca1414a85626a5001dba2011f968e586d4e40c890ec03d671afe65b62be100bb674be2ab3bc8e8d76246e11954734abbe76d6abcf6368224cece1051db7c38ec556888342808eca3dfec71348d00d1e644a33b4d08bc8e6bfb09428f9308c8e71d85f89c0abd1b963473879bb47214749fdf12f44961040457762a92ba0b892d2a6d10fc3368ac1e7070b460379fa1f7055570fa4ce7edb8aa5b54f07f424a099cc63fd48769f6947c1cad335badcc3b61605a3ec129701c719a8db32f13e8008fdfcebc94a8bf029f8de464f769935204cb60444a56f42a33dd129e11ca33bd6b59bd6571b5a6ffc2417f0d6c394cf90f7650fc617a2cfa360ee051714134fba7f538cf8fdc10cf668c58e14e9e7c9d24e47b3ed4a9c75d6f86288cae8d69f9f346915b389ddeaaf8a78df3536b1c6fd939a5312e2cc43308782cb0eef05e44bafaa39a84297460fb5083d7893112ce4d219175795adaa554dc8ea4eb6a79da76da1dca9d0d9b579d85754f630cedae762cff1385c2311d05d0da216af5655b3425d0afc805221d26f94f64ef0fe98c93db6e005189be3c600af9c809e056d6cc1e5932eb82bad7f7e7e80899a43fa2bc3b9d9a7ea476e8c3b2f711d0ac554df421e1c62e3a06f3d061cbeb5c2c87d52e877c9912b7ad670e8de9529e405c982a31598e92686081ebb677a9447d3e3bd6ea338528a7733ba3882b39578b68d541a54c0529488d0dc20944cd938ffc899fd40db5d262e48ce0f4a3336c831aeea200ce8c968ab52da70eba47ed6af8d56bc4419e8fe1bcb114c95abe6f57de18a8d0ef52faeff099c49785f8e5a502632cf395e8eeb5f885d901bc45f2263c3092aeb465e9b474a18af4a3187a037a786e92ff0dda506799682587c13ac36f3a95ddbc5b6e151cb0ae0548ee2f044d2feb2bc52c0bc6e67d25bc566bbdf7d7ac4e245220ad2d8c7b235442d5f72f7064e2e15d3e5fd413b7eb3f9d76e2419ff178a6040c716af4ba69b5d440f64726dfc787d6c71d84ebcbc9a6eb924882cd4d0241c4b10b7d4d9700cefa7c2d50af29f1c82c927dafc8c5353c388642c561637a81cf4e885a1e15b66981a396bd4573
Pill-style when active
View code 0e631f9b57b4563aa56a5b970baff1c5ef8bf99a03133b590cd786546a95fc664f011d57ed0558f3d72144f9501c61c9953ebd12b7a2b0eac9af915600601d271371ff16ac51da63cd7be4bdad043b26c8f2159585a2a57f79843ad345c4b8dc78e00a677b72cbecfb8ad74f39e92736d971571e0d47c68d3c7b128c550a77888779041ad64086ef519043c3de2b4d9ce286f548ce7d9b9d687db82a1ec4fe06e20ded8b1dad20b9d19a2a93e098e38d43288c8ecb9ee49be7cd65e196d5a82c11543558b1b3ed26a29f638b9efa53248fad21443d95687be80bd1d174e6e90e3273db2b79d90071d69b15fe665a48b914f0d67ff7724a87c81ea8aea47803f5a37578c71d6f8f325ee6ca9ae97eb959cb8690a73d19a09de37785258a36f16e3b50eeee525b66e7832b17469df63acfecb0a9cbd5f11549c21ef3ccfcc7a99d9d41c22ff4eb43a5ab5ee0d2c953883575fbe02a598419cdda354308b3686866cecbea8ed8d602e6d46de6b4e824b763e3016c6cc96ab918e0f8f3ed568fe152f7fcc004b5dfa0c74ce0af6dd70472059e2cc6d0f01df58d50f358a99a74481020d36072e8dad24ab661558db81bc01fd01421cea63508949cc82a778f34ec4f839b1c0aa97bf14918ca7b456ff7a77253054b91a0903a9878b92db052758ca01abae484fa1f781ca0f1de23b3f9eba3cb8da5c9a5e324947a7610ccc336473cb825ba48a738f5102e4755d53f3e6e91d6cd52932e2c913f1636a833c36e590c8a5778401ff25f869863d39fcfaad71a6ced9ea3190f2b4d36625fe632b0304fb98da3f194c9ea65d12c1e37e58a32c4416d0cc684bc3efabf5b077c2649fd4f9f9fada5e1197557548ded6deda6594a3f2181cf3d76681a14cd72f0fd46f352f6f8b4728db0b455257648af082075b82a425fdf382872e4595a7afb0055c5c09a85e184a964ceea2261b1c8935ee9966e7c55b0f3b287b3035e688c40a9b39d8feab2d49083b1c93186f3d4ad3fdaad50ed0a4934c1a6797199661dc5c8ea5c7e4f7122f194c58c29a2cf447182ecd7661e6acc9000616269df4628e14cb36491bbdc18798cd470f26c1aa8c2c2acc5886d68e43082ce8df5f74a93e3e41522c6d4dda216335ed2d2d5a587293ef592
Use .bg-primary and .text-primary-inverse on active items for a pill-style navigation.
Background highlight when active
View code 340cf58673deb45bdff3bf7100d1d1b7bb5fce2c7af527f0a28d575991d9cd38fb49f3ffcd6da3424063d9107495dacc8edcddccab54a342c70ee2da237c962fb2cd75e7cfc2cd318b04c9fa870640bbcd61a1ca481db69219179fff01dfe1c604876817d664a4c4308209779b4da31f5ef5f5f101001449246f87a66cfd23146a79ebb9d6d1bddc659b7a4e499a87d06250812eb5d610a1f294653c57e11e81b4d461c20d9698aa2af6c1c10f828475588be02f7475a62999574ec917f46de06119c1f24fd81a88e37c63f6d78736198bd469a62df6cc970e3946ed0e28ad3bff69218895f2d32b1b3ae2da4ff34e2330ce8c6d962d7dddfa72ec9579260f53ea3260205a8b9d8cad09ed771378e1ba13aef0d38de0eefe7cdfd9c0d0e7e995d5553a03f77090a50e4c57b2afe4236a3917248700afd1755b138350a74234581cfec6e848d154f21046405c226479e4412653fd134d0644a4086a27a76667c022d04555fb82f29b80b2517d47daa048cd64902d3090a09840d0acd47f0e3c293543153526941f66f0ef5226678166aa240f2f7e3cf620952a30b97488ebead5b2002857e48dc1a1059d8f41ebd3cde91c11fc6a9fd3a15e10b7b90a6a0be9cd7ec2478074873b063065369457d3b42f5d23bb96465914a9b47b5637afa700ee4ad4353b4c5b6ac6ac82e070f9da6e9d10f2203d316278903471269bc280f1f3016bd7e0f1abf3d1b218b3baa70600c3d251a06ff7eea2570db26bb158453e95cef75a6f4e7fd9798cdad1fa4d5ef1952c56d85df1013bf5cf15228388eb766fc90fa1d44507fac4c9ba3e9344c9ef7435c1664c59ba2dab3e471ecb5ada8a60be389b21c958a0c28f0b155c5cac00862562b9fe0250d61b10a46c097715ae88161b42332c17f71a5a23d329c06f7fdcd89ea99ebce230a50e7905457a8f854c9c074172fcd33f37f9fbfafdade07fd776259a39c107c187efb919797c8de453a990d0e7b1da7b633491d9030fe312b998bbfbeb75b67be34f5329dca2870f43d55976be2ddbf2adca509c1688c5cbee43384384c80f2ba256b8ecd69305c790e36898acc088471697acfcdd1f2568c7a072cd847cefd7fa8e615638873a831ede12e45b65f1f208231b821a44ca2b0753cccf90c22e9d506cfc76de06b39b6c
Background highlight with left border when active
View code b4d1dca0d32d5344294e1aa6a9262e011f82697c6f6a2d6efd36a003da961adb9afe3cc86d31f9969cb903c45e322b9a77e0cf88b2ee08caed67675fe780d49b98b53ebadc1575335cdd65bb9e02c11550250128d8186bac9ec2c2be2f497abd6ee68f772b59494eba9c955776fc9bd5c3f61ffe146ccd6f99d71c14ad530145c122b7cea094850b653b7d349027fc2d1c3f2d671b3b8162fd1526b45954f75b35b74c557c767cc00d289a924369cdec7c63b140ce79741580204910c9882a46a1b1ae9418920af182c3e79eb6b888574bacec2822fa9f9d294c4e937f45f0475e0764f2298f3d82629e0b570c4794bb6e73a2a32fc284e8ca1b8844312574b88963c1f1260547b0d22e461ecdaa0dd5386477de1aaa0c27e619ff3b8db9507579936e189d21fd6fd18ddeaace02d4798333e55c3af9e04b80340e9662314f6b93b5b2c379afa212f58f66cf1f569c95e1571bb69a7ddb7cd4c86d8ca33f0c878180b7919ad2f089294ecdbefddb11f1c4a273c9354224e87ae49b663e44187c089d75fa753228387f40bc25f9f381b928d48cbc5e973e15d181dd43de893526bb07f0724279e554e6aa7aab02ea095fc351be4babee907fef18af19a56ef18d845c755c83b454ba0257a42c4581012737855036d23551d750e512e52ff784581b014b9435b8eea2d3c363d2228d163d36087a9a469960d194ad150f19571b7b47656fe70eb9c609628f9be40895571c28f290837be6570a4ce5faaec6fccaa5596b522ef082040ca3e306a4ea48ac22f750e901c99c7d0ae8a1d70166d3701a74763e2b81839d44917c01c3c2974f450276cb049656de1dc4eac0ffda95dfcc5ef93f910cb34bec09a552663b97b6474d6957d82c8f263a2c26cd5fb37555f8b18abb1f2581eca649ae6139c43d9a0e5e1077d1d6ebacde20a236bfa3eb291a4a4ec4eb5eacbc7ef070b0a0405e780996e8b981cbf472349a94282064ec2b4eeff09d363ec7a5e594e2f2414da2144d593f6c4725d63c0a7f9ee29a522a174483c782447814faa152fcfc11d372e2699321380905a7da88bbccb1bf10474251da24a6a2a5025862c7f5c8ac8ce7ea5b00a47d0bb03f6e5d30d21c14874eaae15f4c4024042748feb324fb997420b45ad2d7827a3de0ca78b3de31c421311a8d
Primary background highlight with right border when active
View code 5214b0767fc9acd338919eae205ce79ab38d2cf9860bced42e734f2f2a26879a6492a89e53a10c04b75e451d4deb3799bd0f206a971e66abec453c2db71c393ff739075488578f7c3ecd77483ab6486272de068e40c97ed6ccf91755c2ea64e2bc8314496a2bdf3af1a8b6f235909afbfeb871365b40a02880144182ee16033877f16c57b76173c679a3b1922652eae7639b28b0dbbad882be10f87a78a255b1bad4f67e208d67700ea4fe521d1b9b1b63285f58a18104e01f33343143dfed7081f92fdbf55f0fc04084f27814a10950ab258853ae1203245317370699c350ff290740daeaf97bfdb189d6c2211112e548192fcaea6b808637b951a71cf7a4e693d5442df6bc68d9b399b9a1c1ef95100c2a15bfdaa3dee6ccf8ba984efbe6c2cf2dd7b22652ac7215cc2d57d148e4f79cc3fe53f91fbdd77dbe95d10752e7330616fa7332c6ee892a38b0af52074f84c21e2e472c53128daf09df102074df0e6ffdd28be7f3597226051333bb00aa33e7ed9782a0afa927262317c4952544213617840a591e974c572a1977075961936cc84883dac13346304acd117a8390611dbb75f9d8240e1a930ab7f7fd934dc4a7416ed2646e20613bde7a9c70f5830d9fdc1c41839c0de5014e4d03f654d00f787421c273a2f25f3d53571e8ab17d903ebdd684381f318fb037871ff1a4598127f7704ce8b9cdbb31b992e0cf666571fab3d6c28d8736ef7e12b074f335130f06fba6b665d9df43186ac0b05fb4545fa4d6194ca67a26279a202afe8394b94e2e365d3c8cfd160c00e8e917163ac7af62882c9c660f5e8a432e8b89a2d073c86902b832f73246fc09028b8320c4e3682cfa93b8e81db840de17095aa7fc966bea68dc2329b84d8694503134fbce3125c8970664b1a9c9a7eb234b866311e7c67e9e34bd7424a14c9d11bffbb2a53a79ea2fd83093048e48e775df766df263ce718db70df97ae5d46a59c7731c504cab7ac505c6b5659bd8566435cdc85e9fda257b68464a906805b548371ce3d9df989252d3691b45dd7e89693e0ec2624637e6a7a2a58db9ac993aa75ec17586c9708e3383f4a00e04a6c93d44a5b5aea623097dbc209307d1d89d82b6c990526d55facb23d09e50eb2a285553ad4cf2071f06dd6d67758e6f19401e472a71672cfeedafd4d44d6750602801b7f933587fabd467a89281c83d9508a495505815abced8fde6618d67f7916547df332bb930a1ec0f2fc56daaffce761b8f67634250bcc54fe193a2eb4e188922b199b77ce1d773e4c2b0f02ed852a5129051536af79fe35ddb67e4151d1e9671d8f5d71cb2923718d9865f1576c7ad732882bd89e782267117a81267ba3d6d4c7f489d6c234ddacefe677cd92a103e7922e6a2511c39a783a3a28607f1f4448017d227b6dfccd4f1f533dac29ba309a4202e6a7f7b426fcaf318fa532a5c0b36fe87ec0be8dc6b28418524563ca56cf048e882bb6af977ecc3b27deb4cdaa40f7058fb2be21c29466ee74cdb369eb70e9c564ad548ba8d92bb044a3428d1218238ee1fe6ff432f294bdda956ab79749803d568622a08510017a482e814b63b48c1b23844159f0913ca0ce309f8953fc6026fa109b6cf
These list styles can be used within a sidebar, against the background of the page or within other elements like cards.
Pill-style directly on background
View code 6cc0acb39242fcdd4283502777ef8e3623dd8c9c2c1025b3403e380c4378ff44ff05a64d61eec03d15b53645ad65c109d3eca3e58a53b244fe6ac8635ef23cdd978cfee5e308dd5fd8666e3593def71c672cdf9b1fd9b9f1c8127ebf399d9084d689a41f515f56954d71c69cb0c329beab004f444a2a8e4e48fd9e4e52f67b071946dd579a10d6cc9b0789b96e262bc405e8c9c4f4b4ec625a55762cfcf472a8b7315e888d51c6ce9a17fdfc5ea939756f2349d50aeeb124a998b283341860ca961b2db10be26b146128d0bcadd32f075c66eb79380d97cf95e23b38208c1c1bfeb7159f513a4e79c69f3889fa997176199cbed866fe66943948cf7378fefcf2baffc7c95268528e8ffb295ba07f7dd26c1a593b7fb41f7df45d0e1f18cfa28231283b18e1a048a1938f4ff9f90e17e7e7fbc33145deaf7fd2c46dc212cfb4d909dceb09e7d60c9eeb687ea7af8f577b507829f6d809f1cbb0b659d298abf5587191bbbf632fcb461943ac419a5c3d047df6036c7e06209b167592836cc81336d1fe6807769c44df6ef89b5dd412023e7c2b8a52f2feb2ddd2e73f71035b5679b80de59ddb272327bad6c516815d8c7bd04804e851185d0b2907c41a2ab1e9fb8aa2aab71e5b52d237f04507578f54ca87c3806c8d3dd36dcb502e456075b08eb1f336a1e2f4b63973ddf90edd9b1ba92502923617266c29234b3832dc724558a93a6ca78e3a701da1ca9aef71bff082732fac496dcc4687264fde221bdc2edfd9a445d85f2f6f03e8cdb8d5f1ac8e36d865732e306ea3629bd3e37a98ac9e894e915121ea11ce5a57ab92c05bdabffcecfb02bc60380c1c88690568ed65c51d7217d3173bcae77869f74c1b3c06fe7d82150d99c54f01ec0058be22059fd3ef828aa9ac1a2b41bc53cfd7e8766238110231fcde3a6a81517e2030f288780906c47eb4270188359a4be0285762cbdadb488b1cb62ce16944f4fd90d4192c44219bb05b97c726bb6a83086ca57c28af5691b39faf9303ca1820cb1219ed420620bcec5b6edcc0e465a3633b43f5b372d233c637ecac7b409676877ae095de654e1f3d6b087fdf970798b67d7b1d64841f86d48ccf8ff53c729be784359256a8b1855d8bc0dd5de5cfc92972b9f7bce3f0
Background highlight when active within card
View code f5512edb50db7d75bfcc792d525cca9e18914dd17c245be30208edda798a1b5fb58fcc28a9c9395bd95bed67a723bf6046b3af2b52994767c05efcd776109612461cffb064d550f35fc5c095fd8c3ae520c952cbd3cedc1d71301dd8fe2069721f24265ea8a092e25e20d0abe16978384c1917670f8fb82f7f1dd0b769152b69982270702bbb16c828cb038ac8be6d71e00232c96fe70044f30016af881631e71d67d94ffab7b627d1f2b4c9d16bf318f18f71e7104a968fd12ef63016ecd3042978e50cfa7364c42f0da668ebe837c41a6c7954a868d67d17ae6ec7017f167eb60cec0583fea979722761a79e52ed4f0eadc5876ceb5dbb579be5cea2e27c34e71cad70d5f8c7bc89e67dbf5b58298989e7c858f654a752c12a6fc274ac3326ff7aaa36dfce3542108a43f1108ed89f703fe67aa61e345c651bfa77a230a4606fbfa8dfb2d8c3db0085891aff5b726dfa3f1f1ea174f672b9afb669f3b6ae85acc26598eecf1f1f0c736c9995ed95091f9ef97795dcf3cf4e85640010fcd182737402a8e0cf8b809594f8f0d5791374982135d75616d7ec6a53d2a65d063b3775aef36812f062ce1976efecb8994af4cf6d691c4997cebbd93c9931305ec2c89153b1beeb13b90e057168c30464b1fa9dccd33b9462e181d2818b24ff579292e3fe1dbf9dd342fc75ac6f0b14e8c429bf264b898999e92ac748ceeae7b2122f8e3eb4d4f391088d727e864d55066bec316ae67fda22e9c314cf173e1abb4aa2a5d3bf636355cbc4c0bf8ba16f27f07bac761f892d255e5fd9c6aa30fc8a37a07a6095dcec4ff9170b33c9bed913abfd0fd77e7f29b337dae5a52fcb53b1dd405796445226e48b59a8f852e25a84d2382ed2581bb1ff85af924efe9d516c5b9d1b31ea010166fd1949bc50523bf0fff91091c19a74be0cdf683e2ee288c577a4dfd0ff4fa083e28699789402fc22e240fa47c3504bbdd54502e036465d2142bbbb2037d8fe607606c4058f267394d710b00cb7bd0c0feffea82a02e0105a59eb2e41252a198ccd2a14f9130876de248e9a852cff078bdc860724eab88d9c7242cb509774f30f894c74d41939b5060dd44eae144b9778486e994e4ab9e3d9979cedb9fa230716c1b37842503dc20f5127
Multi-level and interactive lists
Sections displayed with category headings
View code 975cb26e04ebbf7a922535ac9877a1b1d01bf774fec8e8960944fd426f32dd929c2cb96ba678224a8248a86707726e4cbb1ecc275a03a41631a1b2cc6fce28dd9444ab13c352d71a765d475a85a71110a8adc8179959f8c0a9adbd82b2838994b561e868e9d2a1c6c7edbb9a955ac77bf1d69fdb320ea71e71a7fe3c68656b9314199248151f2949702962eedff8f5c22aadd8570553b55b5f778ef89ca4cebda55efa1438f2a7681c204cdd06ca634f95f04abdb4d0fd06aa67c55cb59527af11f977c94215c1d5f0277d3ec8539279325e6b5f23469bd2cd6f79c9c1552a6514e34c82aeb9122e86db7f224177eb5101a17bd62d22ad5e857a10d9a8783e194f4554e315e5f6e7ce84855abb064b7d24e9d81c56a99d686dbd26f0dd5d1c6bff8d3c8c6962bf28d5af4b0cb4238902a3db10451dfb765add7e75b78895a50cb78fb56208d57097d1980788b9dafe37027e84f7a254ee0496d6526fa511faefc96913794be70813eb9eaf3f9fbf2895612028416f30a0206a385b13a508de5df96c850a867ee9d9cf1feb6a221670c182d15299e8e165ab33fe46320957bae8a72aab1d181f0458a8b47a16dad1679efd2996dab7e25ac56dc786e5ede0099b017dfcc2ec25de4400683fbbc149553bd6fabb1274a63f592c34947e1acadb0fba4849d79688120245a458fcd3d0b080b2684643a73ccbf00d5ac72fd5618b340ffe4469cce610812ce39d6f3b595a0b7f31e726ae1a7a6a20ce255178e3f6432d55a5f9747e88c5e055d5ca381182eb0cb62e4666cd561791dddc45e6ccabd2d91760cb9a94bf7b60cb1f63764ba151aece2e6e7b5e91591badfad4d9f61fe95a937020c0605a0b7d9b89be58e43720a4efc97dde7ffeacb7eb1b38e1a6a2199dd6a98d50f74aac9414386939b4b54ec2202a01be688ba17d9ad099c79e4c2ba89aae7a10cb8367d56aea79aa6d2d9e1f35ba6ca965a59241096be213f9700bdd60fe82bbb446bd4c2bd53a2dda49ba82ece323a84f1d793909a32d3731bd9bf7161632c869947601eb1a730b6caab41ce7f2d4b9080ddaf86a4ff0d61f66bd027a34bde4f2421fd81dfde5538be8670d21d0b3ef2286b7ab2eacb4464b0f9b1305eff7031e08eb2dab02534442c367c5c8fe1571b95779a54027d53a2d57905e52c0ca4b92fea5e2908b3e5d4a32ae452849ea3998122ae60d3eb9798536114e985dc3f6dfb25a4bbb78752c459acbe497350014464663f2788ec8c35f55bcfcbbfb1b4fe97789aadc0208c55d16ede087374c86d6c54336ded4bc9a56d1f25e4b4ce30a36f2c59e37e4ef5421d03fec3c227f102dce1ae1cfb68da2c4d3617207dde3aae2be24e4eca72184802f04b59696a1cc0c167937afae8384e36cfd4c6f549fa6627339f83e21bc9b9b2eb4267eb6e40b3c7f037dd08ec41518a4070e2a655648a9c2cff73587f9d89e05d53d0821473575b3d96b018ab1bbd647a783e3e34a711833c13b4db41f83ab0b33bb5b694a7b70bf269c25e30fea775e27e44f8dac67603ec8305ff222b396a56692b9529b87261728e35b33e205071cbf0006258bc6979d9c6b9c6e36498c090fcc986aa91f37ee76ebb60ad677ed00bf54c37ee4df1ecee1e2572af605647d5abcb942b2be0fdadbe1bef92b0fa3df9c770ebb5b79b3a0730e2971ce1713d361db4e2eaacd1edfbd8028d5b5533439868177318f86ab078c61c836333dbadac28270afe5f76201d45533cd198c4eeec80ef01ad7264e33d9b1ce555b38019b6aca7e49eae9db9b209bbcbc1fd0c28de73d59ee4d18dc18f7da4f2bc72d3f33a628948a55cc4d0d82fcaa2e8f8a235e987b5a75d4cfd9113be47c678585ec12c744541d978762b48d413986b42a569bbbbd76325be3ebe0f84a4bc640ffc95efa95ea424e285e715ea0f4f386363a74027c4b93e991a8ee322ea52077a3ab8a591de4e00de5a9bae44867ee3b09e9efc1a4daa06ac3aec35643c0de18f725a90b
Responsive category list
View code 17b52144e3b7e4d816487dc6a5ffbedc2859733a421aa392612bb02208de7462a9a6d141e09881fd7e8ba38324ad981daf9e2edfff8863092e96ea3e6b15b4d13011e61fe8b945348dd0caab327a2ff92901b4c918590fc3e390dbf46f8f8bd82d83e7a7cd702563b37e1a70576b2ace8e4ab4cec228d87612f02e484cbd7460a7b0d3cd82c5144d2ded8b2aa47810c4e5678baefc9aeba61f8927a54e89938e81585487265a1d82fea1c17b88e3f31b9dcd0dd7248590cfb71f551ac1c39339357a248c5aa2d392ad9c86de700c803399baf4ce9362b407b1c2409547b0fd8ee7ff78acfa658186a19d2da27f7b4d4171e307899b80ef3e90c0a19141363ac93c49e08a62c15ddcde852a02cc41c64e4fb35c091efb4ee0861b4dbb83ab55b12c8cdafa203ef2e63320871cd5d303b84c71c2845509b9113f1a436b5d65361e4129e14a4c3111a03d3945881123e5677caa4deb13983ba57aca03994a7e107b1646c2f270f5c9d75795f82f7aea98c6f24b5161ff647c81f956fe515cbbaa5c009772bdcc8f328400eb6d2311614828dfe71d2e557d51a261a60f40f7df516dda9e9632bccf618f7857355073d439b132709d33696d85af65b4db5ba87da6a1c9ed0517842a54478b71d410d4f27d640f824f3025339b7785c714603b253fef053b14b985cdb5c4501fcd02aff681632bf7670fc0858204a7b75958576e2499806e0cd2dff4cba229c6db7b2b6e447e538f5479d679915f28429ebeff20cab30db6dfacf5457c144fd302a4a72da16365b7c47cf70ef8f9ac615f12e94e55761b8dec55ca8a19ef693908906b9d98832848a67d269b968af0e3fb6a3fb3e33b96c63a1abb50a2a7e1b31d45546aca984d3a15c261d36b70e4483e24b20b421d3593688e9eebc050e4fa7a83c76fd23ea2b1b5174bd59d9142c28b64b47812b9e4a7f52ae2d969ecea5feefe85f7f1d142e151a30fdb446096d5c37943f6663422151cbd4b003f18ef9badbd71ff60a68e5f0df42ab46ae582c2fb93f5bcc4ca5afcb49b90008c4cf4277fc8e0c4795e173e872cbd941f6eec20c2fd4c1a360b56804a4cd1cb716e5f62f73125e649eb8194c212719b338d849af6f7c2b98559d4364750214f52919c3b2fd55f56316b59d861f5d90060bf23a6fec5de0888545d479e779cb5bf9b225740dd227259f58bfd5caef6e3579a2ff28b264f79190e4ea5df1f47cc218cce5e1d2fbebfb257af73984b47ef9bc0f95abc2f777f5c7627b29847c17927e77d02aea2a113376ad78d816dac5109668dd101fd39d0eb400bba390739e0302adf18589485588d5fe2734fd956e12b281fe83e2e55ec9db93eff15fef838ce03c47cb3c2a995c5cd9563ef48f38c120f1b88296101c896fe2a2c72ac392e78e9a2c0a8820f9a645fc500dec17bccae6fbdf8132486bcb759880cbb1727a7e6cbcd3bc72f6feaa65580dfce5b7bf5dfa46915ac6714226aa510d0bec05d8fc20f096615ad5e121bf657ae2d9c34281d7697d8000d57b3109c1da7740b1481c617ea151df710a4dc1aedd1d1226efb2852b56d5e5b3de0e1f4d6b2063c34a4b6e5abb4572bf6123230a5431dc18e647ae44ba19135534ad7cfdbb97446be925710fa2cc925e2a2b5bcbda3584fae0dce5ad385eb5412d773f7da86e466aa399ac4447c2ab602076856a02ce04a6562bd32ab3d1e08659c9fabb89b9e98eb9fcb9cb805244f16dfa385513e813ae879913b7631ed0b5dbce1558a9e668bd5e609f9496cce91e94180c5024ac0a22121e74b98ab686708c4eef2bad4bc65ab0b06c14d31bca1c0b71405c04e8c36cd86a8048bd4c88e83e448903774be351a4f1c6d29c1caee6067444d970c5116b4e925344c15c229fce4fcd71628546acf8778858ec667af244cf7d16c6107b3f0c7fe7757c9483a763f1f2c6d9a59afc68ba0682e61f7e5ac730c789a1e3c38b498a976d61a44751a9704ebaa2805c7e6db2f7b193111d1ea4fe50152cf578660862d8a155c69790883e4b2ebaf6b76495224194cf54d65bf9652c8048dec41ada93c42e9a304f47d46ef8a2dc60efcf5e76109379ecd316d94ff2344dbde564c07c20b08f14ec705f9647e7c9522540cdb8732fa8c6539636dd6022196f858268d1446b492239fab007f35ec3c93e1caa8da64a2aba23eca5ebc7420518d0b76451470ca28e915c7c3cde1fef1979ac7dbd656d6fbdce78a3419bf81c76318422f4b588cc32c7f9a6b59d5b65fbf199adf8e6a2c332b9ff00be24720d177c87f7cb2760263b07014e4caf90f23942554637e470afb398464867bf9246ccac5df71a6cda3903a3880738b9cb0215330d3b488c56b07232d7560080c07c0fab58a8116918c0f5f0855ba60c88f265d9228d98a47db81b42eabeffad681772f53f9f736a42990fad45be9f32e81adaf30b1f2e4ea0c8445b3c3074a55464666d132118969f79a1de6482778602b496c5f994ffae50ba1c7abc34b7398dc1decd8f73a60db2548112373533ebfa20203a38c01cb600940061ef2aab523cc123a2514fe2b63cb3af381467b8da7e9f7a1eb1db7b538f9f0c7f67c583ac25b9c2fe82f4e4e74b32efcabda2b75a01c3b1eab25dbfeb8daee6ba9dd7588c376deae7b68c86cfc199e5d307831c91ee58bab4fddebea9f8e0eea74757b8fc3bfa0def1197840a0c3f64d884a5d40398d205e151a79cb3f433822429ab2814eed69766a98d380a06a1345a96d3c9c1b2886f67d7b60061b6adb115578cadd667d176b99bc77e714fac5b210c942ea8e9b540878e4af1146d749786b9a6025f21fd2f16e7085fe8d0253a1bb57676a89ecfd41c6b2a57d6d29f7715f117a427c468cec737f5aa55c806df72aeaa14ec97130a6b759b2bab3d5e6d2124dddb3ce78d7f021211b5c0d3cf79246406e6af57092fc4a4cca6181d71a4207989c188f1c4b38137861cfed058742847b2301da51a60b6d945a4479a47c7a2c45b2487d45a5531d0d0ec35e4ab48b151f764738fe8ea5cf8ad09b0e5163b6b949a9c354b924d4447fbc20b20ebe42d5480c0250fdb47ef7026b3f2be435a9531db300faa16440cb4c12c307a646d4407c5b46f375a7cc3461515386ec591ecf217b8d439cce3b14c147cadb36bcd75e890350c922a4d6b7d8505f1777e2ea7d6f4e696b2826a035b7174a418580dcb5eb33ea201914cd3086aa82014e41f6afd81f6c78bdaf829cb1091993660ca44f517c7a076ed0cd464580c8a4df1ba6baa04194408d8dcf2cd013bb480b7ee9347d0bcd67eaf312c40f31773e22b733e7fc54f358c2bad008187a32afb99abfee19a83115df2a92de6e5bf12611dfc7635ea5ffac22c63876cebc581c4cee6e9df4de680d4dd70a738a7e36ae5f26d0eaf2ffa5a3
Responsive section list
View code 90517fec583b08c9a0ef6dccb2c5a8a6e6897f1aeb27f8d84cd02fa9fcf346335aafa1884fb9e1ed539fdb38fcc67a576b48254678f3e3e262eaacdf3a1e2657de319e70433ecd76b99a5738691727aaf4165c1ba324c56241ecf066e84b412731b7159a11945ce2796c2cf103c552ed5f56bbad9cb1bf202293be91cd9dd9647983a0f11751603711afad834e15fc9d666f4eb056808457ebc46da9872642cf6dc66706058fc29004df997fdd686f531c8289ef1e17299d92504d4e682b1def586f90fd7e37960324767d959b8c226501f3fa7d0a347609b3d5f4760dd18c455e15517ebc6dcd78c60b9ad19bab9ad949f63e75c704276faf0e5c72d0dc01ed52e19dd0373eeb47b2fcaf08b17ac40d22838690028650aa56219129eeaca2a125044247c3ac3fdaa88a51e7bac66278133c8cc433f38d5d77b754fa0bb888457a0fe869baf24a50c2f44d8d171924a64afc5022fe7362ad9dc1e1923a095865939015f109594d5a41a58da4a27cd0d9d03a05144d364e2dae2b4506f5c2cdbcce3095cae2b3394d157b257320e994b79cc4392ba138302fa61c0f3d2174b961be0eb4ac03d3dff5af146c687e073981538a7c09f3e5b4b66a5173811f8d0be281edc21057215701ef0750bd2cad921c59b4a69f6c866f391a340305e09b02fe08dd8e6e6b32769d47c4a57a171248fabe5144024fc873165df88d33bb8c44be158e21918d92ecc7eadb41714250dd88f56be014f69fd0ff29dff2f959f4859d9da7cb29b911447a6dced40c197341c0516038bf701b411a0e325bfe80fd0e8d8b5b4fdb1df157b7fc776c058361977c4221aa0d59dff3af73a9483bdc8a971edd7be9c39fc1722bfb82bd7ecf03036155d3d77032902578fb3bea1e80687693dba9d998282c8c71f542f5e917d8b3ea19db6dc4c691fe5f88689faf59f1f48a8b61695694f69a742d089646d19ad3b8eb0673f824b71a63d1abd6076e5e90afcecc82acd7cb92c6078277ecaf3454da617a9f526fef3fd7d4751a4b5464208b4d20dcf41332f75a61a52a03bd9e0405df549019971e7588fa79c3cfc333be765517de555d3e9073cdaae619e98e636d8b16ddea1940a5e26c14d8a94ec6a32778f877c10f39bce807eae82bf907c4d7558bf829c63cd1c884f12825321ed48b5b3927f42d0b569cc212c92a66a8113874a8b1aab82aacb7aa77cdb8b048fc7d91c5119b56573dfd305f5dc0cd51990d43238449d785d736f83538fac8924c1932f3f62aa4b10d71d145714dfd37aa427c468b842ce43a03bc04dd257c9a8b0dc6500fea3aabbd5d5fd8bc579b690bbf507ecdd2270412563fce0372412e42935737ac91c9b10afc94de82a0c35d3fb2fdacdc0d982cc58be674abc267d9eec342f9d3f0c1c4622c7a0a6727292ac247291e3e49e4ab4d35e5259b4daea2089ab76e2c27e7060c2657f612d5cca07140ea228a9ffdb634c11b4f32e4957882b7163b53ae5c8d4aa5010c64f0d98495ac166036e7a9c88f9e9e37cd412a3ab9f15c96d0e11700a87e4f2ec7d835bea03e5a9463b5265e6c3617ea36bb805a47cc25d3de8c08d192168f23f2e77fb19a581e8892d2753cda11a125cc208ee3575cdebbcfca3f307ef3a14f840c523680bb5a1cf340b466736325b2900fe58c3bfc4b45dbac3e193b0c490d0bad93ee51881205eb899a0a66bcc146030077a3df511a89d65328525b6a6c1001fef324f163b5c19aa7fc37eae2c075bd432d09fb87806e918e0ac9eb47f6736f3a9f92643ff4a55b6a85e9a850061e7b2841dccc6b241ddcf3321ade806c00f8592e67b0ca6b4b7f0335cd22a909852042f96244b6268b7a8220751b16f7ddea20c263245663cda2dfba9c1a2da91cd3eeb63766a07275483e7e906c0f15b0b9bf5756cdf0d4d9e2aaa84fa940a5d6b7157f34d58ed8e82e87bfa5fa7e1a43d8397a6993f4d84dbf9c729a7ff93bb9784f6b0abf787024633b0906504146d28fdb703c149869786dd86738abde7af7e635a4633e09662b6221ae5130cabb050ef1b589c08de1a1a30846d8716be15859e20cc677f86342a78e5ff9990323a97f24f717dd04f4ca14ff7446c503a9429aa06fb7d5085fe06de44563d45deeb0786c01e4ce593e444569492e27e0cf42bf42b879e979f1b88573ab1e9eb1fb53dc2fb48d07a8ffb34fe7334bb66b57daf7616295965688b78017e772a1f741bc3eab6f26ab8780c5c6d91603b358faee8645bbb769d5ff66a5d4cb83fa9528d9638cbb16fa899c8ad5514bdc9c2c7efcc221258154058da63b325a85d943de4e1f0bb26d1292c92de24923b376348c367821a54ff7bd07f8815a108b34c6eca6343231f731118b84665247e579f6cc9860f2d780cfbe980d5bb7854003555220c5656cc348f5bc99e59a83bffcea110acf9d807e79da7fbce9814542d3bca99ee3867de25fb4249c6ab19f316ea41b2a40808fa47ecc014cd5b7db87d0e614e4212807eaba73f596c14edc6aead45f8e766c8cd424de93afe87e9047509c3d6bdbfc85c83816665572763983098b7526c35ba3da18a809caa87725a44480665afa6e163421a2f08a606df2bca4ce0263d343975555463eb5843112be8f76618b0446448a49d0474863cf1171781dceb06598781225552d736d01b133fdc23edbd4e8274839f344ab0fef9f3ae847324835f7d9146b5cec74b81ca826e9f586e14ea02f8ae57c44b2bcb0782b9f67973ed0219e6e5973c58edef9d96a499b32ea27d09a30b8635ba7d2c32612e33c446a1708663dcc8084648c4e98b2c75a93e780afe6e8275400dcf92f7f558ec810431169a5084b46acf666ab41b0e061f78bb37999db393f5768338e8cae1d190327084e90e278c6d483c989976ae7ad6cd00081bfeb95a83193eff5c60fffd04f64840e41240232c56f8974c1b5abe5fe4d9e41a1272787c32ec036258b6e39097e8375778ef2b932c33aed10f78bad70fdc838a3288060b9cfd765dfa9bc6ba3935aea67b889a92166527a3704e0d17f902f8cfa163a30a46929ace5787ebb2840cbcb8b716047e74edb9601a030733f58820b4aaabda91e84a09d4b5267afd914f103a80b863c38f963beac4538a22aab3963dd6cb8f51988650bbf62588a41fad03945faa49a5711f12df5fe108766386f0d577b2183038c70f0451f50f78569050c6eb2af6fcf96886b41371dc32e1519b29a406e92d06558224776d583ebb18f357431e309fecec025cea5cb8441c53433b2a97820412cd4942f024284f35202be90c469a809025e6773dab95196e2129d60a95d141b9a85acbcbf3bac50f7ec6a33caf31825002d8675ade4adf94922ff11305b99a227abf2e3548ea8ac5a1a1273f2affe7a4eb0f4ba8eb5f877966d9afdbd7b928e71f64d78e759dd26d187378bf2127b2a0284d6a1f86fd577dd8d94509c1c4b47bcabb494690359f9921cca1e71509baf9f17c05f5f9ae53790e8e8bef9663253b119177b9266f801015e8b31a318f066f74d54ec081cdb6ce111f0739375b2bcc297115c50778b28176fff0423ad5f150405e794d2fcc02e81bb16c24cba50d73c2c1f1855efa140e05f8944f05acd7e9161a38dbf323680f819bd0469b098111f6a7b7030d0dcfb4794b12ef4168421c558b01565f8c06df508afa71f930cc4d943dd29db8815468b79f4a4275fccf19047beae16532b8ce0d7db875f40bbef362ed17921f1a4c318edff254fad708fe7987d9d2dca3e6453aa3a512a5d13c0e5cf5b640bb9de7c2d766e8f05d3c382d41742dbfc62b0cfa25449b3ba6e433922b5be0cdfc29a9659748124cdce16ca7d503848e887107d0423d392ad30413a5a70ae288d48d625324f36d20924b7747a86498aebc34f00e800ed31880a3beec29e7630bc9490b717cff298c07f70f88cbe62815947986ff1fe39b2a2b21dd921d15551ed14142716b1dbdc27e15fa80bf7738bd328394b7b9bb42fe3fa4857c8f3544ec06560da0420769a121272fea814d6e4bbc7ab61833b34d529035aa468d592efa8cda73f116efe721de20510cc280484a1fbe08749424fc4b8cc72237579c33cb43c68e4e69f190c325c0d61a04997cdc150a3dac5c211fb9660fa7279c0bc54a7e6bead8d15147fe2c6697b771c31faa482ea9b8039ac2aa86906f309349bd76bbc7ec03af68d74ea393ab7d0cdb2da0be888b2884d96d52485baefd5357f87a0ba0c56d7576432f5471d9abfbccbff8a61fe6585a0f917805b8b732ce96d8b160dfc6ac7eb756a33ba6ecabfba12cbaf48bd8aab005235c183a0678c2b7b9c943c5f3c260edbb75c535009c7c7b07ccebb52e3d6917b7a88cd261585f030f658ee4b8da2db38aceaa8422ad840d0a1aaed918c950e1dddc24d6dabda18b13ec39e1d2de5c3cd3e25bb4d39eebb6efd8b6ff17b45e90f2f303356a538ec73c3e07152415355a51d34a49baa1a494ab705907b851c8dfd496a2149e7a5310ca37b23c708cd61e0e7c68d490f727a1cbb9a92606bff551c14561a1e0f7cf83f52f4548b861b371edc36ea9b9334ce79b1159aeae4fc731a9d1388ea28ad190566daf87def2bd08cc6d5cb16c72a4492731c1f8fa2e3e5ec460b5f7bf7333cf2621a0ce376749e66f45dd92405039ef4c5a9b6ff4e6810e87534e7dc9ac36305dfc7a4c087c475a63ddde15c7bcccd10e9db39e891402ade6211d54b8c05e294ef4cce657b172152b14458bf5bf72348a2a973b11cfccf2df8fe29963b26b714269c3ed86e77174bffb18c717f3e0e44cb505de48ad0fac9280b447d4f806736f1acf9815ce3282ffdc1be5a87df2097e0c75a187a1e441528bb7b07f5ef9465ad9acbda242471468a95e7ea2446a6924b68898c903da985d7a42fbdd14e9706c789fabbc48bca73e155d70dd073cca0e2efcde7adb1f9b74cfef32b30cab8963078c15eb81446d9d78de0dd3ff6ed6bd7c7f5020f745a1628b1984310d6752e1866d06572a61c20d737609dfe6ca785e47dfe3d9716eee98fb69242734e9602441b9f62237dad57ce6455d6bd9960e683ba77681882349118db52f0934491f631c1ae069a6a15eecd5390680b867cf7820fec30cb09dc6ffb0437d3277b0dc347c27aad50652d97f07a932d8f4ba465bd5bab979f390c1cea10e1ba877960d5ff55bfd042da3e25f8fa93dd45657367c58adf6a3aed73a29b8039751743c2d228973a803a555dcfd5a25b190a0d6ad7ba4e888f6cc92574933918590b21a043f0217d4486e4f5df5c89a90410ad9022009d1538ea6458f48fea1be54790c214fec2e0b9fa040c1571264538
Responsive article list
View code 1cd8f9e4fc4633994771ded5b32f0993a92e67b0b4a63462ad4cc0adf5c86d0451861a019e2395aa217162914bccb2a567b97420a0df3ed9432921017043c63f3f054dc168f39e23bc731cad39966c0e8c03780cfb7e1896fafe91c9394c9282a28f639cd4c9f901bc2ea54f7e66fb9469e7d8e5daa03643fabae7c780fe16a64a42d45064ca5deb869ca81d02a072e12e6539a4b64c58b818d94bc6523f4c0ac9817aa85903e6ebd29ff8dadb3157771e814d13da3317ad10f5e2496f02c3e0988adc043fe293b6e4681bc6d136ef513e9defbc6d3b0b5d6b268d1ce4bcd806aab6dbdcd3c61866bfe0100dda9b00e735dd9e5a7d316bbde130ebf96e4023bb0baa50ff8fb78f7c6319d1a3f8bdde0bc7c8855c4625a7f1da14b8dc3cd6b8bd0991d2ce0fe851816567c6ca79004a121c1befec08c50175bd33ac75ba973bc7237012a8be71135570d1a6ca32612e892ca2f153dfe432944dd04b2876984c6c174ce5c50a049fcd6f1387c55dcb4edde89f590006e2354f3dcd924559ea235997f5a0db2e0cdbbfc63a5daf0a111a0c46097bc0672ede64b350c4d1c6c4cb47d74090f4989c30580a99b015fe12dabd083f724254321a707845d72b053b4816208d6e01ad26ad8c5daee2212ee73c94794b50414a02313d2cc38b2bb60853592140224a8c114f3b59b70572ef1b03be8e43005ba0259dc13ffebe19a40ffc208371435555a46144d0169ac212a387514ac6d313276a3b978bc3d2d41564aa434b85627c2a998ea7c0eb71c75df52893f9f1b9ecb9cbb1fd60c18eb4c883ecee6c7234062f1d45ecae2c0c5e51e7a24a12d5b9f0596438ff484eb065b0599828f538ef9afb31840f31cd5d90f1601803be67321189182fa894f5557574cc153692e5f9455dae0d07b5aac3663366adfae5abd70733cb0f0c8d598b834ea011ef19cf3205b66e56af97fbce83ce637328054e01a590de72c570f3f78b04201ecddfc69917d149e312b1fbc8bb52fc707637dd3613d4dc100dc6aa571231397a5e5d8460ab09d6208762e64b05dea3dd0e394211578837a63fd1035954a8c36c1875b92d82fe6a3c2eb356758dc48e41d3f120176df88892ba4ffe89dfa28c83aa090aae992039a50ec9273319785f3e57726d220d08f9686f228563a28887451d8be194f1d5b904d3ee89abc315436bf242ba0807d28831c96ef5c952390fa872a14df9e3c9a0bfcb09ef341799522de8d9083653045c6e5cc92314d6a4d7aba6afa3d734e2f331149a7b8b162da9f05ad5cc24d4f8ff626d2610c00da96c415050246a931bc37fc594991e9f83d44a78c3d6e7b38ed8927f0be8b3b0cce70890a7f0d949fe6dd8859260d07b6cd93be3467c1a69e48a48cf825939794f526852f616a67a647a30762c6534e96c2fbda00aaceef75e92eedc8e548a516592d535b8730f75d516dbfba690ac8641ecb2c81f0e91a67d961a1a935849d97129d8098a68a5131fddab6cd9c4cff668263c41e82c8fd60d43ff071c638fb83f38be4d89fada70e1c3f570f629aa0869c04c5603db36fcfa04a3295a06cde5a6c06175a168f7fe246ada439742626d0ae3249bd7b53ebd6213fd987cdc13cf41d7441a46344229bbb0cfbf48df973d77d8c22629aa6961b4cf7df714567f500e97b80193a293086111ab6a1d7d8e6c6c258d013829b5cac337e4c744ad565bf83d73eb31608a4bb6f3a49e2a863c22c3a0e475ca1a1cab9eb51d7dc53f31b642197d44b0872b371fe16c13d7fd5883836f80ce9963f493047dc14402bb900205c13f5ae5fef245d427d536f0f2b3850013c93327b1dd702e1a4d91ab53f98a03968ba77cf3612e4d20d69855f07413e2a6dd914eacaa66822b16e1ac6bb3faf31bab7dfffe6e985b64855abaab5e9b6d58c25a56917711ab73d938d3290b0e7eaecd2a3a8c6c685c0cbaf2b08897ef2c58520a5a0df38f610976c78d95b113dc41f32d3ad8c0742d4e9d025a0e3722bb292cc9fd301cd1732a11179c99d2f4ac5d1649a7dcfb5ae9e59211678d133be8b5e803f6c2e09b0cdb2e13017f34fe246c54052e4e22f0bca91cf5c7e031821f680ed542fffd29229692beadb07be1e1508dcbcd098b15749454e5d4ccb8911f153b38da2b6bb7aa6f20b97f46bd16523219c2e65d0a8ae3944b942cbd2ba044d6d53bdff31bbdce6a80a797ab0f9b20f0b99ae53aa1a7df45311ed95a4d5acf60affd89b265b513c0f46b226297f39a149d72e84fd1e3aa98adcc2c9d7b119405d027f39cb91a36ab4abf47bcec55346abfb2bd149e8582e2d1053d1dd2dc27d53a41a465dc9bfa99c6baf87e81e31b97147a4685be69ca930d931d1f6ca5092e7fd89198f7a30aa8891dce4615c5420f270bb13ec3820013521de2263d72eba8505e8b5b208c72cb73c7cc778e09ed9fb42e3769030db059284d18ef422a4f60931fdbf882625ef880422e567b7871c6a8046724b691977caff5fab57f185252f0b3105c9eb287b8e9e5deb59525d76af7f00c52c2ef0058d7235f483b353932848127074abae02079f84c111af9ebc89df22b5e2eeb28e646bf873929b16845d63b0f5098bb11a735a37ad96f40f6e1d22add6f21c088c5c2e177c75c2a0050aa73ff71e5d994d663e67301dc8e71540715eddfe3e271e925342c3dceea3bb11d6ba7126b60e90b6d9c07fa54685e78b9387eaab4f75701ad53f19a2ab889e8f5fca20378db53067e3343c1e955fa88ef4baae1cc4f4220e1242b1fc026d75df3c29179ac85874efb55dd74e6f0b3c22c7bd955a3024906ed0e26c50365da39d6e99d044c157d8f053ff25038cf867c23158e3b3f2ce59e29f30fcb8ad502a149255c820e5ff73c3a6b07a11095097e13c04342f5b1be2247c49a6786396c46d4b3af5c55d00695fa970a4ae3774f6ff4754d50072e008a72c1b91faea16bfb765b3b53c570098df7b1d4869785c2bad527ae84d950da125781450e8eb376ee8fc418169377d1373475f3001966927a16b25845879712d0a4cf925067cfec870b11ca3659500c736a4b904db13c487c83487d254355052fc3d2309e780273b3182b3cb7101a022d46a613245b214729df6c8613dd9ec8c05a50cc247df0d494e2a75e4f2fd1f846f4a8c646ae0dd2d2d4e5188c2aca803bcf2c44477a1c9b08f0eb55236c1eb7dd183464daff8c5fd05d65e2790e191c95ea95be9850b89fd5f9d7ae4a2342fc54a4ddc002029044e9945af390d92b4926188e7a2c592d5c8d5696621acf3dd837903135767b3ab32fcc4929b013f11ef2798d35c848ce99a4468153ac63420e89cb8476e937e6074ae2b8564b4926878f49b4937963bca97cdd33ee8e4c933c52636b9d76677b19a1ea2676cdc882d0c1fd7f3b5460a20d15659665a748d55ed687246111fb0bbf7e5221c55c0c4ab484b8fb90eeeb40a89fff4afb93933cd6f5cabc63cebce720497370e7458f04041c4b63126d5271327ba568cc0393aaca8de0a2398ac9f74a1bb484036a23b87c03dbae0901d2603efab71a282468e74e77fe9f8c22752653d0dee12059e7828b0776285fd525842c005b0e3831704016d187b23896d8c8401b3b7b8f7269893af2722aeeeef9e4262abdb44b7df6914742608d5663df6bbd4932e45e527f9cc12a6d63fc6ccd740f499ac515aa99b6fc577cc42a79d62c5051dd7bffdaa7a3699fca5d18119bb215f3bc6b6221ce6a8e01bce1980146fd3267cd92f36b0a31cb11444aea9698daf2cc625580bc2c7a5dbc381ff69cd491aee211a12fd970b7a0f27fcc7c0e792d5857c843d4579c2d163fdc7cf555646e5a89f1c834ff6fe179399af5b50aaf7b7937b26af1715532b4f0871011bfe210b9b886d93db64659b44dde2de97d4ddc9b0d8812c998146b5bc32668a396e4670847de0a354c3c9c0dc11c1d515072e4ecd0cde538a382fecaefd6485ac5471b80b5110a4b9f2511f9cf0c59c2a1ac0cfd5e55a8036d056743bc9dfdadd60ca26ea8c4b52ec014059d203e10a38ae8701a50af9ab7f0efb20d7bf66de3beee5114c5b747e4415160731308b6abc92ca6370818ac78d31525bcd5796d8a4e956863541880a180ec98e77222b4ae1148f9b5ad1f9a080041d6d5d4991f63fc774017adeb29ef0b72e1da648dc1c4c2f990a73295df2eecd64da0ab2a033630db5e0d1efc23cb8f44fda57a2e64b5d485c77beca4ef039343f76968adf8698b5e258615fddfc51b4cfaa78181f2bc1484688c91d13a957ff7d2c360b76db2687622d8e472a1730cf29c68f584183124876ce217968f5fd4aa1d06650f48fd98df65353668a0f8c70b293b3027f065adfb4dcfcec598b453cc7a64bb1779e5d8b07ac82e58f4885836cf691d295f01be51614932936ba1d645e66a980d5bd074cad9644884bc2efa23d477f482f82bd6e0998b8ea24d6b2e27dce74a7231056d27ac014bfa765a75c9e9856dbf8e29049650451e002feb9ce6b50177e9dfc31bf136cfbb2b0887a31952a445f02819228650c49cc7cff4b5b560e608773ce83992ca822a6963da2c020110212a1c1847ca0bf81c9e5a31566e576925d7d2764eddb2bd9679331088ffbfaa9b90b35263dc890fd977f283077cc4713f32232a9dd3c89a710f43ada54944708ca878dc77b4550b1c639754b6adba033a2ea731e35868a4e128aaa79fe43c392169884f85adfcf042364c1bed8d089390629602585cc9ff7b3911b3f682ad3e11bd70c0e9aabe0375d7c3d584685cb7b078ef406a815f5eca9e5628de2f54091adcf297299b49e652b02c271227d6d9bbc2f4f0a81b8b1f0376592dc132e546e3ed7991d3d320a5c2968b1f76fd4bb3f9d6e242002528bac449e7d97acc52c1e8b687dc20f05aea76a6975609a2fe44ad1f130432560694bbc01260a8b151288bf83dbd425e90df31af83cda7fdff09d77e5ae0ec31073772da2b876c7a45a9bb0a04094b07af43c67c614651a26fa666d5c6aecb40dfbc3a8c252749f47db08dedd3c843876771fb2eae5cfb7576e53c4ff953e1f83a212db4e7940bd25c9049e6bf458d827ee459aef91ed466e1f3639f35d0fc505d4525f146b0ad7d2089584ffbd43d5789cd3b8d8bd29e421a31354929910aa58ba7a72072e4d688552f5d402e4083e6cdec99a6379ff7bb0a68edb12e0371cc19335842b5737a12e9ee7e941ad29d8532cf37141362ae66204ba5fb814597fca9896b2073ceb817c495b8c24202b124fa2a67785b4bf248128a52d8127da073fe82c9da14417b899c4fef63ec3f8f1ba8a5267878c6f883a80d27746d3f72cbd0a3686e000fa15dceefb87b9bf4c8dd2ee4876ec1504025bc8243ff8913e907b28439b73ba24dbbe90018aabfce6967ae4812ece9b7b1e59f54cb33adcffda0d8495b70ce9111bd427c0bbc98df798e50ff6b088bf1b0c112e2712f31a6e005a89526e6c6fd923f2fd04dfe7c1527faae4e19b94d664ee05b469f09ec0c6b12777728523daa76eec189787d2079e8676f4f5b741b0cc44e257ea8b5bdf36ad921b46a1baaa682e0357689b04e4fab481e1c465b6824fff085bed2d5623e16b6e85f3e34e99f9f89b24dd5be98ffc74dadad5a44e96ada48334f09e09c164f46d8764fd0a119cee64392c0ed63d7a6b26a40412d38fa647224c1be574c9346990d7693179ea6548c7273952ebf72977493b5741bacfab0ff7b707e4f8e586aab2611360a63155bc739efe8d3fd41c8263a3ef24641483f44276e9cf51100a8248222d42e54fd4ae3dcc8b5ac5a0c85de870247306cb95df1da070ddb04b0416cb8c6281641094b2bb7b536a24f054643edb3f1f180950ac191c540f607d9a0e5d33e4d996b7cffc6a247f7f52f74370540d0fa31bbb2b9d9a5ddf6889622a1431bcdbb4a9e2e07a83fa6fdabdba4123ba3537f3a6fcc0fdfad85fe26f387d705f8875a4dcb2af9f02dccfef26122dfc833e1d2e37ca3cdeb21a22ea80bd9a2895b85514dca0b0b421fd6636b9bf41eca4600dbdbfa1af148d0eb79f07ac364bf237a0d9a7f6a0aa68016fd5016aeecb6a6a34daf53c91f2670063a677677fdb82c4af53e8dd2ef91477bdb9d00122027d192aeb4e9b97292078b8633260cabd0d35d38fd7bad3d09536ff6ee035f8f6012d624307af739ae3322be988b3dc51278789ec36e6d608e63687225f1c2d610dce2953fec564b81fddf139e21fc58f3cc06f4ea40aadc478555f03b8e062ba7e1123cde751d26e211aea4c77bb0de7b381910abe0a02a957c9dfa29c2353ef0a50969c75a90afc35db19c7e4b1f7c39cc6902d10f13881db6f3c018052d61253942d939b86d3c1bf3a68382079fe37beabd90675e4ccae0c990a7b23f4909cc9c6a25e8d7dbbd849d02038e979e8c6f224d67789f3bf37641ad9f8d23131dad9be32864b54cf03939b65884750b6dce10b4d35cc62d97db4eda5e4e7f078f6702cab26dc3f38426d8c6837d83f084782e73f1b5c05e687bb0fdc8f8c77187e5370501c8c16a6d50de580d5f4d0c353e17335e70359381f657e0c657e6fc2a798d78777bfb890eb07b7bf1c763a834622773ad07001c25d03a1bba1b87fd1d27e4f40c40d64813ab08fc734a3b3df9d96a927edce1c54b9450a5839a40ba8195ef86e91beadcecc0b7909890880f74b377bb9873633052743fa2d230ee54d35e58f19ca4ac135f1d292a065e24e67425d824de41a5c94f2f4370c0f328eb9dc8db93100dc3fe54e7343f943346fd222d73324cff1af4a414ecc6d546f370b42042b2e2d1669b6a284fa82acc5c511b5ab466bb4899765960ba37c8be675e5825499c0cd6d8d2e30c9b55525df274d537218788a437654a8b7924ba6033aa14555049320efbc8bc5f92cdabf4510544f4cd69204184b43a2c26865d10ac873b7488ca7c584268596a2673027708496045d29607339c5ae32a48c0aed5f79c6b0290454cf62668206c90814471a51c8abfc600cd35d58e91feb389f9e2514f51fcee42ec107c7329a265959e6ae6d18b9ead969e2ec23e56c6cde5d9d5ed068d18b466eb1fe4dc349f65781702fecad1118dc87d4f58d268e53be75b2e51f5a4064f9d8b5f13db48f592fa5f0dbe313f045e1e4c82784f655cf87cba9a6f3ae2075eb9c559d08cc36a5371920199d5086313878cc937f25e38f9249c7b483c0b548a8cb0fdf74c2f7b15706b3d965d77f85dad3511bea74d6f29696c0f68e615076cd4d3f40e092c370025b7e994daab6795cdb30f1712eae36a6a9724b3e02160103265dbfa6817c62705bcb77c30f1407f7bcd5be21fec1e1a52338fef73aaa3f06166a816b105842641daf4f047f7b0f06e517649411326bf8b3e5c8f010a13833ffe6e8ec4f22e4ab0696090fb22ad53bafb8af7f0d817167ecbb80a992009d19b3d6550129970ff79d274c58e01219016606fed70ea7062d2f076f29cf2777041a99751b4c678c2decea89c74ad0242b36b0f622d13662cb3d239ea46aab8136e819b2f94dcfc69529fc9efea55923daf59563138a5526f3d8cf15c44b8ee4fd2998f18bf608e0f1be27fc63d8abf00f6dd18698e6315aab15854bc396b06858a1ca2d5a9222ccd5e13b3047dfbafc84f670d680e2acac329da7a66368befe2101382de1e04b3a323fc861466eeb6154cced2e0adfe033b0a296e95320c6cdc71cf4653b5ffdc3d17b72fd4fdc58535ea60e8ea59fbeadb77c7b33eb2ab1d46963510820669c0a3b19900a7757ac65758869dacb0c3a4ae9d0f7f847ced9f87444146e7d0c61f24254411c9f8cf31a09319af5de87d2cb8576fd5a047f5ed1c40bd1fb9c1e55182749f285107f58dfca99fa5d64f347915584cc56c7e1a556d75321235470781379d436371e76ee4701bbe612c62afe85b15eae449f6781809302cddd06ebd77917b51de1311a1b8ad266e508efc264e5f0de13f9470184d0ae456d69988e214f7b4eb426440cff8aec438b06d297a806ae524109823cc8798035a2834e66b87b251da3bc01dbba290b92a10eb96c4c5badab0b25e46b31a76e4ba6a58e0fcab1d741b656cfd20d79b9496ca4dbf85833a64f5ad0d4825085b947563022eb67238a76598c812b892372050ba5024435bed49e7e302bf812f034691f0ff58c34f871be54cca9ae2e22e83e7922c19513aa965d31b698368cce6ce1939ef52d9ad48a96b0ed1a2a25451d277cd9eabee180fa2ecff7c4841345daa1688f1b7fe2094f10846684cd00a3994832500cd3c66227a60381b3e8d593129338b4c72650b98439a8d9ce24967ca2faf87c25ed5286f134cf4597098718fc23b56dfed7ecf03659f99930d581ccb33b70855a7598904df17a1cb68c88ef9874bbe80c30ef7a297e7923d924ed1d0a40fd3277fb650ad024eaabb03e9d5de4eca65407039af9726950a283c6c4f84c3a47c8f8f54d7688ea6da20a884eb6611327b3a4c164cfaa509ea49c15c768d9533da6582014916d7ce86f976bbc7cb849890c070c7d542212f12a4780f84bf3189bf153ed9fffe30d7990efae399681b75116990fd021284aa6fe6dae5394e4a878cc710de1abb7fd5af6061a3e9f8fca3d741d716408abd282704d9e3fb4c48601496ecd84add8adae7b9ab7014f715cb1c2ae447959d1eb81f8585162ffcdd95a3ef660b6363aed9e8bcbb9a138c7436f5e5c2556fda26fac9ee895211db0650f68732f29d1296cdbcdbf278b93d71df68f98d9f9579631a82e723251fe26b36a3a94a962e487f0afed345c5cee6bcf2c799d7585d7db333c6885d66b53a73b88c77135d013e5207bb03a37c70c4cfb7aa5f01e6173a37a8411046bef1a324be5122eafb17719ef7c7cf7ab74381629b6056b2705e0cac629e751c1e162ec866573b6f6d0b744c1e275c0a55940a84a1a1dbf667b74bd96d430d96cd14aa0caac7df941da529a13d044603ee2fc3dacb6bca8617c311976ec2d7acabd030d5a6825c6117298a936be7626b21cd7d7009d21fd037c14c4ad38ac46747d7f59dea426db1edd325e79c503d4b1c43e15d26646699e498434328a8a58735fafac828ab637de499c992f464256c50eedce7a0c72b621b1b54e10aa60c102bc94f31fe9195676c2ae7cfdd65840c5a7e52fb69e479efa8fe8aed265734994e3bb315dc9915226b713c020ed38c172c8b6c3387dcf7d47ab9c4890a038dfeaffa6beedfffef5aa1aaaa9152f8e5859bf2b8079085f7af9ea7eb9c02d107697816c34d5e58fe1ccf208e8d4aa88864e095e68cce950422c116e49310b4e358f8651f5d2732c3e9e87c48ea9f6dee00ad39c2138a0177d6e56bbdfb67dcf54a1b5f7297f9ebced5a8cbc19c946f825927339f0f791ed20bae03a4354f4a2d4cfec00d3800ea5c37ca5e9b4f8becc5434f2f8758bb999495d68610dc7c6bae29c33745bdb473cb43d7d7a3f9d1881f17ff3a590b3d75ee0b8b6d2d5e71f2cad92bb1b94e5414bcba184d7ce800a98db7949671a740661dca5fb808b19cf72a620cfdd2e3b75b3a37e0129c184b7a17a477c6bedd764ff11ae7b30ce0a37cf2fd706dc47634419a14823fa4a4e36b1751b13747ebb41dd171c9f7566e7a9a24b34614cfa5bf6bebb5006d8b2f8a0b6c960366bf15d27a22e895b8d629092c4f09a8b2f5bf03166394d959a43a4f533967a9c9db47ccb25f448f7a01104d35016e81bb8439da8e7aeb1a620798ffcc53c2b27ea1bc608bf0598f3f4945e6b017e8eacdad70baac12234eb37906faddcbe125c7c893671acd950ad0a5652e547397b92de977c61582ed9fa4506e895c138056b6bb2ef1fcf42a798f9acd3c28245ab3be57e8d48ba0f55d0ec76551fdc6398e6a11f3b31bd732f8b330a3ca902c3a0161c7780129e4538da0527e1b7d6c74defc2e45f8e9cde60342fa86f2bbc9a2ca5e3584011a9ddc407d7ea8d5456d5bd11341cf62daa999c34ca4cc7cb6a73fa2d421a6a3f6888d4f01d39e056b5bf918b081a835970a04707a3c217bf40c7e31683e1286b42ff5a35f7af61a49a54b0ec5aa8c85199a73d5533341d3109e51389caf5e49d84b178d678adf6604e0570e9370fc10897ae3d86784a7f27fe38b1f2d6d63064779316f7bb605546f2561721f8721b46cdc752dbeb70cbbbcc7f71436a28788b25af89acedc9309d8f314fb8131c8711ca8cfb5f512243e98d26d62038a3bc607351bdc97fcd075a0c1717b7cc05f42619878b82ff02f67eae81278f2641c56df4859d90ba8d4297058572702cdc4b509b9ad62edf6f7c4c5256fcd7831bd077226a6bc0c43637b27a02505d832cd64611140689450c48f88dba939a9d4fabeb557fef4bcc473af6edef89f1960bd2e2256a8fe4beb7be16e2ceca468c57edd1e9689e7716677a00275248004d3c9c08a8f16a08f6e5086b1a951a2b01c6d729cffbb60e451a04785675de039918261e500f24799bc69bc198167b6d731d478a9dd286f8de9b35f983d74a62d4065712490f770766428653901927db5f0f2234a30ab796dcb1600f1eea09f760e971bf7c502ed888ef9b851a8156ae00136c4668ec1e1eeb6048e953c7dea41b3ed518e82954d5e4cc5746d2832e20c0035431daed9e3c1a982db48993d5e95a5f3c40bd39ec23b31dce86ec7d811ddb83a2de1b5
Responsive article list
View code d991b4e83b1bf1d3cc65ae230eaa2a3a80f4bcfd0a5368b775b59fdee8f3715fb6aa39a7bcfe903e24144fde6b7ac30f694b22cd9b9bf667b49d8caa072a7baa0a7da8acaa3343df6ecd78c9f4386c25ad38e25876619ad15107bd830f03577ae84ad8607ea98f7818b2048f5d139ff69fe955d20e27717a6f384219682da52264521b2f0967ebc9a2f41216dca4cb96048582cb8926e9bf7fbd5e584b0132d9f7d440cca941fcb4f618f02282af3137ec815c018909947b481e395665180c1d5236a9b999550eef62b68ce1c7764f75f9c7a45bac058d7bf15c96190644f9325016f05ac0cb8fcf96bcff2d2711dbaed61a3a6e39ce20421e686f96df606a6622cde7d3bb83e95f43841c52cf24a392598bc6a67d1e31eebe47aac9894028cbb3c7d40ca0e437a9266324bda68cd23b7dc16c6db94d2d71c6edb3c56be421e44c30fa435a047c1380809adfc7ad77caccbadba15b7a0845bddde249dc5feed6b1341409070c7e75b3aebea33d2d2635eb3f2095b4ec2fb3ebce9082353aad92d4b696170cb9b2560ba348decf7d9a35b91e3788180275f5f2ca161bc1841a8a24d8f68e4e35c08b6161f6b64bf5b4a5e09b0149192dcfeb148865a36baab39abce578d405197ce04b70cc16de29001d0f004d8335391f3c725dccf6352fa3cfda95ae7d4052ac9a2d50d1774af6f74ea77ee86b7982f84ca3dbf240780252dc1c67c37be8c5b14571e946d63da205cb0c18ae945ce827e4ab58faf61cae789f5ab8f048f5421a8bc1a22137c2967703d25300bdd9bfab98b8c49339d10aa85aef401a408aad420a526e760c9df51b954625c6a9099819ed6b1640e00e1427a47a0d1772a656857c0ad14efa7893ec93aecf9cfa69513c61fd1e6ac5a39bd69526d5cc86e5e781b75ca8ae3dff140d425156eede78bafc4b4cae1f4e75de89353ded6abb3055c28a7f651e8bda29611072074dcee296a72dcfb02f3de4ae99c3236fa682415955ab34c16878d00776e1e02eb8ee42511855f78f011d12879aa2b6308584d8bda128bed93343196c687cbd2d7e0f4a3180ead62c52e080eb24e1c652688d895fc6641ddcd9896ab7b3d7730b943dfac73345eb3f9a478eb33f0049329c77e1e8d8b9349fc24a8650a7736533c2c235867ec333b9ef64587e4902a5170ebb31b31eccb5562fea00e5df79408b7de393a0cdbca6a39febc3f2427a0a79780f2234e33033eb9975c30c436e54e1eb5d3836dc4ed5127f74f5717991b4dce2f0792333d629e0274916f7369e2eca149be65b0431875df2c811da2fb576ba28e047bbd5b2c99fe83ec4f54c1f1cb50814821616f81a42cf3c81692320972eefed4e79c124ec2924ed01fc0652f54263a8b4929288258641ead65a6c1ed3a68c617d16172ea7cdcbc7b33ae57647d0bfe842b2caa48b6849e53cd4a6f2b0757da6dc1b40abd7b85ca7d802003be9a0ff0c512e5d18e449614c6ab5e2058ea5aac5c6559d811968c724d5f0d351c01cc0097f0a7359f653d07ff4af8af0bde5d3c382d9bcb3beba239dae63c0d87c57f5f12df8f85705008cc33a369815ba9535f003c3928ffa4ea6f718c65b0ff892d7f1e7f423cee4e65f13aa9dcc27b8f73ac25e54be539d5fd97bb33772ea1007d2734e93c432b83a4890de48ac0ca73d904f7e5ab3ee27ef1e8abb61d203fc3fa9215501dd8339026174b2e08e1d7a5d79aa2d4194d25d4918082ed2cb11a1ea13a42b1fb9ec331cedbb9663eef7371d7ac5103590470dcb52b7008339809ff2756dc210a41350c1124c2d923fc58846a0c6d977d7170a0aab13b064f0572deb7c24f4e75513e0503f346875037cd0a91174e4e3b39e8275d84b9649a636b599e44b1499df47526aad425a352df5f906b55b0954971e1bc46bb3f95fb38a8b1f24372ff49b84559b034e4ec69b9b226a2e18c883560dd965512641eeb63fd9e97ed1b59abd503cd97fea7e30921af8efbbeca8c2eb5758cd7dcb4f7e8fbdf92eea38371d089ba44c1bc93c36ab8df8d1049ac90796aabdf9d2854b1b0bc4f55a3766a68fcc6c0219a85375c85866758898fb5cd237e8fc123d011eddcf91f6bd3f372c39faf246e261931e2c25661884b983670a594838d822f771a0716f2fc17f76d236e6d0b2e8111b75b614ef36af0c0128c570b6bd8792edb13f540a85c1e4494832f56bac32b64f7ca6edf1e57da9cc9e6889bd761a4617070573ab1b5b2ae61a0b6114abce71df2af1a3b71d27ff7468b67f8fd83b52a3932ef12bc4f643696275b3580bb40f841ad4ce7c18beb1adb10edcd74e966822339e8c7ecf11763cf51d0bd6e60882675d98eb2fefde510a90294a01abda5bc0d5f8d0720e1e08934cc3db3f9da3ed9f88cf15fa6ae941fa64245304bbb23314008857dd437fd549d514d05ea19e4fbe80cc9a9ae6aafdfd1c306cdeae921798a448bf77670c3cbae75a22ebc8f86a8f2047d316fed192ae38df323768e57a93b286763f24332ecfdf8f20bcf9697ca0779568fc4ee005e89bd8736afd59e6fa1e37ee5e2f19433e73d40d7b6b5442723f9b4c1b18057e3d7d751d577be9a117a9b27fd155009f6dd9d7d45e832c65519eaaf9ffc024d4f7305823e72e74dfa4a1bdc6d1643689e415c3b166bc3ac6f41d6a1614128bec447272808691cf804ef12cde9800785c46826a7a00bbce493fd76b1620ff9270590f3edde9b6d8092808eef3b9f6bcb565c07ce2daa0f41b68f0d8aced6e9e427f37b6b935bd984cc8804b17a5d66ee1efbcc19d78d301ab87452607a835f8b39990027af4f5bf0342e978255d52293677318db7a5dfbd3cf33e2809a82b8fb1828318ad21d5ba8672d201d1aae38ee986488ca242f922fb7cfe82c8474a6f338b84b6240206cffbb482bc1ed3abd28497c8ab218ea1380b95b527b04ca4fefb2501411c91d640b2d1e1243b0becee1b64506f56feaceccfc1c1924a79762b20188cbd8af10c586093a0de056483ce5671d561fca0c5a77a815d83b4cabdc7dab63bc3493c69072446c5e9444c29516eadd08582db16af4ba9dabf49fb1542cdf893cfd64e37907c39b04fe408921114bf4e81cb418206e8b609bd3fa1fd4ef1fb8121b2e4a562d0d1e650dbe8015354b307c8144aaa37f5ab45053ce949c672b12b0aab3ed9f4e9d869b962d0b5f602860b6debc2c28aa54279cf475e04b9b9599df7a4f63067cc26eb483ad20e4a03b5e901463acff487a79e6f5369b05afb7dcc05185f31b0d36f2109e7dc9eb4a2bb0b6626b8fb05cde96ece1f3e22ac0816519cfd3706d26dccaac4de1ab1058cfe59f016c1ebf33bdc1a3f582175509202527cb26a02ebe87f24f9642ec4648d24c91893882aa40edb1070ebaaf33be2dd506e396da5a4ae5f9228a34c5f9f34906947b737744dd6d63a7c0516c0cfd9b64da0003623c00947445ffd30e86a9e9aacbea23a30b77739d139289aeac0912f719e66001f13dac78a31f2faaf4fb85dbff6f0f3ef32733c48f992f6beb0deeead2a2db64e8953471a1a5b4d3361d0799bab844914756aa450f6f88434ca500e33bf67efc394912915bbb9c8d985ff94d835ebeb7612f5e4654cbf712ce0381ba0a0690064e0e974def0016482e90a2a4c9c144bcfe2f4e745d65293e2dbd659d0df269036beacdf620da87df10e58bc59c0f929597eeae6aa1b3ddd9d69d6ec2bb10ffb8a57c1f2307d960cbd1759763a3acc0b4e7eb4c7296b005ff4b4a9c44a9af0a71f9986d6c0470f56da6a5f6d7e398080ad0a77149da318d6d7fe7798e14860062dea44e86fc2696da67824fcc397edebd585d40197897dd5e7f6d72a495f3de7ca2dee1020260b5ba286a1c26de45cf89b3772c7b52e654521f4ad2e822f4f6fe648091eb3bfd99982ad067b363741030e6e6b97141ced6a1f1c684d77bad2bfc773d3958b948e798796991c0831e5e7086187893b7ae85520dd1c2834933642568629eae783d6c3fa38420034fe4eed5e17420d07bd4bb53b6b59a67fbb4fc4596a5926a1e90958b6753e34de6b7d6ffa2ec522a8b49de3162337209ef0f6c0ed87f2309901e23a157359fdf024e7e23dfe5067407772d788da992adee707d20bf4f1637f90303e6b5c0a89bb15dbdc26aac5d1d720ad4f7ec0a9727ba29019b0a4bea116f308abab2f8f261617522510ac01f09a584ccc101c7eac36fc735a05db8b635e79a6695fc694420fc9f4cebe06941ee1f3256dbe721857e5f9720c6f3daa95edf0dcde3778f0a3ff77cb8dba16dfe5556a875f2f00e2666dddc66a5747a016f7b1d7195f1041b2cc54d30f4aafeb4a616f7a2209ffc718d9176643b7a44a4535bcf3dc96cf0814490389d7f368b7983497d665b91dfe866d7e7bb29154d2118d382a65d8babff159324f3b26b58e71f736c1f01cf05f961399616bb034154f744c0a45b24f7526b1460b8bf8525e053bfd40355276fcc4f0579147edab71259cf18354174857f749bce3b419b4ec14b0685350a1060264718b6b6a1decf35a847d3f69067cf2420a02c45b7f2d902d08bc262547e5dade941f348ca1535e2e43be6e89b789cfaf6a42a626f3cc840a0155bbf7fdca0b7448831a72a41b08aec3b9fdc4ac42fe1ef60d0cc55639e615eeefd432adfd0ff4a281f2e470e96b6ea06aa1e7652efaf262453ea0eaf95acf0356a72a382a807ea32e6f0fcea70fe1c7f634441b344491e3e93b9786922a43428ef9683e7e58a58110fa7e794b6980b2b19ab95b369fd8a991442fb7f568af1ac0cabd9367359747cad32fd068e0f7c30579a3e3ca05e8107cc201bdedd61e8246435e2b95dc9f69268793411a8ac5d9d2f5118fff3612fbe0fa84604f8625fc3c2c44db5b7a97c0425107d52bdc25321b3e8e42df60ecd9aaf5ce3ca2cf46873894f144e6e83ebe28137e24f12f5f949652a598b8ef52cca725936fb6c603486738a35695af2b3eee6befb75414047f093a0dee21794a72cd802e7897d493821ae247bc32a7945a07fb24cb39749a01ef8d82cb7e6d1865edd2d74ff2214dd40f39bb53f077f336772ed8dc60b7487c44e0eea989ce27e527e24aeeafdde81633551ff3a86fd625a4e7acf632880219281bbf1fa49ca0db1b7e0b10e4dbb5a2a7f5fee251f431f63750462ebdc3bb149d5450d82b02d5505a83bc8b15d4d244a3801a51a310444bd5c820a3e7f0cd25e7485328153ed44169532548ec700abc25d2d2347e73f4c24b9f7c13ddb0594bb17cf6f191ab0491dc480d940141f44246fe5679398a191534100437bf6b9f3dbfda165ea8900895bc0ff8c5115f459cbf214a58cfd469b9d3f774a43304c017682346142e6899440df7492dc9dc15e76d98a0d009aa8c30a3fcaf3c51bc212f8b73738815de33f9c9e0774a6a21b81dd1c722e3e4d9c70fb512c69f5d033cf823298dde66c167d23e23cf9d7a537f7dbe0b0140c106bac1ec9ee5bb72d93ce6ad69238c8c7d4e43b6515302e7f4e1ed6fc626b760907bdce0b0136ea2ce54bfefcd357bc6bdeb0a17199958c4105bf8a95ef90b6c2be763bf38581f5644783e1bec24927b1b66ea981b2ccc3379c664c4b8d6375351c5b7ad653abf34b601051be414dfbf0def0e3f7ab49a168f7f8925f9f087ca34f5fb8f86f1cf16e8ae3212d9b769f5aaf56c58e99df738146314c73d1c79dc7cee7088f0ede345b97c12aa7ee22f099138db746e0f05c01beea747d5a12f1ccd5f78dd9268f9148507313ccfe1eb10bf0ed6b519d5375c46598151a881f330957ccd61748a5e9d2f4ec1aba51606d36f8e0c697323c61521234faa4349263bcc77923caf4078a16695340a2825d77d8f6f9739eff11a60ec203499bde6f4ab90d404630307c07d4ecf5ac96c31fbebfdad2bcac6169621b5200954ed8ae440922d2f300a4879eaa412d438d2e5
These navigation menus can support any number of subsections.
All of our themes come with a several vertical navigation menu options built in, which you can display on the Category, Section and Article pages. Because they’re built using our micro-templating system, you can also add them anywhere else in your help center.
You can display vertical navigation menus in the sidebar of the Category, Section and Articles pages using the Sidebar setting associated with each of those pages.
Our themes offer several built-in styles, typically including menus that display a combination of categories, sections and articles in responsive layouts. Each page is configured independently, providing a tremendous amount of flexibility.
To replace an existing vertical navigation menu in the Category, Section and/or Article sidebars with a custom pattern:
-
Select “Custom template” from the Sidebar setting of the page you’re updating.
-
Copy-and-paste your selected pattern micro-template into the bottom of the
footer.hbstemplate.
Vertical navigation menus are powered by our Navigation extension and can therefore be used anywhere in the help center.
To display vertical navigation menus outside of the Category, Section and/or Article page sidebars:
-
Copy the HTML hook below into the position where you’d like the vertical navigation to appear.
<div data-element="navigation" data-template="sidebar-navigation"></div> -
Copy-and-paste your selected pattern micro-template into the bottom of the
footer.hbstemplate.
