Article lists

Patterns
Usage

Lists, despite being simple, can take many forms. Our standard list styles are robust and easy to apply, and when combined with out comprehensive set of utilities the possibilities are endless.

Built-in styles

The following list styles are available in all of our themes and can be applied using theme settings.

In addition to small differences in the overall look-and-feel that may exist in some themes, you can configure several aspects (like the number of columns, style of promoted articles and excerpt lengths) that will automatically be reflected in the template.

Bullet list

View code

fe158b7ef4df2591c63b4d73af4d380aeac55381aac357d041ef4a317775f2cbf758009e874d92ec9bd5f4dc1b1922a0449b9f93d1b69dc38188ae837ef40bcd1297602e7803298edade75c5c48e93140ecec9f840222d81afb593eee9e76ba4537ff317d179cbe7c9dd2864f3b42de692de792d70e63760be529c0b7a981bbc3e1b772d751e893928c557e411c029086e0ecaccf078ecd9e6a918dc053394761989dd86795678e18ef96d4b65247aaa12ac6da65867f3683c8950a63783e10d4c943ea74a6958e06b0c88b4b772ca597897135ae399af9893d5bc0afe199fe06fc249d9878fe9471b63c8b5a1b21c3f8dd8355e869b6dacc4d4b847a17216935976600ac6fb331d3bd372d4fcef5c83b885f9777528c58f1ad0820dcf4192da753773de8b1b7aca9e498566ffb2d762ff74fd0345cc5f84bba94a823e211deadf0b7de4a26178409e3c031e60321e394cc9a273103367559ba0a9da147fc6a1d47ad5a56a7b45da85bcf07395d05568b090e52d1329bb3bfc4f8e2c639f7fb88dabd4d5104bdcee5163e3dd86a0784ecc03d3c363520c33a9ed5bb4f8ff4bb875a7e5127ebebd2401434c90d4521525e3a0f5c40c7c846de1219af17cf08fd8daebde5111a4dcb7b6869583d35a2f44f101f19dc206fa22b02b33b0025c6d0d092d8d8f9cf003809d8bf26d6c29c3fa58042e260a1b55704ae18742018fe06752e9d6ac08bc1031c10e0f1adf347ba56331affdd6cea9a4da677ed3882eb3b2f32785c9ddd04fd0d1b5ebd3dde3d5a1abc222d07123d74c438a32b9bd13732454d135dcfd5a14ae688b9dd448e3ed31863862cd8474a190ca63f21f11afd6bf32517a5b67a0a7f94d35feac34ccbaa169b83d305f63883bc6010dc62e58d020ef4b3b06b79a92f6a9e0de90fb8f377623ef9e082745dbe1d64425837d9925a3644926ff6750d26e3eced09fa1cc5dea70e15316f1dac620ff28034a2ad49c6b869b125a600f67c5e0b7b85f67b38fed495af5f377ca3a85c47f169f9d53513ef24df32ff379bba28a4f16d216e7217d0f829aa4b6453317cbd3b691c8cab648e7623551ca59bc0a2cc03bdba62ba5ef0c18f55fed02c1b39316160bdcd3f31341e22c173bf8ba62d026e8a4fc8b3b33903d0e6f8273ceb367fba2914caaac2ce97ec06792a0a31f04a190520075804ea6deb80a5c5559f46a0a9a6b3f20b9375f7be8fdf3b798d2fc1c4dac714213a1ba47839e477f6b02564713f1303a4ac6fe60ce1372ebcc28cba11e5778be2107859d67748cb5e5f7e3bd18eea51bd124f8fc85781abbb4bdaa00b35f32f5721d9f7945e837bfd13e9db5cd5abdd7d4c2ff7e2ffa139be145acbd2683b30d4caf05a3d606ce94c9e53ec5125baf65f5cccd4a27d475faba710f88f7f1a3126beee8c991379ba4ebf5f8be957f6fe3650bd24d75c63623fc055bd8d79005bc1c85523d5d28eea8c437574e851a8bd5cefa00c01d160dd8ab9847e49d5d4a8130f38d96738f452ee4004e5ba42b03ff1c000aa47ff422db9842e66496d981be0a2992e5a57c95465a809c7b5e1814a9debbce492fe6f98c3b700a29d5d08cb36645c0de3c665efffba74d1291e16f224644352f598293648a6d66cfd723be52238d57afe1e11fe7d6eb9fa31a7e8104a0d2a1b31989de668bb2093305cf26c8aa325eb8613c9da78da991d96839e95e45857d5460d5221ebfaacd3fc470c0c0d2f2737e3d539369a4d60df402f56367125dacfece58c1d89a19bf9a8825cf008ac116d1cf9a7ebe5923b0d756ef696ac1539a5d4d6539d37e0475e1393aa5ad5724bb329984005f36f5861652eef1ba6091c38a6f19b0f3809013aba24c26a47c5b0d96933a7170a9236b3ee6105a89ad7b3316566ae20cc489de590162e0631fe90238dba85e5edb46d10ad53b49b032b9986e0e558d0725f05761a4681d5075f52a6c0e621a0b3d88427bb00421798ed6cd2ffdf51d319f5bf7b5d1fb86019061ba057d9ccd540fd544bf8517b02ad0f8a320a6c80977aa159e6e7fe84fda2c4787f13d8a30b6c41dc594775bc95a0d6c6ed0e2cf3715cf6da9a716c2c90584af2c170442a45a95a48ba0be94b1a57a4769ea5304ea43cc582665843942de435cac1ac02f80c151efc2d62c5073082eaa1ee9b7d9240e326e93d285809ea4765ab9bdbfd804910268b22b861bff02970dd7f7e0cea23df9bc0887ed132208544860ff99d5bcc5b76e8fb682cf2c523c93d2583986f4a414fa99caa6fea9b56f14300fe2288cf231778925f702e06832a54bbb62d2e382dffea26a0614fa7f10d9060eca685eaea6a40759d75421f130775783ef0532ada130dd71ba0621245e787634503b8736337f9cc6ae3a9546804387a422b92da44afe328bc8fa96a9a1285cdb0b064e952d2af84ea42a4a18d381c996ace6eae43d6eea7e2f8cdf9c62c3fa87aee99b0b343f8bb1d31549ec4659d5cb22dd45aa07be3c2287cdcb99bfa344338d80f96d0022270b8a21620cd2ff0c258c3c1a05baba9e27ce693e2bb5905e064984038e3f4280dc3857f91667b33b4b0ba8a4906e8baf292f55e2614c5ac3337bba5e60ba68095c5828428ba8c8dc15458ac0bcc784a5ea7b1e5bd460f192418c12da34f167ac24fe7ad8c01be6eb5e120fa247e138898123d59834936da7c8ce9815db135ff5fca4b29d77f24a2973ebd96217d21e47a55294eea9f437c603ac92038fd262bf91107d72a353a41de0ebd1e39caf39c27303320d049ac956ce848e8c3e933fa924ac6e3fadad218ad16cbd4ad474e231f66d98868c7e466541362d1b4131c5378296e494917471185a1b2b979c23947f7a371ae6aa663244c2c4c0e270205f4a6df3149656ffd8411a9dba509201aea3f233a4e064d015bd1b845fb8daad8b339c4b876623a6418b47ba640af4d3339874f28a76974286fd2fa1aa01868ab4dd11e417175cb78f63921285bd6bd702d38b7a3310ab861e201835be4ac53e58a709f0f7dacc05f05542958a158c2df6483eff1a2b57156683869d8d068918d72ad386e4f2a1e95d500683a5356337c411e382989896aa49fd5864d76a119265d8630d0765184605819603b6f29511d2c327dde2b1ade3d100eb27c5b762d3f460e2b3d7ddb1ac13804e039e12cd0154703cafb2021b7880332b1817e4c078d9e1b27f6159a931ba857fcd80826ea93ffd267f22c8dfd25a45757d41bc509f7e60a8e032f8b8cab9adf4e893a60b8ba8f3f059f9d77e00cd2f19868fa6f9332a79c673c17b777ebe98b52a123e423f0b7155e592b6f048be36d3766be967184c527811246948a4471e827ec1e3358bd300c2cd4d0b03890aab3e1370fa6bb57a6cecac1bfe8bb2857f2eef0d18dfb9bcb63753fb7d2e255cbe9c9e5c395da47d33b649e5322fa072b1e3b83118f2f6a461c8c64fee0bde30305c43e8fe7d2ac63e295510518fd6b75e7c3f45e30674eb171bc061872773b81f2265953b6e49517c2e00bc0abefecaad023b1947cca49ce81cc1188b2caaa6a2c9f81fdd6307ebfdf2b1924e4e32a9c0061e11977c46aae5852ee01bedb543ad6590c09fb7ed2305849a1d9eaf8dd24ffbdbcdec821cf41e3bae8f8841516595919c1223298db0571b308c972df56238dfbd848b57ee2cbf3b451e3b03d3b25c4eb401afea25467d500c08ded3394122b549b845f5cb55bb4cdad8fed65aec89466a1549378b128febab3d1d73bd37

Unstyled list

View code

e7572b4c5ea46abca00fb7b6420e41dc8cdda3f2a8879979d50022cbe5a131f854404edb6352ee4ce0dde45683463de3ad890ee92a6576a31e2a868b1ca4a8e2d59f1af95f210cce1c68459754883366d0656666056a1a9da4182388cb5ccac4f1379942f055462a0dec1e2a1c34f44b44683237e8d747380eeb41359b3d1203ce78ed09f81d5299cc1890143bce4356dba14454013948527a4ae57195a546b25af0a07f3ff8a0ac815b0a3d75c4216752d81dc3dcdb40f2eb67259d57ca5dcf0ed73bee2d5a3ac1bfdff2bbb4769ee028b3365be52d0a1ff490d94d8c3361d89404ff3d925c9de4f00a40ab7de0b42bdfe21d31436a341bc7595e4ca254663f23524d1eb033b2a6de8a5731f63a7e2a452cc599d1f425e9973b259b0e9cc54fa5e62af10ce1e5ed16c1b9489ea00fd4f2f3625bc87ddfedc771f98191c85ff1adc05ddd0c2c345cb42c8161ae75f58cc697ff484aa18be4bd8459c5d2448b4fb834a179b8e5d4f2bada3e5b1e9c3d76f0602a72123cd498c54935015df778de911627727e0c44347cfe1305e5d580a06bfb278bc659fb9adc3975e6943add275e8b1fecca1cf46e1a60c1354a8dda28bbe5a09973fb5e61d8dd86ce74375e01beb1c779792382a505e5a79964a613544f1df7ddb05a5621c5329b0fb967acb35b921c358eef6b1e12c6980ad39a5cb96813b705b942b5c796a778804403d0bd3eadba5e65951288e672533ec4a9080ed3c1eec14bc782123afabc76b389c13be54e8866bd48c7685919522efaac59eea4e11736cbf8ddd41219d87cfaa31717851f1e67bb3d959578537e49ace18df7b54aa73b33f71caa3aed86666cb546d1dd1c0ebed15bc88c3d7200fbfe20b958a09aac7dae93592cfb1135dff8efc0a74a8843fd250ad6452c0ad4c227be0f8b810703d1275724dee12629a539fc90a32bdeac8fdf7c7ec1ac7378f7115e1f9b4300e58aa8643c5f08b7689905788755ef3b56bb78ba1f11852db8247c0e5455240bb78688a4a103733dd26873e6b2bd4387c8da95ba4f0056be8d41d865fa46b4992114a82634f71c38eeba0fc8fd02ce7ba853c530c99138f7af1f1cacb51854c02cc1b6ebc9c140bc017de783f15d2f98910ea198d781ce2b5423c1cb91f877b0b61d0009563ec53f1b06c4fa068cb03ec7406c828c9b85b8fd35a5d6d3c48956dd1b3d4f761dfaa597fbe5d3862c367f70fe5c86ced88ec079158e22b43d6b74dfba0088012a042df47dd46028bae8d715d829badb0116ae3d9ccb0ff5d39614845dc15d0ada81a10f6896a11c10a680c3fb828f4f405767577ad6a8116534467e54153d723872dad5ae697609cf3ffaeeeb52be2c399b0306aaf9f8355704e3f33f346ff30980d0e4fcdf6c82668c43fabe0e0aa1578debcd22dcbf6f4404bd53f4d27de50662b56d4004b7d0be6113c770a1e10467a7b5644806e9ef675b467e7ba9bd0cd41a229d7a652a8cd0b953952288c9ea0b2f9577206e051b1b407a1e890f4f927006f9ed972fb1265eec58d74073738c8d42d46d01a9db2d75aeea27ddfdb15403e204e72a1d946da8d971dc30886425225761c19677b79b1b81387e03317d435c80e4a15be0aca39f9cd53dc3a5b4e1b05fdc878958c19b84ce309905e185a58aa9fe6e6cdb9c9dd31b6e09f5ada6dcc565f3aab109167b2655b54b18be32a3cd3401b77f89a45ff1f7ca621caee0dd090214fbd443c4b7c7b843d4809045765c6b0f66d8aa0724896af386785eaa0df73d069bd8742bcd17b17a1497c723a7d1400070282fbdf48bec95c946deaa90c6e1e97189e5e0997a08652be6494e5ee720965431ae7f985843a725a5890ce9776181ca21284e7dc413ce9e935cb3b01785a30c013c0e6e153800017f8865db79605ffd82c16aa1ec24871e0194e01897c26f2dcb091e4090104724d63336e83e4d4c5a94b23d15745ec0f24d3ddd3b46e84031448860f0a181bcabf204047402b7489bc216ce802d7533468f354053f039f73568cb9b3f95ba59571949a1d2fe1feae679aaba2a7dd5f35bca0a712a8520e1fe15749f47fcdaccdb502950f1153da35cb51d1dc4b9c4200ef0e225116cf9e1095fa25493704d8777a1a84b14e5e7dc2c885d2e751b3b59b1d074878d4a409580190aa24273c31ac6575f3ba33a77d54aaf8e8e68175a23b469e882ff208b0d8b6dcc777e864efe9273f88d35425ad3616c42e13c6901fb80a93db5019211e45d77c00fe292b746eed998f07aac8b0f0eb24e7d4972c6d32951a8190c312d387b4d8ce843898f1ef15c90b039d60ef5c7e8b8c23a2a91d2573700333729aba3380897b1bf474e9afa455e9d21c27839e447078b69cdab16811061dfa9116f7f302b06257b4638b44c0335c1a00a716d40dc0937944bfaa4221e786d9c5343c8f249624e8e60706541006a696cff90a958de29db9ea95e938e1186c08748c134f5072bc7a98c24d2b9fac69db3a3b8e5a6c9f0e17d87700258d92d63d31ac28819dfb1d05f460a2bf6157d420648bdf58a643ba82ba0be8d4dcb6214b32ec72616d34957b370a382c9904abe1fef38125fdb5d7ddbe3457c707e699def87763e9f01f5678a9443efdd10e879ec78bb3d469f67e5a5e18ddc906158f5a493b3da8341fe49c30c9b2a19994f343f2fdabdf4df00bec0c25bc6826dcf6ce8d230cdc3f49bfdb59c922c220d04a1e8fd25b42314230ce0f060255e9503ac793b0e58a3f50fec85cbf0c2c2d86111b85a279ee8d6a43376b94fb5bba9deb7da918aa8da69595ddadcc17f1abce61884c29e211f39ad13b15e5bbdde02293f56811d14842e888627079a4787729bcd006df086cc6a068f2b3e64ee1d03b1b8a34f40c780a04671186af57e3337dff8207abcb5d14b58e775f0531090337658571b2abdcf8ca4c06a365210c48de0560c6f1ccdbb4e0d7e4a05cd07b75b0a55f96b58a3300350a98c29b065d2b17fb1aec781a74e8ff9f3fc238756042042c078514aefd9a698517b92ad927c5c268e9733d8d7f7d0a9680c73ff8fd9d2240fb81252ca94096f158fd0caf3995fa4a89be31bd1e087ac0d27220d4bf1020d6548bd61f4587e316bd71db9be5903ed9f257ffb7f019caf8ea326df7fffd87ef582c4f583b5c282fd304db7b901da871a4e5c0a57624949db8836185890b51cba38d7ce28df573c741ba99f8b5414eac2d8743b5ae1b3260c4c947fc788330e4b71f809df4465890a6c9cee713fb34c5572f3a27200a9f9d292d3e4cd1cc4e09e0ebdfc317887f2966610393636397ba0af4c546e4a8b5d0da62f7eeb881304e4129b44e52578c90ce76d26dab16e50eb12e3d723f47ddf892df2b47e7b3e67bf90bc2f771101a1fbb679f9f728f04a44e0399cef4aa97c051c80d121bd9e6b8f327db9e6408debb1a413097c661155892ee58da9433c182a3ab362dc1ec8d03996adb68fd213037ce1ca701883b099a550e00e6411fb17da0974b25063998ff8b07d46cbeadb9d9ffbf6e5694ebf99b7a47f38de9757316c29fcae891a022928d53cd1befae599058651381838d60b682e220d3ecfde49c5ab61014ba755c99956df6531ab764f97732ca736f41387cbc0657f79465441cce0508cdaf82552a75c59c1bd3840e56e60045f793d0764f8e1abe36dd281cd47605b5a0647e260f46841df79b42d6225a11bd13e82cecfdd06edf0fd70e26be4ae3b8731968569e3241792b8d13c97905aa7

Bordered list

View code

f5206c5cfee25f8b797d3822a5d3922577303143891b672587c4fe693f60d18efa9df8a81730e50675bea953d8dcc963c0b0d0be12b788ce67b6d1627d305595b0ba022581ce66a169c312ee4db38e2d06faee9ffabf18b00726e461411f9f814164667fc83b570b52b8f84baae3272d27500c455fb5f1801fec07fdffe6954e5720b71475a012fee1498a6ed72b3f3b5bf48267b7b3782155fd1555227472e1f2f9e6d433c4bc1ef8e2a0b42cff615329d4f935bab7efec4da2a2242023087136071a87fe54458fd5b5d58d6281747794f5931b95827f6b21efc88e724e2c9c7b6a08ac8511a188e7502b0eb970e90ccdc5d11589aed0b31b5dba14f80446942c9d265d07fd2ffc619c36791e8641532f30bc677cb7dea9c9e53d0140ec032f827379146dd56a7ec55ab9bb46822e6bd233df8fd96604d7bbc9409b9d707c30a27f47989a29bbd4700a10bd28e0f953d8b2c908ab94d5fb64d6ca07bb7b238096dd4b7857d39d9c56521901107016a91a5f65f6f2f48111585b49e48b270c82183d86ec0633c0a2d4f557c7bf5bbdb8ed5532ad361d96619ca0968c7901ddb376b37467c8cfd0d207e7552b6ce3b3da91c6594cd68ea8611652b5b97548bf66610463c17ff13855791800bb8048692832e0c8651d016d07a6f2561439d68ce4522cb6a8ce1bc99c4d7047c4a04f6f292265ef796f09b91dd75ed46c1c3c55614eb0216386843db54f4db1952e6e5d611ed163302fc43864a70884624acb6d7f508e792ab3d26437c47c129c49aeb5a66937e21b91e3cd49ec527274e53a76bf7e240852cf4775db0b09b9b618d7d5beee31006caf26af20c257d37776057912f5664f3b3aedad0ebd070e4b9fb8f1934544d3c7759ed8364592b13c862469a1fbaa6f6a236c1e22e08c825eafbb0b7301e75c9a062b6e8292b00e15b04cd53e733442412fd6ba3963ea823eca771f5536e3ad59e41b019c42be60f975931b134bd43e2bc2c19af7f4bc6a1ccac4a3f403bdf987eb35fe78b300d60530feb1bc0d308e32836df651df38e8a581a082f7407eaf7d3128f207d563657e065e68478147ae6d1e94aa4d42a3e34b5e1ef6d6576d721bb3008f15dce9c63062e8b40c5b01d1986a1a7a2d804126b9f5676ed2d76c880ea9046b66e00ddae344e7afa972c8ada2f81feb9aad26ff8eef999cc92523622bae09690c648b522f7be032f4925c413e221b7fabac6b70de1aa92983634a9bc3cc3b753c9dd23df9b54f3ab0c49489a0306cbdc996660d634653191bd83f02c60fa4a2eac0abc6adc504236d59d53bf6c2330c4267dfeeda6cdcba83a0b33132f7bd2695e5257f746de8b6921bbff053113540d1a401d2569e89fdbafa3a0f578651f5167d1efd0de7112995378b2d3cea9d7d14aca20ff4bf69e3423c6ed36347ce9b91b64ef3f79c3d9b8d596298973a0c9b56d53df9baed3842cbdeb84e6d0ec5dbfdf2ebb4f17ca4ebd82bb246cdce2b2d2334628d86caeb41b04808a50020a3293c07560c42a8e9b5d962f50e7428697f261f1524cc648ec8d077be8518a20b1b6a42f446e700f4b7e5bdb63c1eeefe1c11b59001c3a9235c5ca3d70926fe8727a38c000d729e77d33743fcc5dc583a59c22498d70a1b43f50503245bc5ed8867370f5b277c478d9e81a323c994d57f46ea9d6e13066fc503f27497cb2a0b420c5dd68fa178f3ecc8620e7d2c0a463e5818d63f1f9df31cb9a2d451735e0d0cc07bc4b5f2e970c605c280734fea64b32a9332d7cee1bd720a7cb2088385e1b50ab69eaef1f66afaf6c9010f9a8495ddcf46c35736da6d5b2b70ee647caf9840c63a382783cc3a95d52cd31882655b7481d559203384fc8f402df786a86ac6a57148a3bb7acf4434f6b8d0d8e14acc3c2a03a5d259a446e93db761d819268574857ba8c7a2ee1c178236da39c97f64227420ace255c4381317f60679d57edba098a58f22a182ea1c268ed54134bbb1fc19d78640cb445a34d8b3c2cc582b100e47369eea6c6ef4f4e558fb1e45fd08e6ddbe3e2a614c881ae8558d1b2112cc43c0c902ae67a4096cbdbcc9951516ce8ba77869498c91913cb11e22519ddd62cd9883d2068dbe2b85a8db001800db31a98aec8b54f20fb864e7b30d2f7458491d6c87da059f3f430a20589652e0ebaaa23529c5a2993dabf447af94f41cf2096009d39af827271d98af4b08662bdb9fef0be3d8c40a9a1eb2b98846109eab601f3e087aa71a4eece33a4d2b9a30ace83f0dd080cbf86da67972b02938e080f297a25ae851002321b38cbcb65f0b898bb2ddf5263e10d9da2b4094e327f8bd1baac6cbf6d4f5b1e663380c1d8459acba4016ffc3e5bf79d6d65d3fb5ab001a0e9ff193d1b2fb097a3d5d14695b29e31cee11a42019d3d4c922d9a420f7b0510b1666d65ee2e1a146cd8148dbbe38a050ffb73a021165c901c89b273fb78b708aac3c7dda1879008e7b816541836d5c93ef2a3ddbbc06fdd28349dd63885234141fe900414154bbd7b968ce9672f49c70b45c1abe97debbb016a4f6d77d211cb3b83e20685d4037f5237cf31a33293310bf718fedc6230b3728df3a6dd40c2303ae7ab623094524d2a87ab29e82c93552e0cd683644b40d305b014ce1b6c96ef00b5c5f4948677c2a1e97e333967d4ce85adcaaadcab2025854ed57bfea81a3c361ef0694431d92785956ed92d91d5e069bc16132789a575e38186eb7cf1bc5f42d4950358ad46ef5f051be3b8007b70b7197d90d1ba8acc20071c0523c03cfffc81614eabf00d4d120aa237cd7e40c56d7898c44d31c9e5f94b629b254ca5eea2c3158bd5b8567900905a8e50191cfe1ec853128a4603ff22d4aaa1b7093e24020ea18fce5b3432acd5efdc616cc192519da1994242866ed8000057553474fb8ad26a982fe8263dcae2e6002363f0b446b45634f1989b38848e5f1ce12290cb6c74cdfc76af8dd490953ee463b5f5e1aa00088b2a4265a961b5e3f2f69f7b50a9a8650d3afe8932d053682744846c01a8316b1b31fe5b383fb204cd00285d13901023cb6f4266dd379efff38d88b083589537aa517eb3bbad32b81b92a6b5fa5ac3e2571e55bd3078152a1133a75db0a09e13609b98d1772c33e5e52fbab0e305a1919ba4f044869a0b1e591d903ad33fca6e5c60d3cc87c5cf2bd1acc8be2ae3542e5218731cc954ae8b0f6187042dd1bfc1aab73b19f1eee2080363a164548c206059bd8e324b6d85eab988094dfefa61cc8731eaf366c84f5e3cced5e14d15c393daa322a5c19e1dfaaf85360a6eb9d04b35e51f2c2acc3a8fc78263d2159e0fa5fec3d251d9a7dbc46148163fd17fb1d6e5f952472a6f2d64d133dd5ed7fc6e4caf9c58ddbe7ececc8b28da8d7f777631152da9fa0d50f366706d66b741e4928629a0933cfe9a01e6c09d816c2640caf7034d246a76e5917378febc2a58ea53f2c61efe7b0ca53bf01c06a4f50aa8379a7f61f5107494224f2649a6b43b2b2f43cc40b4113c41dcfe52ea12dc76c09dc4ef0c0ae52ca819cbbc9ec6d499643618e61cbe0792f5a851cee4f13415e319baf62f3f8fc9a9be147f539b3c4092479fc38781929c548bddf2ed18bf08e07ca02c0697bf4b945de76405c8413238e2dbd43282e8bb7b11e72db54d5abdb0ca71cc2e967e4cbbf320d35c4dd54c442c49b95afe55a72ff24f4c0954e5dd40faec70567856a016058f00febeed8e4867f822c883701c3ee2bdfc83d774ae7457712605de23178316eb8bea697cd479ebecf04ed09533cb973718764f59bdb6cb5ed054873a2d9f605b58654a419e5a2c6354a881003a7b357e616297ab858e9546504739b6816627ce586f5a511d2d15f817fef3aa66469ac527cafb2033fdacc5142761b00b0f68f0153b23904444cb250076428cfb2e48ae9d817e8813f82fbb5450b19e95be2f3f55f3dcd5a13d71e644b229ba654dffeaa2dd7c38339c2e5eb29da68db8c6f7ff53a9ccabfc101c46a80340f2dbcbcffd06cb722998e5d8928df2e38a5df1f5074b95679367590b962d770b49a03f9f30f1f7e2c5c839ed2be286e655ac49eefaa2e6b1db159023a48f8d485d1174f80b839e21f7c3abac91f3ae59b152a65ed6a1cf13ad723e0f1fd87c5eebcdbb6f248872445c537c9aee8e6d9f7bfac00fe899cb936af62d2e34afd7b3cd73efe09fd47f084f539c16f1721975bd2f249cd92124bc612f5891d0abed2061ac2dc16fcdbfdea70eb79fc955a5051f797b5d724251372323b00447b0c32c4e2c9574a5b56004cde876d2359203c8845131aef7af6f0bd01277ace08c5e0ef18be8ae0efbe4d57e754165c9dad4cf4f1438c82ea96ec065538f3e2b6a5bca9b28d3ec530a99cac0be8f0654e4eccfa8653e6418d79e4a652d71921340bf1ad86104b27e9c29b7e2d357a64aa89a26bcab0da13cc6376bfbcacdf38d20694f66b3c93fc329adb2e2ae3a8d4aa0220ec44a8d181675b92ff954ca52a829a217b4344e76303d0504ea16091b9f2a3020a960e06f99203d78f53de84faf05ca35ce36340b590b27a6d5eed559ada82c4f00cad9fa703735983c06620af39b5f3c7fdb4a8f131

The bordered list style supports an icon which you can have appear by adding an image with the file name article.(svg|png|jpg|jpeg) to your theme’s Assets folder.

Bordered list

View code

60f40a3f7c903f46efe47ce95d18db8e57d90ac5bbcb040a0e22bab56347a276855719a219364547684883e71702a5ad780897a137c327e63fa6bb6d1bcaab06d6a4934836b0355fae536144dbe58450ec0dde8127f5b06893d5ebf5b95284ea44b8068b263391634cc66a45bbe9af7c281c65e651d52572d0e5aba2da0719baf371ec140fa081c2e55d0522f40b2a9593c1bd14c88a5366fd6c8acd1b76581fb80ba3f1e452843263159a751f258404e7cea051dc6753b40c2b6e0349e39ac5c61845e638ff8cb89906327f2737ddece695a60532e8f1f5ff52e0750c3b794912997bca6070cecc96bb2199bc907948740d44339f3c59b6a884ded961f97f6acb8127dec273d131190114d05e8c1b8c7b609777e85f4c90eb599db6afef3393f3b7e64317499ec8414b17a52932b3903d593911765b45c8e96dc85c4055c39bfd8d03da96e764637d1c4b6598574547ad1473081eb3f6dbac1423317fd0910f3bd9b7a30fcdcbb6ba8add24dc7c808ed772613175d06750ce4126bd7de05169a684da6b173d684cf0dbbf2619730edde74e1d3c40c302db212d2ce0882c3c89668290e266dfa4e0a40c08894a590e18fa1c428d5de89b11cc8c883881cd8b9194d82c00ec4a726c598759072d2f196c2bbe10e17b120fb86865f39f755f10516e9b728ef576e01b7a1ab5b66eaf247d0246b1be263c1b8e7c433ea62b9b161cfbc04cebf449c69773f5786c88abfe2170c3a75be116bec5d9c58e504973acd07f312534859d6278172e53abb6bf7936c87680640083bc96b3c2890804f8338be92b412adab327d715e15401b321210106a49ce36748abc6e1f8ac9b3fb08adeb91c81c1753247e435b3f6fd9a91d9bc53443e3f0fc54c0d0e69478bcd44a09dbf35df572cae77420c4d69cd5091ec9763c0449583b99cc7244d139f352e95c4943cbde3378e7403de4b86ce5fc2cf5300670e56a87ba32b4b1d8b6dbe5051e23ca09f35f867cbcab0ba38b514deebd3379a39ccfdada57cf867fe17c6ba9457ea23c6030fd2a2bb8934f37be0d0f79df3906308b8990e853e7d43a6278ebfd84f0a4619a1b5a5ccad76d895b08ab140b6fe6ac3a5458c678c47b466c44fa6d786f708e9f4db7defad2fb3b6cae78e947c9e11d91b00828ccd9b3ae4ec6782e3980705a5788aab1b7366c94316d054081cc44b90bbfa37959de31c5f227b101258cfcacf34c9b7208a58c0075d44e53a9be3a96b941b1a5c3bdf08783cbbed6f0ce4c1b8d94736f77aa0f53892af12baca38d52e195ac6f89815eaf46a7364f16f3c31ca26bb659f7baf656b51bc1db304c3e32404622cf80cc8d7ecf408f361a159779bb27251ed890da03c20c8ec6c071a6faea03d4090fbd81c35da98df66113b0d710519b6a91cd1639e4e4a33f102c241552141a5463d960c073fd0cde64cfc6ab4fcd56c79272fbe169c3985993d0c23b2adbc60e09a9755076ee55db1afb2e55c951278dfa38585233af36ef4683bef73a630d3be854854869dfc4c0ab5381d4663af7fa0eb852eb8399632dcd4069aabe9fd94cc6b2085499bd86787fee1cc24cd8991cc213ddcad9dd8a216a64cedbab2749baee788ed9c9d75ada2381d82cf41342a2d09c0ce18ac4f8caca29b1074769d29b82c355544f9f30dda38baec4e6e59908dfad17935ef21c1de092ec6b0af6014896b80c81e074683c2a5d323340d0747d96163963fa1eee85ca91e0201af625a694c634d4993e4bf3050c69edf19b9b395e2bfa59747a1215e2e9d09620ace90ce9d1b969fcdc90ee2cd15b633158d612d61c8295393d4cba17797d56ce340c9f1a9896c30a4934218df9d3492072cb179551c1e7155f6f5b761b994b0fda1a0c3850b8cac9751effe5ff322a5c3cd2d524ca56b94872b0b442168844058d9b0aeb30a861334e47f344426f8952237b73bda70b7d93b17b08c13ebe09b7e07743c3bf803386f8d0876f5a780e4dbf3a223f5e272cd2f31ccd5114cbd48899f39c4b5d773b8ffb4ec013fdd41b1eda626ae567162515f96a893c25bbe6ee1a068c31318f52d0c3cd319a3c0c196a17a985341d0b4206efd88d4c6e47840099bf5cb66a803680634286f1f8b512420a9edc31d10afdf46f3d0723ce2a763b51068e23ae43983eb2a12768d9156519836303997f0e1f0c2c1188ce9915b44654585b4d970baa041dfb0e88720fddd697a979f1fc3888ff86600eb6231c04a94dd905526a9d90137c58f6010e2f70bc1ea76cfe4855f2d0bff73612a19a133258e3cda95bf1104df4a63b6054629b47e447cc021a9a1010ee0a443cd4507f826dce9677e3267c93be65b1267ecbf05012f4009f1f3a38140ebc1abbd9a2717bf7fc317beaed86a7b152ca85016f86b15b249a73e340e2b71ddeae31c4de1843ca93133d1e13c600e04318b58d17a2c9d087d8029ff4f85ce9b0e390bc8ed6c611a891140daf2a3da6a027806c795975d57041e431a6aa9ab305fe979232a6ccdc8ea03683df3256381fd343edcc8c959df64f174c3acd556e735c1eff5a7f71992ab06fbdbfdbd205f8be8570f2ea4e3eeec1af8948ddbbd304f275aea55e6156f819f7b91d0e1f164e93b98adb9667bd43781c0778d6555f18a675d7ad139fa5edaeb70332e72cf4510fa24a7361781babccec4fee4cbaee2193e4a02991562b85d1e3c401c8d9695067faf540f8e7c24ff124dea1dbd5f5b5cb8a58dd70902bd9cc8b73e6b87639981fd215fe0e993e213c29536f898e33cf040f0e13333568a60467dee8b6c71dfc277d81d55298fd2308ee433f5f976a951d6af832ca493492607bb5990428de252f34649056f19310a1c51685304ce7e6d5c91d310eaed7ef4a3cb49dc6af3d34d8bebb0c956804ae888e83d7d27343d90333f20489f900799ee104a52cdeeeaf8c464c997c46056ce812f2d0757f1cd2e2674486e03495a7db0e25e3f6e2d59151df32f975519d253e68113cc7a57cba48224160ea444df37d02fc56b92f3da44be7f03021fa42422d7ad7e68fabc912476e78667a4680f7eacfb3dcb09cf6ecd27e6f27a2c27d068253fd0bc343a1ce0748920200a64a3c7cd7b8b6425aa4fb685369b24d55b3467ac8ee80c6a8d07963ab960144aafeca8753df17004d1870d51441e558b19f186309abe0c1a9ed419676f6324dbaa38bd521d26e864ac19c2f56689babfc37fdcff2f5f36541ea6bf32201968720224bf012030595c9bd0ca35b7201b584496e924e3ff8435310d9954192557f01e8d72acdeed9047ec5ec8b0b3d885115f91a4017f7b19df42c01e03585c441b0535b034b264cf7085571533c91b5ed58f96ca69a9456093cfad7da56f9d7d4d49fb043384be59b1bb915629dd2dbf3d47748caa6deb3dc272302471d54917b7599ebb55e6de3466af41bf09a2e97e689ba2dec638b9bfd4011c9749bf0cb9162595c3d5e216eecf8467dbaf903ab8eceaad8c164543e5e069fecc7fa277fdb2ea005c3e1d01684293880f63d51286955c2c2de7d0a671f18eca7e3ece2863a9c19e7f962df7bc85f80dfb44255ec4faab7aeed7eef35dc76f1508147e277502901a23af4e94fab47d7e4f150237f8d2bfe709521767d091d453b3b5092b387d56e36697bf70c3d824a763e1f473ac6042af7ff87c6524dc5b37aa847f7abf1d38779da82a47ebdbed66707dcfa686861ffb37167e0e7b04a50b91aa0d88e1eae5e6725cdb1a23dce07858f7a321374fb6de155c05e695a6799801ca54b86e4e616017cd51c11e56956544823fb7ad4737dfdbeb4152f1b4e1ae4d9e533d3e7658ae97f28eaee0641d5b589fdfc5a577f94ea489699f2510ea96d901a7330727674bf84a6988a90c1742bddaa9dbb80e37ee96fc463abc52be3dea74f592b62ed6acfff2b666f2651234faa88e4903e825ed3d20ee42ede2e34d2eff8c0300e15b9b8b7ac93788d1d888670aeba70beaf4a522c78b9b4e6f2908e8ab98353fd43df1c49008a8470c2bfb5d6e7810fb45f99bbe36f742589d4f6bd95e4e7791e8c0c94f2cc339b95e902b08fbee51567863b9ba9ff2af1b6231c0f7eb268e997356d5894a914b35cf3890b2163ab2d9991047cb26db8f416b62c4f8c6215a5a5fe3bf7d81ba3972b3f5254cba22d3500e363b639f59adacc89c120a03c1ad702e720cd39b17f0a28c14c175692be1f72dc8b00cbac8219b6b586854ced58b5ab7b41cb5c2e9e1b07a22e3b47e7bd4d496ec22d7e8a6123a956a66e61f47e6b2ad941b0d9e982fb8e470c4398bc8b58d362210fb0c00cd4bdb3e291021ccfe40603c4101d451367ed41878038265fb69bf9e1a14afb85878b5f5a074fe51f27a194e36d27eb327b93b83061b2e3180afd193438f7a94348141002d4fe7804f3f79a0854e1db726279c71b0470383033e6c6358eb753191097009cf9f2f7d56fa89e05c753cbc8bf7ec4d71a9eebf1385493452e1b18e7fe92cf21be8899ca6e90980648668b2993cf7a86452434cd9441e9c41d1e5f3a5845beda1dc162391036dcbbafc46d9436e2762503d2d6fc8b3bcbedaa2b62f2781be9ee95879570df6fc9d3d6d26a01fc11721018a73

Because each of the styles above are already built in to our themes, there’s no need to copy the micro-template. You can simply select the style you wish to use from the Article list style setting.

Custom styles

Bullet list with icons replacing bullets

View code

d0f181147b3f2fc9c6300dc8dac8c7f1765887aeabbf6775b4b794478d680ab897a0b4d0832456ecbfd984c17914cc58d4870a91889dce40a388f34baa14b484106eb58bec8cfa650d7ad4d0e8175ccb9ca57c0b5fefa504066a549ef49fb78f6b5a9d5837745ffe88f435f7b892095e3d47841377513f39aea136c392e54b419041a042c911b7f0374a15aeff9c14aee81dc0cc2c594338c5ecbd3b4e06d2f4175df02ba6d833ce15cbc1cddc24dc0ae52a28c3ec5b2cb0382f63041a84b2e7a06bb27a4c300734fdbbabbb0618be0f70baaa1d40d64e6c907ef42952e29e384ba1a0974b2f891cd298ca7f471d61073c086aec84a08ff0c84acab05a71d373b216f0e12c0053bb07958ec2104ce461993514d9be49f70f9e062566ebdb19aed1c639799bf4f08be6ed41ec011cf73dcff9ffa551ff63a01c328d2ccb70282e35d8691aef2fd6bd6179d4f02e8089089e30a3bc85b917d85779d4fce9bc463088f748ac08d48bc6b4cb62767048eaaecf431f168a926d837d9548abcf211892da2360246c67eb1cd3ad7dfbe21d7d9cedb19b643f7965d1a431ffd281f62e93029ce46ab1ca4ca1720deefee6efefd3c31a2fbfbd731e9925d0fdd56e351d310ceda34037edc773dd7638ff628e31e6970ba0faedfe8e4e6ef0c4eedfb5075b1bfa27ac7f46484c7cb0b07e3e4db745776b171a852e58d9849a82b037b2f582f94cbd91bfe3bb9e9bfaa348f2ff9172cbfb9a52d63d54d61f9c4f6d61e172cb3d0f8df1023de6932bedb2d149b65b16941a2031a5e8e56fcfbb12775f18f1563214c39f6a49c9f96b4b70b2dc2e33b3db53f9e0891183403edeb59d55d8bac4e6e6c3e6c4477d7a28cef98628c01ec4b327450dc801acdc6630caa5df34b03af94f3da1878002b8c47db758ac5b787acf5f178826390ea3dd26093913db806d2e1a4b3bf895f00669699d105b9cc490aea12b990f475cb65394a843236b1675be2f0d159a8902ebbe142b3900dd4628058bfb444b98eefd798586c1f907a0034de05e5369094f6a4271dac71184a8552a201812f935aeab528c1775615a0886dcf2c9885af4d2bdb2770a56ce1e27e5aa13af155778bbb6f75f4d6e99bb7a57bf3b2b467dd1cfe867a7481925123006fc5db33514ced71837c7e37daf69ce6735567a221f45ad4ddfc1242b3572a564893979a2be3320553c2be75110c2322a703ff80fcb1d8e3ee9a984b21e8c86ce838b2c7a7db468fa42f78366ceef0d56cdc5b6a2f6bc256665dbae4544906dbcc052c8f30f4bdd731d7fe23254bb61800c68e35d5d6f83327ef72044916d1e94b3737ca66bf2b9cc43b66bd4b3b1e46c7f54f465b1a74611ab38fd600c74853f4ce98fa501497836d61f311bbe0ab79369f3ef4c685f7c3a44bbe9392056d2fc82b47bec2b6ca67355b1f5a644df65edec1ec705e9487608683db7319d2d2e35debe179de6ca045905ec8eafb16eeb71f2a591c16c82e57da0f1504287f25f8645f322687bfd13b1894b2bcfb4a11a41a711db7a0eece45fc0650356d10b26f4f85622e1bbd4e6ada09dae1705c962e0fc95a2ce432dc06316fc985d5d729a71004d019f16db28b6872c99a24b8a4232a83209497badc9ceb520125499f1e1085f334c30c7a485d45d4204f9fbe9957f6313230bd75d0c3ee61e4533c893743ce1db9e082b4da2dce3c93043b76bef1b1219eb652540d997faf1ef081048859da7a54a7009ac935cdb43c66cbe943fe9a4cce11e8c3454c972e60766bdea3d54d81effa074336a4e36ea626ead100e995bf7cd82c2de73ce7c5d53c6dc2d7cf204d825d4db08f3e11e0c2f7aae4029905cb511c11019439651ef894ef407f2e97e5435a4986d3dbc1dc504f9f94a5c8c0bd93ac68badf3d4c456e443de67d0ad7c63d911eef4bf606e31930f704689f6981d93b0f1a1b24524afc46035beb508a1048d615e6ef30c60110dd53c163cd916b0682298960f0352503078d1dde6b62697f64c768b37689cf6645c840ea8a8112191206238df02886b3a46dfbb90c478132a5a92a0ef58d0af1676bebf2c63ab35b5150028a2d4ddb4e1ab119effd09e13e9519931b08f3122dd4982bb67b18724d1fa159caeeb5c165859abafe134d84a40d8b2a0859e6d7791ede21ddc00d3bb3f458dd65501535b194b4b4bac5b131ecdb01763038569bb31b1b0b9d1c66adc2358330bd0e47eabbfb8024d50d02cc2c3ecb8f000db4b4ff04a920414d68cdbd69485f0554ff1256af9abcbe4994671171086a4f08bf5ccd932784328334a99bc57e8eeccf4cd86521abd6b4e93010a7f3e276607772778115b2c2a37854fab4224ca40196067fff88fd04f7472e54361cdaf4c5044bf0f00e3f3a0eded95ef9670fdd838d8765949dafaa017126a613802055b59ee016a534243ab598b2fdb632574699cd71f50bd39a371ae0f82a56fd5046b46377226a81644a68f24c9f81afea8fb91e75ea2a0cb78a42b007520436b6b95f2295f693e52c57bf8a8ab4d3e3f21ce84a93ec568f233714a1ab5233c73a052994041a6fde68f869d81f6e95ca51bf2f82eb6c0ccedee475356dc9322874b12e671c688de48332293f2447d35fda27e8f569491d7582cd60965c82ccc5d64f839493fa501e2ab93615fd8afb29f369fe60603d040226e907ae92e054ba4b92c308fdcd43d4aff0ff8b4a9710bbb5a1ddca91412d9d9dae767bfde34a9983f969d2f2f535bb6b3ac5e43002249819dcfbd83169f4a741834eadf0c3a1e9a53d8b29ef5bf8dbadb24252b18af5be5aead1c577ebd91ed0d47f12146c36bdf7c18c86c7c609f9a9e33fbec9a3b16009ecb35efeaaf116e14742b5b92dba6ff8ed2888bbc3d34cd049823db4ce80f5208b716eefaa8647efabf0ad21e22d45776348a3606192ca06975c6a7ffe059ebeaba55449711f60486efa24aa05cf69bc92a53ca2dc9502366e0db7d1687e7bddd051e0dffd77a88dd21d8e5f02ffaab94844d4f5b7583fd6b4586806c34f7bbac59c933370c6b175166873c88b2b4af2377486b72d29db8ed1de633699a36a1c1bb281b496c49b93939a561e52a782f604247cc9ff99b19efae7f0adf9886dacaf669a0cc5094b9af34f0ea72d38559f60b7a37e948a949ef173aa9ca4f50cd7eed2750bbb3feacbef126d077350e78a4f3c2c07948220ce9319ae230e0c4fe70dac5e4568439f466012485b9c5bd135863ddef3b53ebe21fb6a4897e2406e611cc11e857b51efa138565289ef3556e6b59622b7716048f531d82232ece1f3e4cd532e4aacde886811366cbbbddab2db37dbf0d61f9cc47b17224213663c7f58892b5a1edfd9ac9f6a393f4d211d85eed5be805ea4d40fddd12edb3ab55f3c1c799e2af475c123806e405a1a1af05be55cdd54bf63abd37d97bfff6b3221966ff227831d49c5f54515de4019fbbc3a9bb7fda2dbcb1a4e1695bf791b17f1e6bc91bfaf15d997b66e14bec8aea17a310514efe25b57f8c51b47d8f7b1431b51ee9a69e448e02ccb494253fd1ffa5eb020140cf3e810226eed21fff9459a87f5fbbf1a2ea27faf6a2e62bd5be6ca29aac554c492cbd2b48ec0cc13fbd0aeacd9eae13d74f9192c9bc2866188ac8020768ebcad375f018048e897d00c183f5a5e7346bed3696d84165943ff77c4f0d29c7930c5c600dd2a8a3d56872cb8acc4aa2c990f6b384548cb60ebb0f6bf06d93f4c54856dca9e0ee59b7a4ee2a86464645bf2e4190f3d14fe13610ea95c7c6b00a6956c07b6ee5df597556ffe90fa6581092a522bbea979808fc1637ffb5374efcceb79742495bc1769f1a33443d72a6949ea4a1541273b0fde3ab7be7aaf59bf8a10c883780897acd4999abe3e24d8741fee3ae70dffd769d0d397ab2ad165054e599dae7d0f7372e26cbf78068dc24a7f2b30aea3d04cf44e319d9e51cb4f5a938d8ba8e3becac3d1d30c3f0040df4a99c9a2263518af7cc6b5c197159f4f4f30cd0e3fe78784b561e1239ffb1d903aee868d4485a59720be4f0723f60b9120385c2f5eb1a4e9b6c49d71461b43f674de52a8aa57ff61098b3ee1ee99936aceba75d0bd3117eeaf1496d781a2defcc914a1569f572d863a68575cd3eb3b58f40b529d3b3e3f50537b7362033565a63932c1fdfcd2a1383dc51a8cf74ce01ea6a1467e2d748986ce302fbb9efb08ea77472bda56a9b5b344439a002feaeb56cc921efa6bc7622301ddadd54ffdc3aae6fb31dfaa78f7a595e4e2cb4c96068c83b5b0c4f41f136638709b51e1d2909bfb4ed2619f450946edfdd54515ac5c6e5c9d5cb983dac89bbe736036b1fffd153e1cdb1d1351f69053f8b96218c7481a71514b7333f80f899ea4c9869e3e6b804c8d1f676ecc3315bdb87a4f1f4b956d110362a09e4b0bd081575093a6392426a32f9f9ac29e571b550bb296fb68044d91420b80f05afe0d3803a909aa89a44ec7a5b9d554e5e30846b4a0e48bf62219f6460064bcdabdf7d0eccd68ed96d6143f9e1a12ce79c0766f41172fd723c8b308b9be8f3983ea7c1b9661f31184f123433757cbf9f7ee294271d597836d4aebb019ffcefea61da5bd3a51136c2c28d230e0839425d8f858e5fdf79e7f787fb29d06185d8774ea9ed1e1878ab80483ea23179cfffc58c507a6eaf7230806c14e1b4529ead7bfe25df0ea0019b1898b7450dc6c354f2445146c52645494ea5148ff68990155c527fc397552d2305ba2e7fc9901a745b0b21552eb24418e9c611310f5c0362ab3997896dd2badf972d0334a50774ab71d9f3f18adbc196e85ec34349ad8a64457f5e3e4b358234ebf9d57cd8fd1d2ddbc9bdcb32df9b0116d4d66c65cbbb629726a97e0dc0523251b98cc01c18239b3b9d57ed9650032fda86d2c6eefef62439b433e98c4fe7a1589b6555468339ce405bbb0e95c8f76f62dcbf2066c9176a2cbb33dd397a89a561f7c5a1223b61348b8c583436d9827e97092fbe6b81b60368aa3bf3f8fd802a20c112f9c1bc871fc6cf22cf9b5c2f103b93205795038b55ebe7d9bb6ccf7d19a5e66e2e5d2bcf7627516f8a9fc9a6ac8e

Bullet list with larger list items

View code

a23126ef28487b94b905972b83dec0744180f3f54828adc8de899c81523769c75c8aab73b657c59a7809cd86af063c5f034cec0cb09e1c73fe68eaad751b8c5b424026a58c07496d6f3d7969b25907b79b81fe6c4a3243710dcd975c673aca54ee3fe5a6a5d3dd48879d6a27c4110269731fc13e792b44ed9c87e11f83c378dd668d5aff23a6ac2de6ce0f7438d93d6d9513b81be651ad7b467e51ec3725f9ad206eeed8782ade93894d747c1b670d9368e5e8cac3a8a0f803671eb4340600e9aeff55b43282e1d1dd345a354800bc8500eb3edab62bd03f2e80fa991b22dd5a692e9d0a3b1582480073933df9d24dac01e5a976f3cd3a5a9c3211a94003ef56d4e6a76159b351388951bfa0687c87592ec45fab5d797cff7b3ca22d94b99dd16ad7d543cfd0679176c47026e47ad7fb71d5968ec02c80e1a8a38490b682501a036bc789b938740fed68c998c4139f2376222b3e6b1c628db57848143fdbc9ca72ba7e286edb0fffdcf6307c8a4a1bdf9d0fe289a9b5ed49767540045fc90364c32f0abffa2b0f5d3a216be5688c6c4953c9ea8c293a452efd56cd8de28270a37ef46897cdd638292ef239a12cf2f783758900be24cfb1fefb5e95fe34015dfbc54edf7c68e7607f6c5ea378cc2edb3298cc6eff7b3251893291ae7bf6aa2feb6b85b69cef1b9773ba15535a365526772d8c74af01356c8b0e6c72ba9b6207872571cf5fc2814d1a352672fd6f265342c7fc39773106c199142092e68c9184a12ce539fec51e0c4a26887298caaa4c704ae099e454b1451f106f1812f837b7fcbb33fd032740d95eb41eab1d66911625b1eea731824639c7cbbebcd5da6dc3fbf37819632d6e61be6eaeffb2b4ac7899b53c4258e4789067113b06b4dc3732e8ee4282b5027e289d3ea24f0e262b00e49d299f04bc1c87d47e7970e0f41a353990b5a0a6234231f97e5f351fb6380a6f921e52602b419dadb6df53eb1dc72961415adadce5639dc8d96d1bbbaebfcd8da943f25f3898d1d22c3c9bd3802b56b7778b6ae86137789b64a85205be729bfdddd2be5ec6f438e68c6dce51a5339b9d9efca7b7252868e19b5de41081db7dfc5c65080cbc8d887ae8fda4fac3ee1a595f2ad9e1c3ed35ee300ab3cffce357281fbf51c30818e6ed31477f8e9d498030ebfc013f0b8e16a388302165bd963783ee09e4b85259b0713dc6049abdbe6f4be423323154268992006afb36330631104287c3dad650f9efac919afa51912fca4e59ac3b40c449861840882480edd1c005bbaec6597f678f670e1202be9d916b806639abb372c1bb46205db6db5cac5bf3b1714a16ebad15977c71c4ea6e6b136d303e9c8b8b8c70b27f9ec8a0951dc1ac17032535fba439e9cd8832aeb74ec71e47a078e4b47cffdaed0f6dbd37fa40e6d9e29683bc7c5c4664e3780a2b502ed9845732aa71a71f7e134e34de37368d2e0609ccccb28f36fadb5f623d7d2a56ad998d8802ba2843ee96e133a78b1b7e1495303b10b1ff0adbfe94345d7dbe6dd4d2d52222d00626b53342164e6b6306525ce362f174033013566f0dd74b382bfeb734a2d1bb6c0f96c6cd6f9873cf1107d654e2045245595843d3f2eef7f09cbc9d6913934d50004d95d3a43a81e20c676a43e1fdc9081c64bd5039584cac0371a6b82d95ebc065621e16f2a86eff2f32302dbfa7d9b4690a8a4c4f5891a076cdecda50a23c73bab9004f7d485e237086fbc13f7a2f0229d98e394e71d9783aec581432921d7db7c4f2df1875c3f20dddef3c0b7c06ce6a5b7e1f90c19f0b0c8504fd02a6c75bf758cbad6e847929de400ed7f072430130bb205a4bc1aaf6530c28bda8421a41930c17809416d878e8a233937e9ebddb3a354f1df656718c83806db2ffc560484453623fde7c54abf5ca806982a2d4ade885186a38621277adc83859f9554a203570f4fdb6dc1cf33038a5b9f3879efc7334aa2768e0d2ab7ee46097639b112ebbd4f8ab66e050b6eb99423b19ca5b44fec34bc98237bca1d119bcb8b95b46f7d68e278c508bfb37d810d8d8fed77b444236ddff94887b840a1cf15b1affc01660b57fc67991ad8b0a3bbe22ee54f71f0b4a569a2d3ad4d32111d6fdeed1a0651da7a4d42a59455b80fa93832d182b99f6e79c4782a6af386141c58926b15950339d032da9e1e1e5553c93ab1ccad20625399179650821094afe516a03d3b554a613443142ac7013964b2db654494276d7f7318ebdb4b29de9c3f0a320fb18157b55557f2c8d29bac443e320492f41228429ed537f1f5b4022ac1316df36e92c7c18662a8b78b4d2cde540a66237671976c1fba479d358acbd24f5f57ede8031fd120a6848d147938dcc1b3a92f6d9ab682c728c091fb2d01e3bb0242a42035650ae801bae68bce5ee44eb35599735a3d3c2b832c87d6f176b9bd80f1921fc204567a08ed8507db7860d8e83f84487fda0fb9772993dcdb433bd3f69cab351682c3a2f71a7c8769a88e31afad2ed8677ead60fdac8ae89477cbe8b23f2ef670815741d310629bf42cd1ab967a91800259420c2933a83d571fbab3b47e97229ff076247b2e1e8eac2db869e8b6a6945dd22f5a825fab135adf096a310eea7b6e258753d1b8a6a89b885734b5d390f275abcda25cfcc5538a95c699c83eeda53ff38f25e0627279d00b39125d9a4d5dc1e4d192067f9a68a6cd89f1bab07ed93dde4a8d5b834ebb6af8674314396f4fe8f4cf2498c1ecd0cb8be94074a655ef6b8a0284cd989114da7a0300e5650b310fb7152cb457f492c1e00dfeb08bda8562b8ed2c2df758d142acae3545068ba5dbc887a5352fd3daec5317b9c7dcebd0520f1ef283c21ed175cf314cccf5781352dea79f5386778be736d7032beae833aa6c5fe1a0f81cb755318b97f2fc249575c18842cfbc25eaab6ec4d2e60fc8f234d99e8f3a4510747e8b8d605075e3cdd8f2b37f022fd762b9dc1af6a9e0977f5fcb3fbb2e1b4476c7a9d771bcf56af3672a028519a7897d6eb9b23a0fe42a44022c62c38bc8c35b21ba6fdf9f477310daf4bbf45f28e7d12eead5cdd2b1a1a641c3501978f75b76fa06d78e181bbd28e657f92a81b39c256eb736b9b0bae3ca8fa4657bad02e9eecb98c9e1a490e36c326c8bef1b66904132f427a4e2c5251a25935833288bd700519af060ef915aface257daa979e9505f00afcc81a63721cf5b21e498fa984a5efe7902d8030efb1dc4e0592adb3ee891f2981cdfe1949055a17e0fd3ad6e6d12beb74930011b8279511ec7b3e24182afdb56e2aa7344d7d9a7fecdb9610a94a88d9051f1635cac251238f082140bb678eafc1db17a134631fcdcc391c80e49855fded96362542626e50dfdb2f75ea365dd4f081a2e42b106c8164223e6af4f2213c8794b59bf56344856d03667b892b2b537b499acf645fc4eabbc0ecc3b80cbf8a3428816322e9989d9969de119fc11889cc3f9adf208c386ef9949ab68eb7edd885b63d51d618be591a5020299b3478343d3a6f7ab9dd643f26f4d8bdd8c4a149d5be2841afc6c8e750bb5bea87d5273c5b51642b0ab7e3c308c014bfd464d81649a8838c66173bc14cba66625984dc95d8dbef5c735156e9b5984864fbdd628d64ce37f285914672f3543e24e316dcc01a1aca51898929ae0d7b80f6f9632cdc7c145637ca2849ff8708aa280ca1bae0f4d5273e608484d5f4b29b200dd21f0512ae4c55da08f48d865569c565c7afed2e291bb470bb6c5b941d462b60135d6f1de80fa6db4daaf4eb60a55e740c0a6eb5b076cbabf1a32cb7337dc0dbf183f976ed68d493d23df942b77a2df921c2b87821af3f1e7a3dae9d70011bc968477356858a0af13e253cd4633763cbda049d02231c827fbc4125422bf138eb3e43de6c851889de03445c56408c3f0fbe8d9a7cab73270ca6c790d3ebf0e952daaf467676b6d6856b91877b43023c08b55b7540b8a5b35efdacb9a0df2102e1c4919dca8e0c91e6c24475f630d738de70271da7edcedae5275a67d1481a7c9fc9b81721738f6f33b3fe94b0096e3b3bd14123e88bd7254482049997875eace6ba642944c551c8656bb66ebcdb108a5b8fab60197158a4e6b0f8c52fd6326adfc0e63c24aee0b9659492f7d02b0b80b3c5d6ef522eeab043eac20a2615ea1e859da005aada92663789837792ed8b0529e1d9be61c0de4390535472dafb9623cbeaa2b393ca0988ebc19c6734623a16bad942af858853436e7825dfd5b349c048f63aac3c4d6f972f102375a5df0c9ea328d0b772b891788228648112c8e4b3ba22a6afb205d961eaae8d3bd49df7669f4632dd00b83fa0cb44c5a42176e42b25adaa31498d3ae28cfa6f717caa7bf876266e10c8e1add2f517353cd447746959b100b3aa3cdcb3d98c459a84d2ccb1d18b7293b7752427184114240c641d3224a4bc689026abb84618abe8fe24405112ef68dd3bc30456e6703949f1c9d08fa0b66809936f4a85ceb2f67d7c4cb7b66f05197b1bd02fd6725b87329f4b638b405b761b3f834385a931051c150b1d2fdfcfd465934ab85a3290c0f59f1a0b17343faad1c56cf7fc119e0a7489611f78b06863d8d156683a2e825463a4f9d3046a72213a34469ee03ac9c2953eb4fa00e9b42fe2e73886c785288c3eac9693781711c9416d04c76b44e9519ed33decf4de06cd8511eb6aea4dcba11c828200a97ed0905ef1a679da3aaed642e9e55af76a1a812b638f8057eed9c587aead026feec3e29ae96efea76ff72c98c2c669df01ecd0428cd01e40f7b938e49112fbbe9041ff6cb205a2bda599ae090a548c079aa0c8dbcf3e1c32ea82c7673dee6d010f94879371f32a475c4b21bc5c5cd0f0851220c7b51ef23cb4f85050945850624343e89c0b6f195386527437300eabe564f67d6b34b6d28086214c5f5309ca4a9c56ca5bc4f2474c908af40d5ae80dcc92582dece36910f097a7e225f550f330a5578cdb7a28dd7877c42d01dda808774bd1e1f939b051c820211d6acacbaa0933f437aab7d13b6239a152bd76cdad8cfcd1bf5d44cbbcf0fad1e0256d4f1e042955d3c4fab57717c982ec592fa747e7677dcf1a199538df7fafdb033250eabd20a9fa2f46efcbb2bd40bc3f9cb2021c866f9d766c35d3defc4bfb60e78e85b87cae65cf07b053f626e5b6bdedf7dfa2d216d95e7559d17d7e052db62c76538fbdb3fbad75d9af99ba784dc6567cd977755f046ec362460acc56f1c774de1b57545f40b0ef403bff9afbc7c4c399fc93ea34225e2982545ead4f8cde759c189061c55c0c86eed7bd40144e12e271e22b2d00b029119d7eaa18c6e9296057f8c645e7d6683592f61ce9287f8be3aa73332270d27ae2534c07ead8d430ff78ae5932ee40d85

Bordered list with larger list items

View code

44ec21c01992e935c5549b03eee47ebb03d1a4bfac1bb29fe85d3b5ce6ce2b0b8578b6330505ca72cf9c4987cc87b9053df6c0b7074cdb919ac574d394671e270a49e0974989f72019cfc0acb3cf26db5895d17fbfeb71be30944a1a946a7da3beac8cab5dbd462914b1eeb3a8d361bb4c6540d8452c5e1cef55041a56c14a73f5091c029e1c19ef17cdae2eaa9dbf7fe2801fde3949b026c25d5316fddd13575039b4734e0b4874b2f34abf5cd77bfcc231ed82b72e67a0015f99e4c4e08cfd48aa90733fbda426efa7fca36a3e8329e4499e80181f6fcaf81d518b4d676e779590b402b2de3a491f672316f82dcbff1b17b0e7aa6a434c25e07c954ed43450d91bbdca40c1ad0737e407d9fb8016daa74cded87f7ce98599df5316b53f6330bc6db633b4118eb7f0d874574c7c417a62e6f0b3a13e79da5a37513963821fef84edef1cc566612320bcdad0b5c05c3150e80e9a5566a450ac52504159fa4608628d68819e658cec0573503d4e2f75530eb0c3659714f5e42ea3e844cdd5b387920f44d251840c3eadf36af6380fd5a79851e929c3a381d03cc57df8956efd028c80937303bba887ed5069429ec0b779c43a02a77943089fc7bb456cbf887670d489c80cc2cb2595eec02bc9eee8c9eb5bb55ec4691b25f56b9efecdbe2a11e995cfbce3c4f3fdd788382618fc192c7fa14b20f9c4b4553b225ee90a2595d578412d862363e708019395f2e38059310db34da78aec39d002dbda8f3dc02e9720286f3db47079bd72b877d1dce7d2cdb9e2d484c4cd4ee8c307799b59125510b922a49b9f65a99818b77c4d8d5f3cf90c86ff82341018ceb836992a560e6ad0e00b74bc98f5497295d49975c5b4793c6dcd2d2e267d24a8e4fac21969731df768cf75733fa1e80b7d7af894ab6b594db92870286ff44473f52da30d511059594fd90a96533e3473f4307fb4f81c132355720b24a24bfb3e320a7738629588c3877244b3ab88c90be7655410cc9d70ffb7126ce90e07115e54d1eaa72271d1bff8f991f779611cacc2c5764d3adbb7886a976490c670210ff7a758f835980df50faf9b43c0bf4be7d018e471ca73430946216331e903b8bd21d140c195d1544789c0ef65d826af33d1f7e9b055fac3a56a0c1a96da85fb2670d44688c5bf1e9c3ecbee7765b21e1cce4fe624501c7630140774fa2ae6f52cc52ca86b0b412c3945a74ebc5d2f1916f0ce0c824a3ba4b6f5ec66a63296ac237c76440f5d02ad0dc67aad79de3dc834296080189755b8e22db677180ff9700d5b9414d5c20b3e675a7d94c888b7e6421c96802130bbe9f9b8581831d39cadc4076c3942ae119df87a5aae82ec5cfc4ec940a13be3a9e82d06e6f702b2cd3898ea0526bf3ecd5d283d3fbb44384f04a44d5fcfeed38d3ac80c27427b7cc4216882983ba0e6de00c11d5fa741f5e8b9ae34c87c17681c64e80d7946c6663069dfdea3be7ad82774b6e82b76c6a3b7d0f72a56625a904893f440ff2029a04affbed37b7768c1825e465f09e253becedb72fa983674f2acb272244386669a164cb2e24b0398ca4e036971ea7b6a72a0135835a80c9b7d221b3cd8435d569a95ab0ea5ef0c98c9bd1c80da67ab606ab55144b661c792cc4bb3686e31ba7ccd56b28a5d58884baf3e26490f08ae5e5a03b3f22052f36787ac79beec346023fb1adfd6051edd60391f0eb2af51a2c77215574056d9a7e5868d1b906544678391cb2b906ec299bdeaf7693ef1416e21ed0fe240b6478b35a281bdc611b8d10de7490f3fde884b3949874cc393eb9cf2d18a6609e120b9778d3b36349a640c43110ee71738234e6902105ab881562eef09323c5c054297187edadf37b3c3a239fb83b54535ea409f1a997a232de4f1ce83287d16931b7aa1e8986b0f60a70c210dcff51bcd952046dae47eb5edce4d02e1733965f7d60670d52f5524aa95777b549dbd969a32bf19635ae7fd3981776fe20eba65fdd4237d0bcd2c6f4496c58c2dc30fb3bb3b7047f9cf2eb0fb97a0bbdedc15573ff5c625804fbfcdc8ab2b64930c478f1dcffb0503bffb032fd2278b4546c643f9130079f21df95a94f2c8cf43139a42f1dee908764460a5f323c8d5968c429f5b54ec49d50b6fe6460dfeb94f0de1adba03af3914c9ab00ba51bc8b8c1230a33a5ac16838bc91394b0e368a17442a609304d20b121e95eadc3fa9cf6723d0ba93a01d299a781a54b1406a5113317329a84504b6d03b23bd7437d7365b81e5dcf13f3f2dcd417697ef7b86dfd1c5b63307c880049cb0721796dfc33dabb7f25637374e60fc1f3225c878c14167c2cd0afbebfd2671c5a61a573824b05327b6282c27e98f33b93bac9d6cd48d8cc3ca051fbfeb934a296a12914d5978f877c724269ee1a35ca23e5c35fedb82e5ffc05d204af8943a6d0d16a8b4e29fdb7bde5ac4945bd28478464906c5aa9a56089f13c65ad9f6534a778c708932e13d55c3da5db5279dcca76283d602f2c93acc12f3301d81f58ef11b424dd1426dff457f80be2541a99d33a27c6b5863f58cfc9ad979cf299e5aa471d3f34784e11adddc9f8e2104cf2faa28e8c9063aad6b8b96e9ad1593362dae2504c469236ce0d809d453e9df916bf5a3dd4fd58b47c606c60ba1ada7f0ca6feabdc64484baa5c746896558b065f9d2fbe3a3a8a5cc198d95536dfa88d65b282dbcc90b7cc57296d965e6078e028e6e25940c6239534fc0f02c9187d3651558d5ae4736be7039e106d38fe8e885a3a5743c66a7ee23e95e7e76fdae12a43b0c32904017fb9160e6f693950cd868b1bbb7823870d17a8bc213fb125d661dc14f636b8e78db9045486a730a0749cb30cf406a8b613de3e397d79e22da3a95769d7309c108d3fb58273b9133a9a22b8e1cc028f57fb2a6762b2a0817fdbfd8f8b4c621ae59f4ea6c79603ffe9d4a5ab4efe4ce82f8a4c50b2c23249d5e3a9c1c38adddd424febbb2c968f7e819e337d8dcc2bf50daf401b4d8ab5c780d236c2c2ec788564dada9d8872ebf96e6836c647ccc7250ecc23e9a1aca6dc95508faf296051ed17e1360135fd419b85022a917dfc57db4fcad88ab194dcc324ae830a9975179eff94e9aa77bab73279847a7b334a22d4a6e331a911d73b69c5378fe55e6923b7dcf80ff88d1736ed9f9a1b4ed15dd23301c4b798e06a8239942e88a2ed6dc33ada23f28060cc37b4f0715cd5547c98aed08b1788d8aee9fdd145b501f459a5025054f801f5109791a0960c0e32b7b245f932cc68e84213126e8be2d1b92f2df711e07276ec05b095ac752b7e6a89b22eb3cfa243868b650c0bd58f1de83c8824633663141f2f95b796e74d9ccbf32ff1b6af23b9758a4e4ef4475cc1232e41d7416ccc403b1455659371db0ad95930d8268080c4118fd3691a69dca3004ad66d48eb09a174e32ac0b0bd6cfb852fc29f4f30a217953558560248ec35e1bcf1363d186c256cec4430efe4deca892ae0cf07d6a17d8d8207e388aecf95997d1e41347814b9b273ea6b72fcccfd8fd97e850aab8d1b1d12fcbdbe7957ab885eeb7395e6509a8db9b130e3db2f38bb130d3e1bcc7d9674705dbdcc1e0cc7f242eb6c0

Bordered list with larger list items and excerpts

View code

eaad6721be6dd2fead52288ec5215b3d874d72cb063685612729311383c853cc2f9bc8aad89f52363891516d843978d7720bd68d7c05d121aaca300071b5110616f5d89cf35dd6833b3a89af20bc0ba62ee74a1f42d9b68ec766f8254dc48cca767531afd05a50c99af5dcaaa86756171fea397f2c6a8387052681f176a6b4104906fa3b840eba4771d69f1e1708b629e71fea579ec8fd2d0ccb48f30f9e043fa0dff71726037b0afd67f7ea6078f375aa3b62fb69d086152911c0a3c2632b8afb7ca3fb863414ff19864958ca50918eb6cc33d8bbdca41ce273ae0077774baa6a17c1af4d4391d60639f1b150803f99c5fa1ad3ee17e34dd3bb03982b20835b557f5f700ead2fa568c9f411ca0041209e13cea9b1cef563f303fa2f485257d18b22bab663cbc71ec101d17226d41c3b6b14cd352b7b6493112d8613f4cf509f66c1c6a2ae10caaeeedbe423ef841eb2c3544c53a09bad9ecc4c813090149581e2867976cac7d55d72a6f7f3abc251625795c8a49d63188a56ad28ec77141699a697bb1d2eb1c69caf70b7124a2ae794a60899c2b6bc2ee72e28f1655a50bd489887c98e95fac7e988dfd20a76095bb21cef240c6f3e08e3e2e0a5dcad22e824bae9fe196ffc03b76f68695535a4707e084b2871e286619e50646227869f0bc85d2d28069742d79fb9284b2e692546377cc61220b00d038eef746c753627726a71a77a82686b2feda626228b0c8047d152842b06eae32faa4ecefd5c9c5f1e679ae74a6b04cb6155215bb1bd457df683d1ff5a629588eaec165052fe33b0bef0b809af8516ccd72089fa99dd9e872dc9f4751f9286a951e6d9ed3a75892cf1153182ba79989e810a50e31eccfa6b390bbd013abe11263c2be821f30f987aaae318e86a6c7a88564a793b9d7dcd536654ee7da3e1dd28d3dd9d406e146e6ed3a70f89c0b68c092a655b7927ce3fc9e6e15d8783e28c08f8bb517d89526e53b8ebafbe97f4ac95c9c0a6ab299c9ca02e9cb0a8ab399fcc1cfa8ad6b987e487775999b16f7cb681690d31bef71483d0a682a81bc18398ddbfd75dc299ab30643b48424b60e9fff08075b1e9537fc8be45432e5fea26c7b63b92270ac81de0879d59ea5ee8f77f1e4175c03450a6f797251eab834d199f4f74918d7174af9f8effbc11ee9fff126d0800c0e617a0bbf402511ebf8c06e86d2441321e0c94acd5d5c1a5251752946e29210b86473d61e768d9922be0769611f5009148c784a21cae5e49e9f253fc07f8c91c5e7f31522eaa0964d323fb4e1b76fb69a23228e560abbc0b4ef5fc385682ea06919a615f33625b47750bafecbec9c09bd82d7ff20be8ebc625f3d2740c711d4bbead663c400bbbe0eed0f965558e0c5322771bbc2ef48fd13c4217c39cccee35055e9d5e639bcb5ab6374609e478234aeb8be20a2b45214daccd0a0b98ab83be157c0a907a8d9ed3689a639ea39f9d7b93da78ce081fc0a16741eb95f953a5c1018b0c795aa15772e2bb6051396933848cf42b0f8420af62fbc2610dcfd757ce6de02d11ee5f492157154cd9f86cb7068ff356dfb25986d5081e7ea56b6c63412399586494f9553af2767075aa65ff001be2e99c4dd2f0a73d3748d651654cfdea6747989d4ccb67227a6aab99aee2f97a66ee7c72781ba1ecf60765bba59e722149ce3beb93ebb6ba64e29b34d86d4fa290b726dc5bd18c386b128af25e0207e93ed8169272219b9cc21badce4f8ee4fc9642f07bb9109ac56df3a8341cb4e8fdd2e28f010ea786ac6195c98bbc3830da824fd48184351adf2760166e66fd9f6e0b045e00847d2d4a28c4345f70967ef7f55d914f8277254647ea49f1bdbdc0c3b46cc37aebea7fbefd96b285ef3011860db3cfdaf7d32b07ae9104eb23c7ea41a82f5e0b411ef5016f49769a1d03f0d700fafc17204006bb15d117fb12e4edb091b8dbc1dbec998b154908b46da21009e1c8efd87ec7ec70644063e7173f7b3bd8eafe23dcdb52a26338a0ea964985fb720efb59a9555903daf3e0238971b4441f898041c69117fec74e37f96bb4889dca84d28af782e9ab357f8fe622ca664a0482f0c32ccaf6f33240b8723bfc67bb7be6e67bd0330dba98c2007aec8b46f50144a9887328ebe79f9ea1d22f539f8ab355a5ac9f5fea697ea46b9d07df1bfbf6710db30d87f434b8a4d7408327a78c2d4104582113f5557ab88de7749038b863254dc86958acc95cee1272e9466ebe8761aaad58e0f56bc671158d39ba7a177269ad1080ee8d86c874d19e0288c5302debc153c6bdd4ad8c90b95d31abd080b665a6a4eb3fe57c43bb6adfe3a661bacf81b64f8fefb7480a74b91645795b23446e9baf6accb59ce0fba695e6228aeb2a326e1345d590e69cb1304d4baaed2ee1d61845b8bb4a46a23c9afaada42f30533985f34a7798469f09c30bef86e4a23e5f093e3d85a22eb949f67917d52fdab65e095b052874ee98f782906c5a269c256c6f521684f06a35527aeac97f36f983f4aeb7a991073f76b9b0d2f79e8e913976966d4e8a2a1e1a079375d5060a9d56d568f6ba4ed9541b886305e07f5edc32a5a89c445a4ab67addeb0b291e335c35f4963e297cbb0cf19c708e7a4fc8fb81e2f6aa462a77ab1c53049ea36b4d6495f4afc110f9649831ea34415a77c5f4b3498d8cb94f5df6330657251b5fcf495ed115c7bc62870f7e7c408443675801aee9602267a2c176eb21dccc7575534f3bd558e015b178622969d00cf997ba040e1a22361ff2867659f168a2734a1a9db1ee3543bc5dfde35bc7929f8b2e65fdd2e9c0cd3aa43922569c7250be8713c40ae1f08f7a2c559fcc06309e45a003cbcef6fbda49bd279e43add4216bd713afd122826e96dd5f9d5f70d06ef66c8e813b09aabe474702023950d2fbf3e8def549c92585525357765493059b067e5e3db0cef82cc72e76b64a4a5c031911503e35a16d5a054d456f9a1c9705ee3405840fb781375fd35f602806d11b4416b70079dea23fc9a596ef163e39a05de42b88d8aac12958d83fb987973a0d81b6d823aeaf2c4718c13678ab6cb196df20e535e95039cb212d6e0b99cd68f017fe3a816c68aafc68e48d39f153f6ea564ceef2f7677703187399abfdc79451a2aeb74223b6e05fc6e0adf49bae1155ff0d7f8f2bca59016a3042047ceba81622f4c755e3ed3264fabbf86e56c7f92b5d981d6effca65939beaceac2528be32b9848653e9210143fefef9ef0d18337d0fd493f06ad394bf1963f91302a46403745fbb059dd1ad4315790de2ff3ffd2ad6e3c0d1e4c0be26b1e0726169046a08ec6c6ca77e00768eb843da5892d45368c16231a4ae80266eaa2dae842f9ed3df4004a5f16e92b67ff65046a98e77f2d4ae8de6fa39bbf3b53de243ab6ba471684596a51e8c75c3f9cb691b9ab8c86c075b3350159e1c737cfd51d5a9714dada255311b2e13243e4cdf21636c37fd852bfc0c9e9e75afe0e5251c68b52bb10caa69b1865fcf215e27128ca7e74e4645e2a8c19f0a3c121b500dc108b20cedad95d5d49450f06ad5624c772383d6501b9e4682abdc72d996413740a7445e6a1f6440e662da4770d8b3fc916dc3377c4f4699fc74c6d6109c71b372d98100458273c974335e1b4d5402d5219009fbc641d4a9ac1a2268f5fe63f7bba44d43f4323830ecda63ac3dd28a0bcb260ba395b62323e34cb51c05ede9bfba4dbd8b594f7433d49bc35e4b47acbdf515a3bb2f7be24015802f37cb4d07d70d0d2c5b9e3aec8bed6f8f6d7e62a6f9ac36905d8762ca5baf53d33a9ea66e617f94db073e8c8b2573604a0b6e5ad5f21195d6e0526880f8de2ab74b80707adfe98d2570b30ac88fb2e8e093d3280000051759904a614c5ab58d8a5eb213a97e965d5a9e4f9dd704badbf90257769d733309343f879b4a7ae8ee36c3e1dca56f61d43765896e7dc19d7700d181639e522e16cef9786302cf17fe79d2fa62c6bb82fd9a9b0da168a18bdf56a3688feca2edc7269fcd9dc19befc8690a771c5fe7ea9e21fe0115ea1eedd04ce92f8578f5f9db6c4277bf2e118afab2fef6577f7c35989f77bdc171d734b7b01b8ffd5fd4651af5a216353619f675403cc6352a78931a9dd52b2cfe12efe6b1777e6f4d772cb9b47e6d4610a022a5b77543f14e373e38acc47277df9f78d70bdedf0e12a00730473f1be84c2ed12c8c1e51cc8412eb7e18372100e7f3b2eedf46a20007cd72999227c8df277e9a3cb52224d189dc33e42566666c91fc13d7aaba4413c8aa664b0597c2a196f8e90eef83f06f105083986cb87e207c518fdec091abcc5316582a936bbd02ef2855b5c220072c7a7a1815c10191a166bc82d65991865e7ba9df4292d9c94b395e0c957abe0e92d72f03cadacbfbf27358e0c2e0383883dafbdc5fa6af79daf7f3479568e2bc76af73ea7adcfa647cc3a96b83262b42cb678fa9e03e0d02f60ed71baaaf3467cdefe7c6dd36a92dca3d7c71ac89562057e0e79c7e3bf8964943e6e2a9f34f0fd0658df777ffff579768448e8fb9e7b81f6b1faf3bc3a22d1651e0681d293123556102bab9a31e4cfd155f8446f8fcc7c93607f4

List groups

Built using our List group element, these are perfect for use on an off-white background and work well for smaller screen sizes.

Bordered list group

View code

85dec81dc7c7d2dea9ae2ecc14fb930ffe1f2905f10561043f63d8f3fe236cb2d6f20cd3cc74958d1002d870ec40b3d5732a4720de8a78c1e6818b835437d8dfe562fba0bcae4b6e2f986e6104cd3953ba7fb407daea6c7ef3eb9358cf7f2cf8800061b4b07aaeac2de6e75a60a0d2aaceef8b4928f276f8f653c183091b941b708e14f2e4e1324f2c13b8a221caba669f901ab8bcfc653044429bff4090067046b2f785f7ae116d896f7c62363380fd4b60792a8263021742c33ad5c55a1dd90356275b1a354321adfc5b5f3238cc8c7f607fe40ea00357483fec281c87cbb47c620a4c9e6a0ed802be451d8cbb5f616af8695df97dd23b31d772c929e1e2c9d57f9de99905ea4660b5b43068f1b9e0ca959ff549ead4763eafea7aa3404d53388941856ee966a050ce3bb802b9bfa12ec6ac6a4f3ace4de225b2b370c0728ed11e90c029f992cbc0f53a2838a413372f6a78c120fd4410349f693693291ea9979688809558fed7f36c6a4075765c4e0a3a4c30273e98b4dc5b35612af1392c0ad6980e14046ad88234ad83208edfd641e857ba931988b8996105ee1fc4560bc233f9501f4ffea0dc5ba5fcd73a7235bac758859f3d8c30ec878a4a1c92664dfb811cff30cdbc7b9beb6c2d5af7b8456b519921fc2be7b70de6b37aad11d55aafaf6a6a5e65ec12c95e7857d152b625e653299ccc187654015a6692977f7c112ed23c4e727cd26282924eef682c6e88541e41d533173b0d8c58eabd7da7d41ec92cbf63b35c42fc32fd3c99e2f5b51c889b085a8b4f10f6c905c762ac16b3f906be956a0e9187dd3948c7b410a3f64a77767a6888f1fcb7379ce73573824855fbdc1b680a2998e14f52f7b79ccfa3c157459960589a5a16b193227bd1f084731dab9c7e079d426e26cce3ef02e58e121758569c4f79476cfbcf9fe3038091048fad0b57eb2af8d1f252de2df125b7dd986e31ae577916101e44c76d99155301a66f2ee21da8aee16fc1750d8dee6041a253b723029dadc01e2169adece161be7776ef57bff77cb4b2db28df9a1806da5cdaabdf5737af10fff067410c9f13b7a2d777c2ce2e885e4f009f0159e754cea64752680c1e2d46bf355e67ffc9814fce17803de5b1c45e4d82a6fcdf033e4f167cf1c23154bc9c3828e073e68561084c3a73c65996d5db8489546894864392233c6b2ecd8759f5d7b0a1dfc367c2cd1c3192173ed52c727e1a7f886815e74b10f9a0b9828e411566c36603c3ab7278a21780223c693acd24aed578717f8fb8382b452042b7194f588d41a2d9993bd453bdd86dff5d822f7d57b16b5274dd4abad213d1ee7ff63e94a187f95247cce4b75dbbc0379f9ee0e2cb63cd1baae8a939ef70dcbadd97a69def007adb658f0bb7979830e98fedd00020cbd8e96f977bfd09438b06e15ec291918ca3875dcff1678b37284bd36e98f1ff140a3d09828f44c40d3deba9416f1b70d406839d0f95f7999246ec9e158e914d1bb0edb61c72563dd14b34168ca4dcb0360fd690bb4a704a5b18dbe69aed3f7db88004b4002b38a4d40e73e9d567ed0fe53f57c84d24d8b6c76f07582f0d44bd8d7923e2d06ca5ad6181f9ad3af556762d685e36c7187794b6b4978f9dfdce3956f11228b6fbf3c4ae8306d3ddcc281e40b2f8c61b3bb2b3b5220307603d97d781f451606b0235ee4190dfb4bd6647af223fa58f20602a73d388566dcd155b01c9ae8c4919abc5a15ff71e08bf8d8d1fff3915cfc724eede27ec1aff3e697634ea2631b25179e48fa54e8caccf50fa2f30b8676446d620906a237719e22b3a326d27b81a7ac773eed96d59c2c5f8e7d3db80dedca4dfd56594293ddd4ce0c559490254f3a0f85a578e59c2610e3971c620790fd676ffb05ecb6400b305a1aa4b8ae586d493a56e849700487c2f60eed2b0b8be53b45e1992b5d3f1a5ce78ee2bc627e84dbbe9690954f7e9634a446606a6faadfa6192bdcbf0c7935ff987a67e1db36b5f994e4f412e4080f63ecbed3f20e976eee1af1f3c9b3ba10d9e845551cd03efae1f2c15f337a108e07b41385eb4824cfa50a7d96ff2bd889a05182458a6af99b3dc500b64b1aee8bb5b9b9e3d8a754f5a7d3387d8a40a271af95afbb9aafd786744a391d180254dac9f72e16bac64f43ed7a89e7b821316e987df8862005cbd70f0025356c6ee261d63cd0aa2c7ea311005338afb301d4aefa4d878c15cd71175a5177dacb8a0bc58fb450368d4256b7a2ca592611d59658285d9ce34ce019aee496554f479dc9b53d982145b42e0fb0a37dae89072755f8c07be31a70de554588244a0d171350b9b13c22af6a124aebcb11581acf94c8424c4252ed1fce6010ff446d82376dac39836fa93ffd8f55bbfe6412720dc8537c1ad96820904d872d7ffbf0a3bd03e3cafca426741c7ef3ec45c0eae97a864c7dc827dd44a9ae9687354837fd0fc7e77437ebd30dca717eb4dacb756263ae90aafd2ad7715305ff217ce8028dff346441ba53803203014692ed3b528d0cb87f4cf44b55aa6b5b4e2783511449b3f95715359019aec9d1237c17cee837b09bb7d724f9008a7d281bc4aad186542871699bc6bbff32cc710b9984f80ee16c44b741e84a6e5cb48171afef85b99fede80adaf9b6556f38d42c549e6b5af75189ab05200bf0a083be4f829fb3055c0eafd55242d412d7ff430e0930611ad8193d2acfd7ff8e1b045ca626f0fc7fc34a78e3fd3520224008c8515f7d39686bcbd7248b9c7e052318471a75855efc050ce983defc7587cdcd9098ad6d00a3087a306cd78584c8e0b6cee3b0e32c610c3d4c20d5833b6f82b34a69acfd6a13e6faf74f9c31796000dfad0acd4a4d7e2bd60896e54a0cf128440cdb152d5cd2ca928cda3dcd3155638b7e7ea1f4b280a1fd46bed18ec3faba3cfb04951340a6ee02b56a709292174469462b03d62700e713bb51dd2483d3139ce18dc293215bf3a74e68e65edd89b5e9d98f1c3e14587d29fc74dbb4f08ba9c206f7a199e858bd9692ecf664f8fd6a71202bd685793e156b6f9c96f7bc012df38d91d063c2c151ebc5dc74fe56aa746ebcd8a2d7143f54faf3b8ea906e4539be5db1e2871927ce6b2d70a11f156a9b37d776e3d9cbf8ebff1c76ffc96bca8d08aff7e80a4f4274191c6b0db7d96af23d05687e855ddef09ce90d6a2cfe055f6dcca118e5c008e01bb3c9f20db0334bccc0f1d2026352e884ac430289e7c7edaa29ba8c3b2429d87a9e42511ef503b5d7d956e7e53418b00c3976f7bc2cd7c44a37827e18126c12a933a5ddc809ca2f6e0bcb28b367b1ebd71dfba9787e58bff1e82826ea146ec39c97da7ff1bf5032312e1c33aeef7d3851d1f5c6f02411444287022dda0383de2b9024d183c70e5a84d0b4edd94f45baf3fde4a906ed84db73dadc80c0cf496ed752669275eff635a210af071fce7c8196602e5010b9558b103758ff3a861e642cb22f15f5a1c2044b50938a66a25c2ca4b8aa26b38c0d874b32d30b3f527b6ab2f53885d3ceb4cc1e0fa722f409b13b8dc205a74a8a2a0243ee940ffccaee7509bed11b1f5ef3b671a8a2d790ccbaa64033f4d6da3eb5a19ea2f20a4282d0c20133c800a1acd4a705d013733f1c03e4a2542c30903a251ee90b84702a6a786097f2a1623a8a47de6990ac05cc33429b99af6eb1770cf8a360bfff6da8a67fd629447fc53533ed08da580f69198017002f6cf0126889ddc9250503379346fa7eb9d7e276bb45ce41175ac1e1b1b6be81d9c4ecd747303de5d269137b1ed225771a9690188844e83377537524d5027ade4da5d8b0dceeb6ce9105af7cf7529c8310e783f10fc82b4bdbe5788b55a00ef90db47e505623e8af5e07eaeaeb87cd2f5c47db1e23bd77ef97b41592c7d412ba179d2dd056103868bbc6fc46ee0e5c72b89635fb377309d8681136593e2cb01339fa2b5af0da000cb167350d73004cfba16ae21ade4b5a53d2e7c09899a365f2cbc9fc5e08842154ad8012cb573760907c37b35f4d265ed73878e95f0d25443bc61b4f2c812b4f1011bb6b54b25c6415d4d29942eb9c1179fcc87e7974ec0f04490654e3f3eb4641690ea04cd447f938ad03995f03c89aeb2d9c697dd966f3f21f92365dc38c8d0928aece43db45ab8b6c8f5707852cc25900505f3ca72706d70f20990cd082b1be2e1cba3d2035bd3f7d30d0f1d7a33343a147cbc0cbb496107ac5380fa5ac3081495f60db0880618ce9816ecf8c1d9a5efd654fbba37acd29889f0b6ce72fd681646e2dfba2e5c32306b68a43ce088df15da559380ae90fa8cd2499668c3e3f503ad99dc0e19dbef1b1ab1de0171df3c92c8f6e77c462db360383fef02cf0bf2bce960a8185a021c15158b0b66833bee177877ee4e6b34b5258c8efa6c723edfe5795e7b133be4bc293cefe03565ca2de545303f50e6bbc4b5d4cee4e8edf1bb83e58d9c16a9b6e989f5517638c9b6a9c269ad5b112cb97d37b335b796d7a93346ff7f47845426e233639dbeef79cc31789d376413f7f0c5748f47b726b5295beebc976474d43f02b5a1737587a07794a1b4f27db94a5c836cf2581ec7d1e3719e18dd65e2e89d56f7f744ffdaca453657db2c4531a8d0a3ab87a66fa8d6d4714b04ae0a64fd6d7e5bdf45b08f2b3e8d1511da63a7820befbae486781682afb4ce82b7e0315bce2f87f778b1a02156ec778df19570222455f5258c6e30135096d13ed9896ff58a66125aeecf25d89432f0c20a8d60088769e6c5a0f4433a251628b806811756a5bbd435807f9490303d9e03150a6d2bd06223c8599405210ff0c5d7c1db3af0d0049f0bd3e653fe20d58fc4c5994729389104eb1753cccadf873c0a7be4210764

Cards

Built using our Card element, these occupy more space but are useful for capturing attention.

Cards with excerpt

View code

a02c349c729074051b698cd6ff3eeb6e822218429005977268f6a5a69f5c9b28464d0fbd8701c6b625f9c23c83ca9e18a32d413648128d5c929764c152e05ecfdaed56c1ae14ea474c5a28a8abfd1f1240f98b46eb83e2c185706661a8aa36acb38f6658a10519e70c345a52f74ab8a6667162fdff6daa71f663d3c701e35620298df4bdb23cd6e0c90d01196cec3b70de3d54b78452d167d3ef9df13128331a4860487a2c78dd754f39b151a590791971727e19c798ed6407883bfbab1aa6e40c96bb9ae99cd6b4be7fd5390801e91be3c33dd67223b81f8e16a5f48104619535ecfa5704e524d5f8ec01b9c110e5ed9630744987052113a9e7a89ecbbcff0875df2cc8b4b2e70ca6997d4b75269b95660e719065c1453e3aded37288ac2c383656d2b645f37be4840818a62970824f2bda853e8153d4104f7e8009e8bed8c3bd2a70280c18503b23282cd8acda128abf829ecc01f6a48ff9eb09a52862f180bdcd6fb39f4de6d8a2a26b46727fc14d5dadaa15d4f797f9cd808d32ab06b10f0bcc4e42ab6c650b0768d288f452d789eb69dcb92058709c0190071444e6eab3ee2578ea5d87c120b88317d065dd38f1062d998438cdb9f446d9f7c278a2cf4a0078932e3eb3aeeb724f1d781c486262b2e87eb19482f222744530f10cb236b610d6bee643f9229d3477c63e8cc89f9618fac8116e027579fc36e349620549ec7527d2af3c0423d579421d1642a918ba3d8c7ea9330a845d0418e5cf225735ab0ec24bd946b106437c3d608dc2fe163d7e88feacfad965713a1ba1f5d48a137fca2c877af5f8b2eafd0913bc81b2da5315be7311fb62c2e4079e01483e023958bef3e5dc221937577df4eef2875716e99736f60a0579135c63e50131844065b08468b368710bdcbfadefa59762621eacfe4647494f366b53a4270e744b161c0b933e2aec660974d9befd85a00d016b2f0543812e5fdf0a50b76e89f2c94da914e3f50d4fdf7a82eaa72acc846b79a37cf53f20ac7050e26bccda5e9be42873b5fb3ab4248ba5b686bacb3740c8e1a9e080662f55ff910e1c51c7eda34bbbf204ed847bb0f0771e05516a25084a152ce5384ff1792da0ab368547dd3e4cf95cf33a24962a84503ed24684654d17cda3f36ffb630149c4bc615d024277c7d8703057a2dc1b07cb646d46dc37f31afc59307a0aa6eaa7813652d1e0da7d1fe900fea84f19451971fcc10035e095105916fec57b5d1f90c6c071f4ab9e21338ce79d788987598bcd6823bfb5e2013a8056da34650a68b2725ec5073ea829a64c0de5c7b5605609b8ba357b4a5f63f42115f27cbe8b6f696943c08f59336e509740b729970fb7eabe7712761531bd3f09d84c48f2ee365f45093d1f673d5dd086b450f7fcc59c57c3ac562ce27bb8bc55bee660dc33e9914a37b8ed8de73a6e87e711ce95d25d3b440e8f864c6e6c06537ee9460f072c291c6db1a3a45c65c6aceb8a52cfba3e50df9e342f692ca34700fbefa69597fa31275fb8289b94f2630971fa83121286f9523494513fbdb3e802f6faf322e15f010cb5abb09d631f452a7a237d3a23a854409672adcf98c2632d25b26adfeae17d60dff9fcb296c368b1ac1d6601cba951c195b7e82292bf5862c87765ea0d88552b1385c1a5aa782ff0569a6ef50894cb435f8c19787a3488dfbc67f6daa1e4bf87e137e32b2e4214ad18bb67fd54ed05e5f02592522deb801ec4a82d79f9e8b89ff7828f63713dd9139d085d7fd97478f4973f481fde762b8ed6ceef8e6b161041df29d0f7ec2502417c06fbd232f06c65a0584b0d044ae002a4a47e22b5a782cd37edd71714dd1e40a5ab2fff5e44c8f952c5e6b6d28c2a367593a33c076b270337f3722346f70f410854aad07867821a46c189a8c8e0dc7221952acc9433de443d18748b3050b6315daf5c715eb6a9cc44eafa7426424a9e581fa7aed1046865e9933852e1ca0bfcbcf1c1101945da5e755c3f1e2081e2f08eb0626a0d4f50664ae32e634bb5fcfb1a6dfeaa2f46fbb24adb16ebe8df9193d7cddbf4c5d77236ab3ff5598a045aa7a1b9b651b862bc244c2b60725c7bc9a36bdbecea4bb88a8e26c66a3e9436f42a0c95952aeb7d09ff120127342d368407d97458210f3b81466ec88ee84ebe8d6c20f577b073b5a6c98dfae7c22e8feaae530983b44b406b75a6a7c38a86d35bb4d71ef2a6022046351df58d8b70ef30944b34021329ef2fdea9f701d12b0c1e74e84a665a7131c538c6d591d3bdc739509bcf3b2a7c8b0839874f6535f1ce2672f49672780e66eb71f56cf9b64fff28f724e372b87a2a0b92971cc7058868ab90c97fee821b20b0874e5319464fb8f9c6a1d27a0ec4ef0de8c610cbd4acbd86aa56b48c729d10c4091d9facb0564fc32054e1f0919583834c2f11aa818d2cf780518209939c9980da42501040ec5d2834d3fb7897715d6b92998f91d8a90fb70d219ffc6e9028035a15646825dca4ffdf3bcfe73d088101adf25d8eb0a1b37ecec25fcef61003fd4606631759e34fc56ac6a8403c390eb9337c8ccbc86965fede880ace162508be65f6501e004f046ba07fbb0e2ccf6eec3b31f2b9dc1ed941226828c4111985a8fe4d1db043c2b14048e98865eafd1aca461f56a59410f9c7d1de68e94f1e3c3266bcb11cf4398ee9256a4aa1cf36bee1c8a055a5e4aee33553d91f4b3dda8f1d0e16e46bc6d416a6f5b386be463cd6fd1e30903abf0227c16e9dc1981e7ecca9a3f7c4886de5d9c8b28b93b152fab0dbb2732761dfadf3bd40a0834d5ebbeac08583d1c1735fd1c89c9f2efb0de73c31306d26806f6e54b1ea23a0aa2947db34b9845a9229ddbe1cba17c7f16f059e836b17db4325c0e4cb227439b09bb235ac97c910a09349215173b9693efcaac7572431b5ac359fc341a6ad563c23be332e66d2b997d7b7ed3e19252307c31c7ba6acf98965d791c7e043f56d26d89e36dee0b7c27fc830e0d688bd6d1401c8b831f397fad6b0501ff6c0cd47

Cards as links

View code

49878413439e8b7197e2450baf0920474eeae1f9acb01eec831e2ef680e1c26f6d763269548185117ca8eb29f7f074e3606371f3d48f992f4f4badc43ba8d8351ee49c5011d6fe49e2f8e8c45e6b2fdb80c38ee69bb45cd8f7a9cb15313d4f4dfadcb37ee1c0ef751843ed3f9c1cd768c2f0feb9e52d98fa148be4f50e31cad605d237f22d2e9c893b21cd889dedbef19b9cc143fc89a94da07e0a815906056f76f89e2a1ec81da72a623755e202f73a895bc6075f253703e33bf2dbe9ffc5ce7d9c673603edbe1fc569f0e9e9d695243805208aa385cadc2bc2177f9143bba7b14c0118d99fa0e287aedaa1b040766a0ef2a9414058e2b0409f63dcee58d90a587c5f1416c9c892665f241c2fe3d164147e7349bbf76d45a4863adeb5a2137194ba0084a869a83145687e320f06f5d07ec5a4bd76b2483c713004e165977ada6ca8caf36baeb7cf3789973a8bbfbec0db20f9e90b4d5dfce1555cc75401864f72b9f85a0cd8ee7d2b1530732ca64fa47ff02eb20136d885d085192dc217cb6cb0ff41ebedfb559bbdf373be33e7402fa78232268c5362c5d880c38515e12a3bc7c3ce26e409f20eb23ba23f99ec1a4ef1931d9501e84c2cdfa447f27a7fe501c1a4c07ce9398cdcff0710e68c63a462c96bc702dbd8f1c78b40da3ed0821b36162c1b2b725c6f78782ae9e2846a26ecfca5bf255cef8776911abe7412d97e6e19b1000eb0666b6f09eab51315c9c1ef1aabda6cb8356962b70a5b826712a1bef48c646f03c73254780edcf15302e85fea79a750f7da206dde76a3bfa95cbbdc3bfc9b3784060438102a8d2245f460a8fe9acc5c6d54c216aadabf2f0b9baa617730644a5fc4f9a158ef1f2515f1d243d0c42624e9cde60174d173eb10ff161c39037883a21f025e9e9c811ed4f5f0821942c3fdb25b2fec096ef788ba49ffe50d965c891fef7a810443d312b692aa8aa9079bba66472d577bd81bd446863359690320edd6a2dc5ec02e9d68a7babde9cfea285c86ef0635f12dab57ccfdb5d98c6347c5a89df2b56101d3622947db626d44c6bed8d9a8a91c35114b97ae7fa97f21a681bc786f6302c1f1a721c53666ef6b34b37c61c0b34a7f84f2edec35948b98bacd7bf3ae00ed9e05f6d7b7eb3e3ae8333b7ff61ad51ca1c0fee4d8103da704b73d8928cd1e270a02e37e0aa068756dfe9737ca01fc9bfdb175957749554bf7e07fb5615da295c5ea833eedc9c2ede53cc491dcb4efabd1ea0c010684b533f7888580e92515e24965f28aad870a1c33919ad7b44d6fde5b85d5c01f874a16a46c8b4a95a84c1d3d01c9ca06b269cf0dd5e619185e482757cf70af2dcd471637a91d2e6147fe4a3ff0115bd51a16349d82f53765c30a06ebdb2bd349c61b887bb9147f377d919d86929ce41110143873a08b88bf88c8662d948b2e643aca378874d6e629e0aa08f04deb0d3fa499867e803a8be6eb5383317f49a7ec41a5a4b3e786c39147980a2222ecfedec005a55c7ee9eec4eeedc8900201aae135e4292b96b65ac9c313428ce89d025ac5dc6c16b5d3e419e2121edf4c18c80371cabb5c2e3e6c39bb279cac3f3e5c0a7c3b905fe8abf432c3899980a70385fd0e3d18db0c9edbb8836eea105e056c737412810c258f68f857d5cfb138e70a743851c0101d7ffd84ba1549c7e65c7f302687f4a8d3ac0a576dbb562d6e160134de1a92fa8af8042670f82bb6895458828f2403738f853f6d619501911e38de03428f08e88201b09af12be7072bc79bc4e15b1e0fc0941c05380d6dd51df89333281f3270816a75224d78ff4269f28dc4c27f19aa215dabf9e7b6bd53bc3bc3b4aece776df30a63f0d3135bbe00bcad9f81367ee6ec3fb2caaa9e3e41c85736bd8a379a3470d8a33176ae97be7e6df2f21afd108f222678778168b693b839c53a1acf097b6f7d1ca6744441cc100899c0b5e6303cb6bee0a28cce9af6168d215e76ab817034951d4f627510879b3f80bcade8a14a47cbe889d5d7c64c76b13042c18eca16fec56282cf6e151fe79e2c3778ef336fa584f3506bbbfcc07a0f8e8fab7ae32b5763f37dd69c3ad03c88b545f14e3418c8ea9fc4c1cd9fb518a56701b318f6c49c4e29019ef0714bd0f6922998b6022fee6de8c12136ba47710536068c90575c895116ce6ac6811eabf6fbd5391f15a914a011ec002e685666ddd95f8283f080b4b047d28d7fb67baa3a67a8f333b5f0fd77e7bef1503c004490c5a5b320f3863f42a4ff25dfb22984ced61f3a1951d2dd7ef0f56db8507052385e1ecd06eb1e7e4677f56742c0a8f53b9d41fce6e09fa21affb1ebb64e545c4b654759a105b8fc0e57d4962ffad63ad5041b3cb98bcb401a49477024dbdb7513fa7d032f7e1c05d7d4a45940c70f3377280f3b4223a5f09c3d36918673d9092fb1df5c18be5ad8e79dea6e48a1b7b8743125f1a0a1d5b7ec37f286726ba9b4490be5d3607265eca3c22e2d710fa084096bda38e41a6b3da5018011aa1ee199ebc403439e9153936c14625633fd6799c537e73e53c4b881ff8d389bd888f369e57693923bc99f89e2c78f0bdb3856d196eac57856f28abe9ee1552cbc80fc9f6c46fc1630ed552cb22b1317410d7f1423b764dac17d46e17dd44de7494506c4ecd6d0a6a7c6f7eb6e09ed176556d758a4fc9f06b48b88ce720511eb388521ba73c3125ab7425300477181cf7a32f55f87fb535d52998bab41a42ce2a02912832677082fc3cb9ee659d05a2816c3fa74acc06c6ee15e29b411b0cf658cd632b1a93f93fd82ee435d1ad64094056b7ce2836a7d3f991eb9b8252861a6aed1370f8d6f1e9a7fbc5d938dddf0a95f4c1390744e5da4257c02578c773af8ab56b827bfb42b3e5ffdb29979122b816b9feb04db7fe4662418c956379e29d570a986c7ede86ae83b77edc6a66555b769af67622b7a06730ede9cbb226cfd9e991137c11c3d24348ab6de24d91757d12cf1e087ed0a62c84201b157656ec02a532df4e565c8f5e5008bfcecd0b6eb1b06f7618bffdb3ada4e8e5426d8fc73dcd2c37c04cc41a870de38270e21186f5c5cc90e1bcc36727bbb98b46dd128740e996687d87440897e31736133f80bd30bffd8776e57f90035cc8384758cc95576484b6cf0c2b7871e1aea150a45d808608f8ef2031b5f286f8299d491989554e651fa2fe0c0e3ecb7f191752621273f77894a53a9df065c8e31e006385b4cf81fceeb191401a04dd53e6175c97ae4cc40587f0fcd444495b4902bafd6181584c7b186c63fadf87c90494203396fe84d0e85493bd04ceebacac311e8005899beb80f9da2dde1385c95b615620d18f42f092c30334f52d92548064d2b4b0816f5eaea4d82a53f33e49002c4c9c17b2fde5b2dce363b3f1e6ce179e15bb2732568f25c235e6b0b3d0899cd7b8a6f74434b141b170445b38fdffb37921cf1f558d8af6d2b3eb6421b225e461a51367082e4b45c7ef38f4eab9ed0fe015e9fe4dc71652a0bed9a269303bb3b4b757169017016bac6724316faeee2d08556ae65eb17a3503eb1ebe2a8c3152ce773a1794587ae7c4e573c04c068e7d4639e22c1a8a7ed52cdad0ed65bfdc1c65422025ff9e47ca47e59c0bcae9f4b87d1aeffc61529a4403aebf2f8b2e516cbf8edd3a284896e5aaee407453b53d7cdeb782fd1d29f99465c4a08c52a8efa883117ca9ca88e7d6044ca41d19283538dad5cb18b6c7da579c66b2a4410e37418833d3fbeec669f0ad1d6ffb8a3954f84884078c95a43039be44a3c1f8810b318d1a08bc6f8cf33630bca4d5d7048170d23166c094e3c39febd89f83e7ec22222559fa29df3eb50c2130374844384f8f4e1fe3a33a6b479a797cdec00c1ddd701894013869808c5c3a021b4dcdb8bbbd46564220182875eedfbb8767b49d7441258a2ce66df9d276edf1035e7b79a209ee7fbd17362875396afc8440172bd350dde38191c7b7e2b3ceef15536a24a9d6bd4c16ad305d58129d078dd0ad35e8e79

Toggles

Interactive toggle sections can be used to present short articles or excerpts.

Toggles with excerpt

View code

2be0f9380ac9196e7179c40f0d40e6fee5bba2349eb6f3fc52a0fd8c0ae195a4a2cbc4fa11cbb61f2458b21d5b9c392a2ed7850a23bb0e7cd36745657224b3d188f11f48beacc005bef9d9b39adf095441221f9a092c0ba6665c42f40db9ac21b846e45a269c635d12564c302e101850af2b71e0b84f331a375b38632534e5d6f756f76179db1a921994386ca1580b36b08f72ea4488fd1a116da35784c61594104ce9b372c5f7475ed1a1a1a6e46cb58b1d54ac62012a28b888f2358a76d1b7581d87060427af59811ed974b27ae208243ec1ee231050254dda81f84cf3b270a15e24a00934826f22920ae34e2cc8cb8df71957b91cb6e22aa9fc16066188b4a64cf47d04c7816abd1698182432e1f1d7f669c53b46f2c45445a0e054c86b543776d26c0baa312099ffd77b6995176d42ee278f0418e4a5176974bbc83576682b0056b506ed9a66f92ff6b5bcf62b09c7780419c51def6ad0c3e0036b71952ec60673176bebbac90fa1b559b6011844335c744f57ae45c34a0b34096997675c41a6c4427df94673a63289c7d50f7280565350325d82913df545d97a5957e6897b16ac58cc9668c76b367e40b38161b567511878329446fa07845de8d6b30f850e356ce7430f38b372a23ebdc318f4d9f77f63f6efe229c3dca85694e088a56e33dec180a90a1b1807b402af22c059ec7f54ce6b46ac3e435a84eaecbdf767e128308272f307e482c30c3d2ccc3473f63be1f1c2192ea41a53633d1bd4026200326e4fbb297ba1877b91fc71474ef4fd75647215b1438d85c85404fc5c88aace69893a0eceadeb78e783b4dbf8f6943b34b11564d4e412635ce46b238f5e14f48b6ba9d275a7710babcdc6c280f1635b433968b4104672368701e82b8d539e6d8f5162c1841226750f318858b92a76851c51aac6c61a94683ceb9f220655939059bc3966c8714af0b3e851a477e1d55f058e284750f53bc99353a2d9121e2eb567ec4892b46027d40f2579ac63a6f2b63227e59f85e016b2df6c9b8f3099e6cd66793caa89cc86378e3830ac6a359a1dd120d082302488b78c18a9af7a0dd8fde1fbb267bb7744a831b4c2f4c1fe61c500fc702b5be0e7b883c34458e69f9781257b37d2f89fc4eb6ccbcf3537bfdf55986d604a8be636bf7e0f935f95f5b58ad57c1a025d3b0c7721cf5b720a136e0cc8e1ae9e5131afa5d9d1b50625996e5b55ec50d67a345241e02a64a5fd0b36f58e98cfde3854abfb5a8e25a73d78a10a9a9b994a39d857465dd03c95908feeda71ec14fac4e466af7e134854f31a22a068b95be7f69bb6a52b8f74bc0bb02a044cb8c5e266d06f62c19c2729cd4b496d9ebf635973c20274e3d3b636067da1f410c5cb4caef510ece9b28ae35fb95e76f37cb59f75cf35144e767d9d124d2f2f310ac8d0b137ebb19c0e3d50da593fc3ee49b4ea140477d6c906fc9f60669ce44d23a26501c00a6bd90dbcc56b18cd45b5c4a985020d9a40e5bc06c453b01b38a1836dba1705bfd9bd1fb1e2845443b65c0a1bedc633c951d3dcfc1f0ac60a27a7d474a386ed15ee9800ad64ccf6cc53cadb8c7337db15058a0a99f922e65518215eef839cec9ed36441b566292712c5d73f43e4555031542b2cfa95341c1e19fc66d2881804a1feba90181c07cb0bb434c4895853610e8ef5d21232fdc5867c841cd172ee75fd0e8be684684f20fed7f78a9e3d0e4437afc103227ebf6c99ac1e57577aad0ac4fda95bfb932e5bcb8fea6b389b002e420aeadecd2d3f0bfb4577a3e00bd49b60195d29310ec2be6295b5c4d7e528a1d9a9ed8f293b95325cb1262061fadf8ae15fc8a1bb1451baaabd79048bff1bf75ba87e024d7e410b5a6bfedef12b53c33ce66b8ce45e4ece4cd4199267e80765f8fdff8c5ef98f6377d9248cd651f80927ea0c6c2a129d904de630d819b258a2c6573b10cb6c299fe828fbf0922c8ed75dba3d2caf10fa5b07228793df5df94955499631233e2355d74b600e2586ba9e20bdd81f82e755b8ba70a97ff56b7cafe5d9c515bb6ab31b42faa97fa4816c0fc7189e4a90665abcee59f17b84f1a0469bb1b51f72545d03b485724af1fd04062a0f5f9d4fa8655d1210f63bc1148e79b1b9609d951f8d2603c47688fec7635a6562d6b1411ca27c13a77de5ab49e9b2e36678dd34af2fd8906f772c2241fce634d6e2c16f9ebe30253aadbd808a32789bebd9fbbd90d1a7ddc9fd73b542dd492e671f3f132d07b7d7600e95bd2756ad63ac878f72ea3195a5d1f9f32804a78dfa7360cbac1a0252a8f908b32cfe02eb45df8d26d4e95a29a34f442c311a3c098bc3baa6bb70741ef00006341495e359fca36cdafda5442f60c03a5c0f3b2b2627d70309dc84a8e20cb29155ebf5db8478670374557d2734983425d3a6e3c910138c90f2a47036a01f251431b76f68cf7d37c054b9df23fe6b358e9ccddd33b0338c42f837cfe11ba46f70871bff47d2be8544e2a4d8dbff3c4631c243a535ef9ee4c578abc486dc0957c2c093d4b38defd61ddc9bb4d6cf8e3f2f3f3ef60fdfddf4ff8cc3293da509d12101287a2ddcc8f8949c725bd73ead1410a5765ecc48293d92bf3eac1aaecfc44bf2d62bb29092f346d577abf75a326c41a0e4b7b7b2ec960453a1d652a097e5a2d9b4c2f0561bc7c0d985a9f504d255a60f9e18d1bc3686fcba09993b9b9698a19e728918b0cc1d278c37ba8810c1ac7f817f585124d38c4e1414e2f1123c3df37c0f28a8098b9306783740c083ec297433df912ae393d7478cd42b726a4b8efdd4155637c113fee2cde292136dde78257e5a10c9e427f976f2ba82cef40f52b98528df1df692d6219274b9d7b60c89909204971523d33784215d042ab955f82b0f963666faa6263840caf0649214efa3b64352b52bf6e0c60f973fab1b6f1b4218238f302f5c2fe1251d25a73076b916a877550b294a0e233455e3dd8f0c6d265e5684260f19d4576f8c1d3151c8f06183c7847aef6404fc03a9c0f43d5eb62ee2c4efcb7de12edd5d78705ad4f3ca4aa6912dc5eb365c9a04e533a991214c50d9589686183f0b77e96b9b3b396eb39f2bfe61ecb56f26c0966fc05080515ed9f88ac5ca71f93ce0847a1ae6e5fd3dd01c67133b0c5e778c548503c555a04484c4f0c56a6d00fac8c916f3febd566ddb90bf2d1d46acebbcf36e2dc9b657086e1f2624293d694d5bfe52e8d056e34599359dd7a453225fe3e969fd3bcd960bf7679fac9cd8ba16120023a51d105796e0cc24b79b390066c20bc4cb6304a61bbd343db01bb77e659121f92f0921806f2479894919f4d7c3da281d0c66702c3cfc3e6ba45d2be87089d230bd0eff0e39d26acc15d6aa392fa58106cc5ef58d8452303dbbf73cc299420086f8009ca935601331711c525c036aaffa4abf40374db176f70426540d38eec8331c4bed3a4f8a0d140c576c16bcafeeb036e1a6a66e5bd56e9821dccfa8549aa73ebaa577aecf9a802c784eab14f622a2cea0e41b9c5b41841c5a4f070181806f45c2dbdd429cccee359209b390e1697b69e2295be79c8c788ecc68ea44efa4977824d553c2f309bbc8385fd223dda5b389ad0ba2d96ff1c07ff62aa27f9319be39b787a6c0477942b005ccf64433ab7fab9f4c494c3763d9968fb08167cc7a7d6fa17e0cb3102dba79df04116b9cee8e6240569d40462de04692154129c030b66d75a4e08496ceaffcd0b3b2fa143acb2f142e96115c48a901d7932b17144ad0235eab42f671d2610a5f8c4a03ca10557ec1af2c5c63585027d3b1476cc56e328ad34304927af4a8b03b9b35a4443fbb46f232c5b31e0c72894436dec5fe258827a5fa932334e57363447d7d35e81dc35b4b9b1cc6226dd2e02e5567113c5616a2a14f332cac1ebfc57be0ed1c036beecc1be5c8b7d44593448528e68e870714ab808c24153d55d968f9fff2255295944763276d3eeae9c244f1983cabf6e9b8652a6eebd9eb25f2c42e3e795205e29bee96e5a7da64f05b0a2819832bc172ba427b2b63cc5dee465748400b9e47a16618edf0639294ff18ddf1f012d593bad5c2b752ffdc018e724a025569682e5d53011c445266377c5802d499722fbb16025fe29617e36d017dc759735e317f1a505145769b16354dbd93d0dfb478a1cb76fb683714cc420997bd950778aa3dbc40971a83ef498b128287d6bb0a97a256f6c7e128e5d4646c4994d2f77b018f45982f0750082e49cbd024ef2fe0952703851df5fe0ede080fb553c02bd7614a4076f3b8e416f9594ff04b5b38619c582d1ee0c07a7716a4f0a5f35ceff5f9d0b2eafa57af2dcf46b6291229f0e301958f51b2b2e70a73b8bf422cfbcdeaf233518a3f10c1eea282952386129669788aab837c6bcc9d1832d921bb553151acba16f77ff006aa7cc650cda417d87ea947974db18348ad057d7e2eee87d0a2fb2c8a7fa6b7a86b5bd51d517d3a2cd50cb0032bd2ef1e2ec24062864e866cf3a8df5ef225c6335d15268001e96ed9840451b4aededf35473bbc01c5030b6e19508e0d35155e6251c03c1a978497c90cf194bdc31a2c3aa3add09de5de3945630a2cffad0d58c5b56585890c7fb93ea169c3ad108601ad36ce74b4527f1df2992d92749128311d5ba9691a4b49575962c778153634ac390c72cd4b2c66c14cda22499fc677e9c300f9a94926417ae894c97779f99df74218ab1d348a3566387ae141ceabf8d6f1ba710334e7d6c66987d032c77162ae960f1318f3c4f97122f0d8e2970df3b0ba68ab3ee2c7b9faf738ee0a31acb2e910269e48e7bc0c83e9196cbfd294b1e8e68c29564c2d471aeb97ab155ea671bfa6f9a5282b79c4c747fdf1a349113e026d2b098ed8738a6a4136ad624783634206f91f2ceb4532c5ad0bc3a8b1d1e3181b702a6e3fd837f630e7cd34dd2f7f2e528bc54f5fdfe2de9bb5624c50d10af25af5c7b8300e9c504a50c5ccbcc6e0d61b81478b38c69fb2c496f3c356951989082f09bda151685d5e7dcc94f0ad17a90a6ac2f620889590760edfa5311355942779376dcdf6919f587ff51521a33f9ec71cb76d6a0a9289ff9ec898f8a5b6ba198a4263e06b0b728f89ae8230e683053ea06610053df575b2a786ea9f85e15dd325263198cf8f3b372000e486e1fe71d8fc16447dbe50e6225e418814a7a37a69c7950f232fbc5db99188ee04fdf4171f7dd4595b983268195a46eb997f6c17ae146f9ba74ff2ef55906e07dd83a139b63721d94559bc9bb452e7902aaaa62efbb227550eade3f07476e9fa7d17c8b139f30cbb11de6414410a715ab27be60897bb70b6da78e8ecb6d92e07cba3e383437aa90b2ec0c7607c0825af5a2a725c861d8fc3ea0027ca619a8834a24517d4074674db763ae7b9ce7b24b811261ad53a3634678b205c69c41612c464f4f4255b092bad407c703245aa8895308e7ebe81bc386b7a1b874d4e8a06264565110674abda84c818cf5ee02b5cffd65ec970ef9882356bf506b32efe8c2379c283a2df6edd08bf612c3fa7daca5bfc42fad89aeed833d4f18961a676dbe6f396f782bda7464996c82bb64cb90adde7ebcd00601f6f2b4c0cc5832df4caab7c6470032e1add1712562d1a5aaa9adb52c95ca67389ee993ad0783d3d6b12d64ca2599e29cd7de5396aab080829ab5a537c68aec98ca6ff2953ad6d66496df44330658e82a74e57c64cd754b672a1cbb7934b300c01714afdef5eef7dadddf640d8c379ede3da13f847bdf71602027adf57fab452e78f6433c76ef697db4331a5f657c25e82cff3dd4f3423f54b53bc4621f061a03171583c090c68bca644dba6903f3b1bf84b265eebd210f51b37f6ec1d45933e5c013a18f7e39d041a210ecc801d4b0d7243b11e606441db26e1474dd000ecaee494b31b2f57e3d819a560559fe1805b8a2afa97fbb4a469bfbd328c2631cda08a41e8104e7d15711dca02b329f274f2efd7b6de68196a6610a30ba58a61ff65d65f59cbba780f534825f943cdb721b090b5364f352115ca5b38b1e2afbe2125e38d9b9aa60035c9467a7af9a59dfcda930683c7647ace0aa5d8a4574dc7333f22b24fa2c9270a66391897b56a17e789fdb50264fa6b217b8ac13e9dad9b2742ed13787dd21266f8c76f6f045f5074a497e77661bf6f9c64c7184896b2e815f20f3b70875e053e618232c952af7933b76b3a37ed70f00b2c3f4c526b11e4440d8ed8

This pattern uses our Collapse extension to manage the collapsed and expanded states and can be modified to act as an accordion using the parent option described on that extension’s page.

Article list patterns can be used to replace default article lists in your theme or added to any page in a position of your choosing.

Using theme settings
Using attributes

To replace built-in article lists with a custom micro-template:

Select the Custom template option in the Article list style setting in the Article lists setting group.
Copy-and-paste an existing pattern micro-template, or one you’ve created yourself, into the footer template (footer.hbs).

Custom article lists are generated using our Navigation extension which supports options that you can configure using data-attributes.

To create a custom article list anywhere in your help center:

Initialize the Navigation extension using an HTML hook like the one below:

 <div
   data-element="navigation"
   data-properties='[
     "id",
     "name",
     "title",
     "body",
     "html_url",
     "position",
     "promoted",
     "draft",
     "section_id",
     "category_id",
     "created_at",
     "updated_at"
   ]'
   data-template="articles"
   data-template-data='{}'>
 </div>

Copy-and-paste an existing pattern micro-template, or one you’ve created yourself, into the footer template (footer.hbs).

In the example above, the Navigation extension is looking for a micro-template with the ID articles. You can have multiple different article lists on the same page by adding hooks with different micro-template references.

<div data-element="related-articles" data-template="custom-related-articles" x-cloak>
  {{related_articles}}
</div>

<template id="tmpl-custom-related-articles">
  <ul>
    <% articles.forEach(function(article) { %>
      <li>
        <a href="<%= article.html_url %>">
          <%= article.title %>
        </a>
      </li>
    <% }) %>
  </ul>
</template>

<div data-element="recent-articles" data-template="custom-recent-articles" x-cloak>
  {{recent_articles}}
</div>

<template id="tmpl-custom-recent-articles">
  <ul>
    <% articles.forEach(function(article) { %>
      <li>
        <a href="<%= article.html_url %>">
          <%= article.title %>
        </a>
      </li>
    <% }) %>
  </ul>
</template>

Built-in styles

Custom styles

List groups

Cards

Toggles

Related patterns

Attachment lists

Author information

Callouts

Verify purchase

Article lists

Built-in styles

Custom styles

List groups

Cards

Toggles

Recent and related articles

Related patterns

Attachment lists

Author information

Callouts

Verify purchase