Article voting
Outline buttons in a group
View code 03b00f06a80390978a54427a1757bda33cb1b9a76dea29497f7c5d25eb83c1eabb996151ab9a18c0db998dc133cdff9be4e7a664ba895e3b3da250977c1f7660c4916dd1e1e632448f490f4834a4cf3a187c7fea59b84e8cd3027ffb0adafc636cd77ca2e961c293fc006a1d1ac8a600578e233fddde1f248a4ad8f763b019de530f0539bef079cffb2a81ac4afc44aaa77e357f9a360ee4690763ff76181a6842dee8791a9dafd120e0ac058836a43f82bd45a8fa2c20589ed28906c90149828033bc09d00f70cc204925c355717d58cd24178414f13db13c3ea41a6b88b52a8e53098cb4b6d6adfa25bb471b4193a30e416a2d0a49792ddad7a3ce3bde5519dd6931d015d65ac39a6c002a5917a772c6621f9182146f9de5c01453134ff734d951f9e93da79edd500eca450e691d84609f75c83fadfe4e33e672f4076c9e7680bca0da6a6ea27c69c4064da2cfa2186edb07552948da1bb44d2247f9017ca1dc382caf7b8f744300201e73f8dc40730c44b47795c26cd43321b6da6ecd339d6fb0833c6c66b389eea65cfd7578a55dfe8c14f698dae69a2cf7d091a51c80b2ba836d393adde2e9bce5bd89c52416a1aaa6fbf1a55c7339efde9121f59e4a46fe6e2568f7b62504afdb1a529aeb3c73fed86b6b221b6e70d2a34ca3e69d35d9511dd8bec913c64890b2e310ce23a24690e0bc548a3bd5a1fba85e2e1749123801b7d951685d464783f3d4d4b3c1c34a1e4af4fe213bc659c0ab4800c71101e27fbeb957681510a43e0afab5ea7b7554c99bc22896ec7191521c7a1ae83b2c1964914f156a896a8c24f2b1e31f61a76935f585c6546293b06a2d51cefc4968cc70e035082261f4617dd54c75bfa24312c67c40942f6782c787bb4d8f017bede9b40bb3c218f999ec00dab66d2303c18680a31569276fe4e52be749bea5ad89121a4106535afb6e8da25f90c223a0ca8f00428ba997564264178678f87aeb4e07d54edc0fec28a9cff29188efc138ea67f30931bb3b51659f0bd41f05dbeb49e52aaccf600b7cf5f54c15903a0c107b46939ed28a0b8251da6ded135fba989ba7901c1714efe510e4934fa7ca6e4de8b40a4d730a8c640d366c052d73b2a00a02242c1ed06b94ea85797a8d7fe8233d453942d013d48aa94fc38bf3975624a268cc40fadc9a307935ce2324920c5731ee00829effdc82e4e8d5b330f7a70a0521c29e1eae16a6d4665d5a0eaa892d9762addad7b1a13e60a3d084f97c07af20514ea282c7f194e4e7adbf2806ea87e44716a3a5ef4e96f7a5a5018ecc2e4f8cc1f742902e4fdc4b0701114349e164e37f0c2f00712c7cfa7d80129cd89c23ee08714b70c7d8635e926d107fc8f733d569b046ac4b6e1e15f71f7db773bceb3547
Primary buttons
View code 513b1dc90c1b9e22a7fe981ab042e4fc385befb548d922e1088db5d4f34aa292f1327d56ae33706279b1e9be160a754529c70c71dbb9d3ec8ce0a2350b4d8ad58bd34c9c4ce78e1aa0400e582e8f6a12e67203022934a01a5e721b7d5fb08afb51e9cf8aab50ccb80f40291c431b895fe4d963c56841be9cb3c0244713d2508b361132b952dd55cd1d9d4fd415704d9a98cbd5b473c9048deb44257edd8fb7d8ebda71c36ee19fd734d1c35693ac7460563051ec38fa7ee344be45cf348207dde47db05dc99f5cc0097f9e1ee08916d41f5e018e5fcf1d3a062177546448ff99f025fbdb7f3eac351ef1c3536dfacc9abe2da02989eda741c53040c1eca353e3f6a7b0c9d219a2e8c94eb8972f0623970705412519ddafe5916e42cb25740ea829f0121b2392d0c943bbf05c3ba1eb069b4e00df3bf1d796b9e0ba4d44009c1a22ba63354b468cd2ba4206dad1171f13f73ea84b7c7980d8fc1bf5558d374c9d1ca38bb383b26b119b8a2399d4cbf62132b252da68a82b89fe6b421fe3d56cb494d501f1a8c5565bf90247c39baef1b66b45d50014bcd16b851862d5e6e7a24b7d677753cee273504a496cdf9b324f1247305f1a482c573e03090aaa7b3f44baeb5d8889775742d9d544e86dc4558a9f68c07b9183aa9ea10033fc55dde0064958c7045b41e24fb53ee3e968e221de8b7ef0e9105dc40b2f051ef09798184ec3a2aeb0a725d22bb3c0edf90326baac8bdf4ca1c57adc1f04f157c6e3238f888516b9ea2c3384cde9ff9fba67ecd00151e1a36c1b5c7d6bae69baae0b50c007a9fb94fff8293b9bfdb4d22be1e693c0ab4fc97dbb17c34fbb869c63eff7463fc3c96bfd1e6a489d57614b2fcc2076ab2e14b213ba2b844fce143ce94488fb7019beb727c9745fb8e7026339968d13fb344ae5dd305d46fa66bd4e7a6330d73062e4c897aa15ce7cc69e00d66a8e3a599e01d5256e5571652d0ca59ecc708d163ceadb43da15c42f3086c75ba13fe871fa17050f6593924243670c13a0fe755e44b44518068e1b85b48ef8b4bc793c235a3a6d70810ae3714fe0e4090c689492ea0dd8b7ee316f128b4c0ef757750efd43fb2429c8aaf1e7efc5d5c205fdce643677567b438585cc2b73665476392676c9287715e15ed58b15ff149f61463b2c9acd0095ac54517012e4f201ec629d80fd9c12e24f08fb14eca0784375fe90b2b3273acf67c29f80cf9ff1f89286bc7f8be8d7827e4d7692bde1dedff4030e421dae094697b6084792ad80799f4926edcf18a215f7fb39dab3c82fc23f49554512c553fc5a293537fbaafcfae5af2d6deaf0ed158bac12baad75876779ffd42bb8962976ad50ee683207b5e75e708744291913e6645a545fe37c4c98b35cb1946c
Outline buttons beside the title
View code 5be7a26507d7aef788cde3d06565b885e3dca5466669de98251175eb494a09d95c4e51ce69ff612c7180e01ab104700db84a380b572d8c8f9640e90a3e1026ae48ac573bbf15e68b065cda28b27136ab31db23b6abbca1b618b7e05b0d5bcc34c97cf76f6e041f06b8536ddbf9b78cd597a1091baaf6517228b8ff0d1c1ce84a73f5f87533e35b5da964cc54001ac83f580d810f5d47d2402c579124553f26c8a370bd89e487e9b98c1bd2aa9e6c9106d54d29961e39ffab39d8456a68ee39d68f3119162b94e2c0d5e66531c449f06f17537f247b74afcb9acf8ab733deae1908c7825f729f10a1a486e4f44caa69dd5da02b27be392410ad9ffe0ebf9cf797a370338fe2786f837df481a490ae91635399e7e1de014e935cde6141bec7971bc2f59066430337548bf96a1fa8d543be2ce3f47b96c25bfcf2ac6547ed865d397bab6fa0db30ab4f5112430f6d7cf8f54718ccc243754d649e816a60a3247ca94af3c002dd4ec86479580981a1d2259cc31a5efc94d7f6ffeaf1d175d61410cdd87e227b8947f7cced9097860404047228fe547545c3d76924cfac5bbd488316c2dc4d93e4f9cf3ee9e1afa46b6d9a336487b66deb5edd1bced5dae9cfaafeb9200ade3b9d34dc4c1ac0edee8e1318794b7f4a3a1b9b2bfa273656ee8a60fd0662586f40690fea5cea7624efb2427a0d390c9a486793b5ba6d63e48aa77e670f0b3b30a8a8c4767e73c360b562f326765363ab95ecdabb9d6b557c35031670fe02259927734e15794885e0600d245a0d69d884442c456a1aab347c8b611b360c3bd14e93a9795c5092a5af650f04294de56c425e4b43d9dac26862d1cacb14a664e9195b93405fea20e2396bbd1b80c6929caf41747f1e34160c2d9e9c889d92f3cfe56d84f6717191a17d1070ceb174d430e395ea015eaa198d3d082688b9c7c14f6ed2ac74547a92ca05f23ce8a36b8550f79933bacb25fadf3ac373ea5d9bb5142c6d8f3d7dfecf52002ec98f5d6cb4e9661f786f159328e64f54a8e13729a7a1bb1a4ac93153061977a3637e03dad3dd4098e959ee4b5b31c66c7aa7bdaf0a96eed74daa5aeddf750a5d0331ec7a7150547df7ee8c91bf5a76b29ae0c6cc8ebd8762455070d650e8c5935a6801d16be45f86f823a2458d85f4f91e69c0ee429a5f53d7be84c639000447fcf5cf17eaa93e15284b3ac722acb11bc815fb0128cbe08495ba92b823c7975fefaa424f1ea72fa7f53f1bbf7aed54edc5afce47839b07f7b0921171aa0b702921ee8788fc99be099852fc1d0dbee1861c91970ad79c1462efbe97be1916714c734e8c5ca07906243f2ee57d5f129baef08724d6d1ee8ed8df4eb388733081641465c3f6dce9b843c105d925100b8e5dd1f65b51c0bf864847a70f9760d445f69f05654a
Buttons within a card
View code c2a7b39d1722f783284dee3ea7acd36a65f3e4797f2641e736c4645444a6ac0ca465f9bfd8a207a42bb41c4ae745dda724d29d1e9b65cb056553f7b4a2ddc839e28bcedcae6048d265db091a29ff8d4f88f83de986b3cde5d66bc4677a328894d9e92ba9e61b94fa00deb5248444ca564c1292d95d68d05099da97020f2df4422c5bc84d81bd4758ae5bf79ced5ffb2c51b12536c2ce78cb8c6c3e21eae93afcfc7d1697071bfd4cf72565b7a3739a04c274bdb5f4051399e615e2737851d6d6e1b423229fd35665a747863f0d67b111905303e4f23845353934c406349658fe15c1cba30a738259b912ac9f770e5f4cc0db34bc2cb5a8191eb9675dfea5329e61eb4e4eef73aa5017a9f2fafd825b7a8aca340d751e96c87c7963dec1c9eda4b4a318297e32205162e147d7995d71ddb3d83d094483b467900995f4e652c0167f7c1cd119b0fea176229fc959d236b5e46b1b9575de07f4a2f96c545b673cb92a5cc4ca983dce3667c8cdba2118f05555a32c0281d499df016caedb3e0ec8110001212de5b945a6ce2c40beef2f5a8662227392b8986ae09d5d53c0f155bfd370e3c682527629c1e11623dc3a027288ae8cb70a2fe357752c324eee36686d92d81ceb0e5030d7b30c8aeb22b10441dd564f7e65a4971fb1b1b77cceca015247e943cf931fde6a663bfb566e8fe0900f6dae7d5f415c3a42a84db0041d330671a532f49c2875d5baf0260cc414faaa703ae5ec3cc36610aae78e9b52c3b54a2c63811519618ac3f2f65ba022ee6bfb1c64b6f8c09bd13e1b3b187b425c6a9daa538173915c5c8bd63f234cdfb85ac2c47877bfb47c0b6d21d2904eed7f4c4ac5e33e9b344b6c2872862ac90d5759e3698b4be8a7010ff9156fbf2da9e1189dcfafc7904d6d416184a5539c6e6dd6478b9c6ec374573e0156825f60cbf3848976c4b5388d051a98ed71d0fb9bea30903772670b69b4c7030592a383cdf4ec788c2dcda3875f6bc57d69996b7d1f9f53b6ebb793826a29c233004219eb5c6e2b62c1ba111c53125b60649ea71df0f157238cc1e6bd9eb342b7b3a8cb5845be291f0282061272148e173d6e88634a79db183750e632a373f9ee89a2eba768cc775218aaa5ddf998e88909474b243a443a55cddb45d76c2c8830552cfcb5b7ea3c4e563b193857a68779ab3f315cdcd0e01ad1ea966a9f85ea809621c6c4498fe3c2263ebfd9d44728f0181e58a418a8fae6262236be210ade39d0f348d999c9550c315c95b71bca0d9c756c88a2f2882f9707a4695fd6e40f26328e580ba6172c73ccb8e8b33f6d661e28891792ba6291ef12ed097011bbeab2e896a41f19bfb2ac921b09d02a4d185ff44e511c8f62b836a4b9988046138bf0adb75139fda4a1185ece5c16c2d9862fa20b875bdfb093e97a0b55a730e156135e926d0b6474be0ee1814d14b3c48d52f226971b8cda6ad7d8438a0b624907da707714f4232f70ed891e71384867f15bfbf2a6bbc9471fe6dc79b24baa05aa33bc739738fd4264e8c01f5ed19ae1a2d894008c0332c13aa398d4511bee04a3b82e82c8b35cdcc5cec945c5638c32e4c65e03f4c0d82a5dffc076a9d84ad153d218bf779176b3b15367ed5a5643c849e73c39333bf59c7b298f0d5cec92daf62121e840925e3837aff4cf5f8a629d249e67ecacbb20a963438247ba8eaa1ae0271a770c5ce63592d55235198fe77639e59e4364a47beaa8e0ebc80b9a91555e406747cc4fb98fa83f9116a4edff78f22710444b9df9756461c3a34ee6d07deb0266d0eb63d6ca66e60d05d21da72f02427ca67a526d19be9327a7c53b4bc80367a88616b3f16acd852d2fc3b03befb7f92525933b102f9d0b43eab72060a77cd5ec4164d63eada4c3d65ac7cf610b2e7ec162170861e9794d3ecc6768a8623c413b4d6b954df6ea5088381fdb4631ea7425d5875296ded912bcfdd5b672d91664a176c2f74382aa7b69198943898f80f435e2a2ba02a0f05cb3a5c06db457f42ef8036cb2ccd7e1a928e9149be161c6b751bff33d82377d64d5a75c9b5ac62870b2ba25f4c668e8ec22673d1ee946aa4452586c8f135093d6f3c9d16e402aa1876c35bb4e813698739cf64a93767ed55af7f18ee9abb2704a3e6bd81d288805ba0f22c47e97ce5d2490e67dd4dc504f68d3b5b63f12f9cf96ba5563ceb603086966ce3ba3f4a5102459eefaf09fd8a621fde68ec467e0b322447619bac02083a3517feefbf08ceb0c70531471c59363527b8f9b2a511ca6541ac3299b3e9527a9bfb108b3a8ea08c7354124acf96eca594e5d7b35af444c79a6b139b22e22f74a51505b07698da05c14d732afa165552f35b8dcf5f94fa9ea89cb24d33c32a96fb616042419ecc5f80b16e9e91b86991079f6be9ea0b20380e969d833ceca16cdc3ee00268036668bbcb4ca77a1b3d4591666c7f8e72f5cd768721bd83a5f2c84f29786e736a63199
The {{vote}} helper can also act as a block helper, allowing you to define the content of each vote button.
Outline buttons with icons
View code bd4884ed15e3cd5e8ec89159da07251f2a815bd5349a268893c239efb9710c22c3ccf4f0b4ef472b934314e0a8852296be8278859142a452fc189c255c669f0c2aafa87d54ce9a41457a348f050ef65ab2d165a9e3240fe95e21761ad1c4eea78f40a97c74119f4c8486ec30913125485b7c00c35aa01cc61b56eba01c252ed7cd7383e8110b23e054f074b241cac3a618f1737b6feeb49a58c0b248ec4512184f17d5a4462812b01913691d45462d13c0f9293f63b6184fb1a861fc271c52e29dcacbeb18e82efb85dbe385d2d54399db11929cc2412946baadd5c5efa11b49bc977b9a6554fea3f72f50403a143d0a980d02b0b1b38df82515bca4236f22efb5e99ccbc395f9275aa95773314fba43b2b096efb2e769f300847cb33a7d4a43db89fb9b9a474db0c8d88041c15a5123e28edf0966ba78e79d7b76134a6293498c046360f912e6824a44638811c36ce1f9c80463a1b500f4bede3f26bd895a8395fcdf76d3e0124ac928f1529f22f24d046974da473b1b693d5c82620a9aac144a5b3ba8e0e266b63fd097e8ad35bce13a2f3b428717cba6ca414a7324c3bc4c2a093a53fe6a5886b15279fa206eda2f88b42822836f657116f2192e7383e5f51571a76aee12de911909e9b47c12c35623876f40e6a186ca71688df78bb47951a86dbaad676c4562362fe4a845719992b95b7e0926c73ec25f4e01ff4ae3baa30d30bccf392a67e66dc927741938eed1e65d035db3d32fac54221fe722ac137ab28d1fc8653a70203ba77a26f31a99ceec504efe0512ac8cf9da362e4c2d52e06b492197e527753c7d9640bf6b689cf56bd2276d3095a92811dd96136ddf82f182213744627a235eef532698976f46a193ca94b09a7ae6cd0daa2c18066a93e28d190a9ef02453966842e81335adba2e969ba2b5be9b1ad76582f0c8225d0067fcaf171799bd5109d189273287050ac15235a298ac038d9efe4aeeaf35b92dc9f5f6f4d9aef79a147f4b70b770db978132f33cb59b9e99e62c36c0e9570dcde839489cf668b409c85d4142f337c6ae07ab47c7f860a690d75ec84726ec1b4e8281120ecdbe3870b434bf6bd9974d8355846af25120defba49feced2bc632614c71ca1ff778a090e89ace6fed8d702ff57c7dbe1a022628502b66a76ce8676b894f280a0c67c8d28164245fd5f8e16d272ce48bd80b2db1a24e6322c9da5d2c5296a2aa9a85389af652402d78786827acd5169562cbbea7420f10d00fc7817ae4a622fc5ef779926c02722a9370583d8ba83ada3a57d47b07835a6171be6b938d1ae18f6d4b825e4605c876e8a9ce37ee752c218835722a35003906f7a8517a6f1311d290888532fbbc752ff8fc94d531d6ac2c61a65c1e858cf55c22d148515fb3bb79fd159dc7399546419da316da611ac04a632aed6ff7e0ac9fdadd6183ef8ef36c586a4d2aef019d7ec92dbb16cf2e5e2f9d6eb06a524269c8076683201916022a049d1cb17c4afd9756a2172886e06fc6a60d6cdb379ef12177fd880f7d2148a3b1e6a32c8e407c90c60f0d9b4458a1a1db1207031a7ea06d19b4a43bba9170f10be8cf0b139df1dd2a3a6b2b2d23c5ab6b9aa09a5db4d94182950d0203a320981954ecb70989b1f3c285045ba9035f5ea745a3b46731a5f5b2a576273a1e5b6468096e22eb25b8ba743b6ebf12e7bee9a3eaf64c4c5a3c8b2674437df736b6f1c6f56072b1f53d916cb6efe17dfa28765cbb4d892e9b1c8f74d66059ef698cacf2bcdde4a668757e1e1ea90c37bebb3e09b2bb7b62f3383d30113c9203493227e663ba0aa6070fef107715ab89165d5c2af91d673d223b87fed61724ee34d8bb52d90e452a163be1854806385b52f573f0d4e24e3aed37ccf5532911af00a664b57ebe9f98118e09dd25f204396bb799174abc47c98b45e4482880ae75072ae75ff645fdf87c258f301fc19c1c69b4a7390d16c15279927a27e79ebf1b151273a5e13673aa32a4f249047beca7341530c66b773741affe8ff03781eee7d60a2558aab77d9e32e22b4425369756a36555cf02e186adcfc0a63817a9a1a1edcbc1eeb7bd785cf2e80c15ed65813e451db5f0912d4fe9f6da813480262bcdf0045f308a54f124f93edae798a5243267b115a50c53bcdc0ca5bea0f23e4d6fa0bed7feada5800b96b280f8658cc4644275331da20356d47d0b068da3c10ace175d8cf69788a02b60bbac70cd852f53f52793e31a67b316eeb79ee1438d32dbf919db6514ccc0f4d19d9b382a00ba7f6f468cc137ffe6c18b6c11cbac0534a0658e136b2a2da2bb32b135a332ecd04ae4a1527d068ac48402ca77e424ae77cae61532b439c56034fef31460fe728c590ac73562992771d8916bfeefec50a9cd2347bbc25029fd5ba2e0584a4a13ebbc22b700a74c962990cb213d58bbef671219a29988f1aacd9ffcdc7ed19a3b8b9947dcc0fe5c2660d4a33b532c2a64834ef4ff0b9646c1217cc1c544dc75577d8ba8d61e52d2d5d2c7f2260e8dadbf9e58aa6d6959018766059a7eab816705f282bea79c43b9e3a480b5582ca8eeb5d41a8ad91f8fe8f6e509efbda6d3f80a15105bb3e12abb55ac03e6467f4eb92a59c55c80357c7228971e5e9119fa54a18314c783c39f1c12d2f54ade23d5763e2bc4f89beffe7d719fd0618978e0e25ae8f237eacb6da53a9ee5c243dafbf1c4a7276bea4e232e0640934b1d710cb6fa6c387cbff21340c4cf1041c8e6fb00b6ae62e1514b4495c8feb164a13900036bd7ff0f8d67d7591b559626f5a504062170b369175c32b83dd48286f604c635da84071920c73a8a4ec899a38e2a5085d8f1b046f35fb7ee9139d0c8953374f5470b5dfe8a72c73546357797da4d5e2cc35e11c12a69dfc6e267b221219c98d141c274df0f96e785633919b01cbb75acea28c975a4b34e026b261d1bdfe09cbd4bb99fe335bc6ba4ca215baa863c18269d4482016ef479e17a496b15f1e3d13b87c0685dbe6dfc896b3e94b99a3456004b506681de289024a8b370f9be22801b1522e55f24661b0c83d077624cd860264c53002d1d665560e3f815cf1554f5dcf43890fcfe0f5816a47e0518a3b562d9ea7606ade12145c05a792ef63a3f938b478ae6f0bfad5dd67be6be5ffaa500b82f5335396cd5b0a7003df9e5d6183682bb118039bcc93e525dd9797fbdb55a23fdb72c1cc151ec793d9b107ef2aff4c112bd399c012fab8a8138850b04a16e70c400ace2ea4a29e6966457e6b08dc6dd2929c3b81ef1cc54bc93be75775c3f380677b4342b710cbb57e8665b89a8bc614ad28e56570c20e6699eb780374bc9e55f806fa2daf2d7837cab795721cabba844638095c8e231aac1acfbc523b401748bc54b781243f9980ae8441aae7ca22ca0645773a782682e6152f4355e1ca550eed24335edbf5aed80c7eb51cdca7d43f6fe3cc92609ab5e4efbd4f105e43103aa0ef9f2ad3d4a60b3e2ed8b9fc8a7cec687875e04cd845b7f20ed7bc4c0abd85bb0718c818a09fb156b6e3d265bbce99f657e75166c56e0507b29953e3aacf083743b2ed81372ebb2949b7c8b90dbec5084f918981e3f1ab6f76dd27e6698b27a17f1b0d275bc3f309312e25a9a96b65d4f809196f87e44064b3375cbdf07372048fa14def0607e7a1b9953b08d54c2742e23f217ef61f4395c3946cf46a7097f3889b8d1cdd1cf98b9caecb220ee748e4f412a4e244d66eb78b403811572c34e533bd59d2eb845ec45e7ab6bfbc2a0af6ccaa9631ee8d98da0000e696254751d790a523966981415f1ab6c08bd75c4fec90ce6b3896094ded1c0edeba85fc85067fe3db8050db2cb9d67ed950650dfb4fd2697ada88a8000729fc42eac50da4081a697b8d5e104ca58de2575129670c5edf76ddbef1a4922323aa8de86edcab3d6f59b1c1f9a6fb564c1f8ab5b336c717a3cf6a4f1fc89bf87966385b21526272115acd22a79d38a022a829e30056ef1c5ba9a1a47190c609ce43177b4083ee77f55251b5a06e1cbf687c87cf0d6a94ccb909dd4b2e8cabeaafdbb7208fdc84069cd3762576674a44069f4eef891ddfc3b849f261dcd8727a82713d1e95030b75ed2450aa47bec314e8f396ee4788fa948762bc1ca86e89c88d5268405d39bd416681d0d062a40259cbb835f20f2a8e72a10c1f38644be09590493a6441c5412b65dccc75e4c7ab78044dfef5f16855971fb1cac83ab241b63864b912e3c42649394290575c42850706b6edff026c68327c2857d3693e7794b4a148bf1088a1e1bd716038445db797e40bd16d8bb9b28b8e6
Outline buttons with colored icons
View code 929d06219c41b05620ebf1ba6fa8182bf4923d47d35e33a5b8c58ceb824e0ba6b27da0ce51d53fd9e20398a0da2279f35c466fccaa177ebf35e0845be8e027d57a1b2d34683a1397c6e8cc809dcdda0f60577a0572c48dba54de00206a6c97824489cc429c744ea3909974f70beee2b1dfa8b86e110cdce8a5ce706992f4de08a636533ef754e1c1e9790ebea47eb43dec17485da0fbeb714b8e9847865f97e1b0c8b3528816b64dfb04d0d90d9a1a41e9298b39d62ea9601942bfcbfc76865f483a5b8c9db0c7c367ccbf6f487bfa73ead0fb98539b4ec4c788b5782b8c4162014b41e92a204c1a35bdf518fee7b0bfe870a11098c05903b4ebfede40e6d077b8153951d868f06d9c0331e919c56c0784507d2444e75244a486ca87c848d30e80b66686d7d5fc5bfec6b9494984704fda5d25b3c1badf7e29cab0be331bb50e3e5a4fcfb9dc50ed94fcdba6f79281149fce1abbc2a2542b3803b2e4c67e022aff30702f0e3153be74bb819197ae67da74e052435ef4ab3e7dcb94ffda618a24f2e2b521d75d4b7a631819bfcff54072846fe4932c4162aea9b086aa3d700944f2efdedb1e567ddcd793df6c15266f37bbb69de4f168a78603de82868797434da959f83ad0b575ca2859affdabf8196ac2041aa703be5f260dd16cf1fba859227daa2f596be5ed64226729a42dc0656209b83d3069219bf2417559c7ce034e3f73b8a598578f87ef557cf0b2fe55bc0b31c51968e172c7efc0cc1b250bd697d5275b0b5f6418ca7f2ad3170dae868beb43fdc6be0dea7761bc203ccf753d09df777379201d8ebd4383c11d210f471465fbb8dadce4fa858db667b9f91fe1764ad856905a5d60aabe40aa236b8f6cfa49d893997b7cfdea605b1ae55661f040a75a799a07addb4061075bcf8336a125f43b5715176823f74752e9bab4199aa45ed15db6aec71a349fe37445db251587d6e4ca3fa10d21e714f243c79bee1d6a592229d72280018d074f1bbd7cf0706e66b290cbffbcc0e820f49cad81e0f481cae1d654dc74f792886ce3b1f13f25dc6b328e9e8869b1004b30c04cb5200e19edf02e03971ac1f9c1f26d10ac91dd5adac4f5ed8186293f22bdaeff93944c7c386463fa36474b4eb04dccaf0b83217ea739d49ee1ec7ef8242b08a3e9e7a531340c962ee57780afc8a97a6e44b3093c7f3a0537bca5dbf3655e7d4ac19cf3c3270fd32e7db7bc3d0c896a43cf94eb3efdafc560471f672d1e0a9ca1c54e7235d3b73d73bb2f12e112540c346f47b48f3170f9e9d2ba51fc196c9b053d2aacf83ac1c25dc5efecd12e5d610125ee96c1afbc86162ca46eb4cdc57faea7d7239889c312bd6fca53700bde7a7fd39973b1e0bea1b72151c39054e113097df50afea843c5dbb813a769c0ef2c458750f32d341eb57fe60ff88bc413d08c55b30301c7b5437df0c0f8a2512fdfde34c86eafe483e9bc7be5b69b91acacecec4f797a90ffcf1ef84bbe7d0cae81340b0b3880c8eaf8eacafa0ab0f5037b5a40e57396c2fc4c99c29cd7c5f481ee9500c852d007dfc234e33841413ae35fc5553eb817f698249974f938ccecace81ea918f0e6cc4956943e157902414b3f54741c56c819933f9db7cf94667e570044eec032f0cb83a2eccb0ae6893ae65c3d8c9f7c1b2da80c8d0b2543c48e29fc21d2af5262296c68ca905106b810e9c28426a5d12d408b25aaa2e5a1c78ad71e6f5e091e243dec7f6dde8882c20ea1ecddbc6525c400c4dfc8eea04ab4660eb148f89194a19d8623d2d5e19463abf1b618fa790be2e9c8d84b8116aadb49a3a98058233a88a3cf86df917f63fe6161ff34b914729572a842c7475f3574dd8bc23e54486b8276219e0b548b0d08b3ab49ed7d05f1698a28830a28dd88ca2dd8d2ee98eeb1c156ca462d17e0335274af6d1ac561df7f3d4b682cc11b4d02907b57f69e58981b174cf48af4d2070e0a2fa78115cc07dbcc491f94d36da3f9dfc20e763272ea367e1fe98f679f64073ffebd351d9e0e90ffb3c52c158f23c72e66f027b68c544bfb414a96b0b820a812712a83fb1c3a53ef859f3f7828afda332f07e16df77437e291b36a1e12bb58f6f299c40f540d845b68728e7086240d1de1f74a99d276b41c01ed25bddbf7db04c6cdab4e4d7358e0af352bf6367e265d01107e943ce83efd7d49543bfe0debd63d4ceec1d9404123673396a0111c72c9aa6aadc1cc73643168c4792ebc205630ef6b1bb0df7b206be6a306d632089ebafc8039ff46c17edde5567223bf819a21f22f1e288b8974c09b2a14cb7eb8e237dcda1547a718434fe3670261d80da82beaf355202857ee647aa434cc353ecaeb80bb49a319ba81f390f4f6374028866cd46910a98d77e3dcceefc165a7557c34fe535bf156c5a88fc603ac0140ddffbd3bf0cdefc318f988645dbf021f3203125fe38329605ef14e19e27ed9526bcb507b8bb6372dd86868203c8295818a9598000beff9a7a5209745e270cdb6dd5e93b201739493d58ebc006aa0c6f2f6150f87873f659616c81278dee40d292a423bfcebf3e3071bcea93f0b1b76cc0a66df09c356f7eb3193c08bd5f34b202b8aa3f5c505ca2bfc52066913ac490466a81fa16869b49eed8d408fadb45239e774df78de3fec410dce91ff9cd47a0c2fb0a2d2300bee8f2dd8e3
Article buttons with emojis
View code 756373b013da15f7c241d36ea85505079cfdb06ee2b32e3a43ed46322e89d72363fe9162017ba557caf78e6060e98fb28a7227d317c40e37b2fc0492aad9550b7456f3d55f3be4d71962d94aac0307df9d297be6da6acfc0dd095ea6c21b17eea15bf7a175db6d2035c65723cb43b71be66f0945d0278dc077347aa3762b248d4b702bd2a14c701743f8048bce67137f8bc9bfb45dab7b8600631e6c602d39b816466490e35f22befb9f565e5252ffd61d0e90a9b04c561d2c7c296e26b20a13311fe04856a226e1abe5583f3e7390ed71fc243ec528d8b867ca09495f2de28467ea3478a3c075410c57de4f938c942839c9bace8ee838b2f0c33a08b6f203af7d1cb6539b3f70f167370d4ee5d1a57cccf88ab099613460e4899ecf2ed9e840ebd3d82e1b9dcca0906c3b5614dfde8c3b124758e2de658cb0508fc47f04e805e438f1a7f30ea74351378890c0c0c260d771ec28842220ac54d1b03cbd223b58f58542e293503e14d04b23acd90b1fa17c6e8cb18d0ffa927429679115e3e73bb136bc331b3a07e0e04c5b641c17624d99a811131cacc9bb61cf7d3876c7d9f41d49dd41f4db3ddc74fb2674b0e23db50dc3494f8ff620b681daab187d3d3ff89e5c4bd3bd0d1c836be7dc7d95456756048af345f28dc0f07f133daed3ddbf90467edc9dca0006f5218dfda065f8c0b67ccbadb848980861668b2956b69c15af13aa2fede514a6f5bdbb615c7d9c33d04d0fc44abf45e9f5ada3c910f79b7e045e018ea94241a6c3c68f26d64dcab7a29f4b522fb4634e8f9ab412ddd3fbd9e64e3c41a3b6b71fca1cb220c9adb645423f417b20c5ad17424a98a893df6b7575621405a821652b07ef5cf70be02de34efb19af24e5317aa19a4814fa9d7841cd8d75dee3759aad2ce0b0f9b997a5b7cc763f11cc5ed59efdafebd105a4d36c41da6b5ea9a2f57f0deb02de6da5c17e0e70efa32af72d75b55b2f4204fae1be2cd781c837cb08854216b25cf859fa366b7760a8f1e82533a41fd8ce69e0179633f7359db1d31de09d014ed98b92bb4dc212fa2791f1924159369e4e7dec36008771dd98667e4302427dc737552e2367d0702c8b4fabf65bb2901d4a8fe3d75d1d516b3e2ce0a474c45a0de49fa34e22f93a43739ab7edf1a97bb1ade6a5a95c2ffb4e8ff8c45ea7c4477e1debbf8095a045ed1364b41428d1fdb7bb431a2e539fdf8f97d79001c9ec960a8d345efb5203e2ad135342e18ed2f72ce1af31247243a60959c24b869a8d673d47cead68ae822fea8bb4bb5bc95c1108e2544ed1fa813c1578b28acc6ad587bf4ce4cced075df2adfbab56253807c8f50a28765d9d779c79f3af8a522d55a2013afb8218a27f910f2754e67cc47c22405f4fae613e314c6ae0dc0a6c19510324af89df20cc19fe9210736f862c5bae8a2b2bb42c81c3a52b8893cc45e07c6f9396a8b84fdb0e8bdd1bdec1f73ecf658801259a0f9b884c8d220caf8f87cae99d3c18f5504acd15f20f3d5bee0834a91ff8bfe3ec00a0fbd1a9859c1c2b574e76d9dce3da0e0e946da71075ecd41e224f284ff7a7322145b9198fd625cc337d8b00cb9c50d65f7aa64c4ebb6483f681c904327bbb7996c3230cc1253533644903d1abe8b145e6bf837d29c8aa42cec043df36f124853f0feddf0499ea83476611cf9d08b32566a3835b7ebf5ce601d5609d81cb264657ae4ed564028f5de62fd3581818085e7f907a02a6418afdd328e8e133eccc2bfd101838a3df284c65d03433a818986b48ff12315156766df2f7de342c9e5ce84f2428bc27332b1edcd9ef24bbbfa57c0bfe92564d54bf7f174c0c2844c03028d0b3e079d11cccd88809e84bd1f3fa9fb751091d3762e1a8c6471e76217e6b79164029b460e70166444d26fb3d6e29ba2668eed584dd6ed6959db8cdd3a25aa2e6692402c066c22aecaf24b1183700e71f7e70df734417a3cbc1418eef67fb602ed341fbeeff7fc054eaec75b2eb839457cc6f324c660bd26ddd3c3dd0b8695cdd6361dd2d7290c75ffbf6aa4326dddebd5884b0e1ec73ca274b0e3a02d9efc50c83fad7dd7eee2a232f0b8d9eee613aa44a87563c4d5609644eeec7a6f5751ae93f9d5b191f8453caf99c95c984fb36650087a79236ee9543ddcafaf3461c039696c5d0fed14a486bbf07861a9179d3ca52980244a9eff92332022ce0e8dd066b695bf64af7e1cf769de22c515882c6329c59faec5400b9cebfe0250c823f1bbe62874018707d214e45cd2116e1804b1a4af7cd4c5b58301df33910410b58f0e778a1821b00e212e26dcebb959fd494648c7bbc02458910a1b70e9a13c1eef4cb798107c3d37d5d3ced723ae24f20e2f126e99c298e387171fd6aa02723d13c6c94e2bc54e4a8e4304dbdd285981d86a9f8d0a8879176400f9cdf33791618f3a7773212323c107a7109836b7a0a2c1b7da123b5c632a18b60722e134626d1dc16e9fa9b7d1eeef8e23bceee14979d45d14509fa132b4b4caf870c9c52ec74d832402347409afa89732af682f5da043ebeeb01dc7d728734f657f847da6a81fa2101d8b3ef92396250a8fc362a7f5cac61861afe1b75203be0d0de08ea7904fd57cc11f459da2a304334db7a932315cd642ae0f0526f44419819ca4424a235e80bbec9d1c154a688ca7bdaed1f106914addcdcc1d241eb7dae9e9794d7c861642d259964c4965382f871dd111ce2df842160e4b069c46209da5d7b884d2cc6182ae194bcd0a7172ef5437fa0ab4c7c876e1aca266c6dd17352f60edbf789ed9cabc9cdb093a7028dc6ac598e7d3f960960d68b7ec70a683d47d0f6763b6090e92297040872d81552fdab78604cc36b355397fb81241dd9e3e5aa963c7b25bc116ddabaf3a2c09dd5e6213062b8abdd95105c7bbccd3b750f45ccf82f4c8311916e0881728c8fb4c56cb4918b62231c9a0985efdbcd47def257c954a889b5bc69dd393971e0c599d52383d96bcd125e9ee555a5d1e62d21f6139c1c740a145e1546683b3acc36bea1da113170e53ee517ae4b90a5939ccc3c27621f81ef640d828583ddacfd9ff291c5463918ee3fc3d1424477363ffe898619969a2823cc0d759180cca6dd0908f79918fc4f01f77308223f74a8905d500b9254c774960f1aba57a7702cd686d40af23e6c86a5a77c5d4de1850552342552f6c5d11ff2d82f5fb1492f2333e790bb6104bbd5d292e3a25b4ed4daa2b5b8dd250987d3157ed69f42fc084767aebdb5338309d7f2b3a0edcfd9af38f0b80f5c9a700e095bd352446e40b61c39b8e6f20ac698a2a557d034f65af17a20720fbcb0df072cbb72b9f288065003761e02b78eee11707cf3d53668bb2ef75409b1265ee5079d3db64098e94542cd4f02d51241870b7abf6cd744586780e8edb61e4342137ec2519805e74f2b2be7a4083249c1e186727421a55536d459ad54b1e56266f04bd336df7a1ae1e52067549e65f3aa616114104840b21cc6b281009f74446b3b5428c3560dfb2b173455b955cfbe929d047b2d0350fdd005b02ce896992108d0b457f9f36489e4ead7d30f573dd7d1f2ef78c86f22a1c2f4fff724c34599165882526867c1125bead0ac484269dcc523c4e3978d7c44047ca2512e35fcff6e8523dd203e4725d1c902d687e2a63f34c6a55f6ebd2ddba540226a408735a884abd3238ae271bc2516f5e8c71e6e5130b43689b9b062b092fe8bf3afd09205a60ce228cfc563653acf712d975d2b2a76bd62aafd32fce1e29179ae870b56d5a9f1e782277d60fab4b132b7b96f3334940a3248c34cd3bda92153f337b3084563cf7da769fc28c85a762567e88fd7fbdfdaada1983f0743a8b774187e20c852343bdb6d83a9b11f690316e3739668aed40f2290d79e034cef3fa7e01532ef707b40aef24fa40c9b8d7c16279fc3486221c231907fa0b2ae24debf7b3dd4277ae830597eb3aef3a7365b0d19ccef40713c27f42e85bcd8a2694529b4970fac77701ae5b1746379f0c550f2e10da4bcc75fb2f304d5c7c6e353b292faf87459cfb724ef2156bd14753820d9031af12d21822e5fbc83286a298ee2790c0663a615097f4f011f67a7683e504412a1cb050b6e7eca4ca10264613abf5cd990e07c7a45c6e6848f0b2b2b49301345055284430124bca3d566001cd7967fff26d1e6f05bc5a0781d1c140cdace59594bc5291814c10e536b594adc5a5f402264410cf07bd461e1013b04f0e5059add24245c97c085a86b176a32fd4ea5b9d0ab5a011da7b3da76472e6c88772bf0d02a64ef6ba6f78e4a8618a5546211a075841d32d2451b91611ac2973be189b1d1c663a6a18029b6759b1d0419c4d868041774faee02c54db846167599586956dd2dd12ba9a0bde0ccfabe6c85b1525edb2f3c04ec57ba202d454879f2a5c637d31e13a73b37d73a4afe13f1c6ef271e85bc912780231c62533a8d78c07d646a0d05785cab4df7941cf6e0264da984c6a5647ef740c713f3229c16c5fb2052fe683347139cf05e29a2e280dc467d7fa28066abc5c0bb508320fc9d4f5b68228f082cfb51fbcbdc9bfdcfec79548a602f63702066a9af847ac3397aeeb6610e74d7b8458b14c21410bda4b13e6a34622535d21f7e6d0177d102be72fc7b8f319dbaec727886ab533662425af83ac1258110129c320f6f8b2ec939c91bed48d71156513fa49dbfb2579dcbe5441cafbe99dd5f00a68ee88bf7830dd619eacd129897266d2bd92af66525a425f5452558f5412820a376790fb72c35914118219dcc2a08f99e41dfcc69caeebb64e7791555a8672a1ebaddef3761885c1ba39804d46383cb69d1f2cf25bc24ac637cb1510f8e482c737c20d8e5e1ca22efa8f3c60fa0612997f67b681c060d5a0d405933aae39625ca171ea7a018d762ac76a51089821be58edf6003edf4965307062a32f3c84d04af2dc70baaedee101fd441b1fa0ca3167419a3cb302f93dacc51129e971d80f959fd7b020b77885832e576596347c3e8b9844ef2d775ffff265ad4279d0c0bf25baef2557f12601745155aeb9100dd39ef767a62dc0104d6499c10c95a205555d4fc4d26f1e17a1ca8fc2b3bb15798ff098931aa8609f1120873d4d744ae4b88900dece4b74fce455e29881138c3f373dd38cc38317ae2e84129d802bae6ec0076f5414949ebbd224096b6bfa78f7bf919479ec2b8635d67caab627f02e72eb803fa2d452f77c5293f72454bd387e6bd99b167835465b78e98ca59013eff101203cfe72da70790029c1ea26c9f7600dd7767d947a486a0b18c91675c521b4514dfd4f3c7809dc5a4473cc423394dbe85e2004b69ddb0dc7b88afff5be29e499ae006a85c17be1b608cf9e8b47bad920fc8e41d0b2affdf0b04c6cdb05f2716244220b205f19f207eaa820e46ae5f9096711bcdc4cc65ee26229e684d97789347ac71e213f47fcc616eb9681fad7ddc6bca8bbdac4d205fa5bd9a955009c416e6b053e1aa8cd58e8fa3fc0b6ab7eeb3fbafa3e354a6bb393264f42cf1c424b73f064b47089aaeaf0adaeac8972cb1cf91d4a76141e2909a1ffb552ad1b4d2d3cec26b838522cbbb6137c415d488e79e1c6dde7c5f7207cad42138483c9e490b2728973c1f1fdd08578065f40dabd11475aaaf468a0f71cc5c3ca5932ba0706dfefdf895a1196596d5acbdfd635eb2acbf8105901301da18c2d2c957030f84a5da4b651c868fa996626c76c11bd2d717e0dd93bb78f49d49b6e653d060f4737818918afb3ef0513cbf367cca1d22c1b05c2994c6d32294145fac1e6eb61aa59cfd94af20300ae35292f19a3384ca362dc4e20a849401d65bf567c272920d4f508235dd69e2a1d518f38f38f22b003cf614a682a1a56d3984e82a5ca9b55b5de48390a9d71724677315b1736a680603244dc5e6bf81a124a418fbfe6682a50887af6fe8837beab4c10f5c09fb0fa74d390b2ed01f938264b50052b495c3e06e164e75bf8a7c254abc4e453ed244755dde7aa0c8f40d35fbadea457d78a80a646453d028b32505921940274a0d693b0fcd54bac6a01f521d8a5c17360ceb947c5a80b145ba6d7221ecff86de3864236ca99acb08efcffc5990b3dd705513b12b366efe1b0bc1ba3bc765603db1656f3f07fecddf9852e078decb48038088008d1ff0ca707a4b8ebd2bc58d08e251d5f1549f46ef14b15deb8ba0b7b30dff83de357e69e6d9cece94da7320a401f04887b9c793aad3de8c7b095affb77cedc0ac38977c1daf80041ccc7fbfe66819d5f4285dc81a8f83b15d486d95b183a3f0de00b60967164e07ad5f92ec5a12c04032160aea7cecc679909006a2223e885bbd1beac9ce47a90eb40d0eed30fe609fd236f0655bb16a3b4775cf2f8441492a8b03641a372409c6cbd292151dafe42dc6a878399e70aa149cd918d742478ecd769d1224e9b0fb9bf716abc8ad929d4a86b27a3f1e9a07f208249275ae6e5b462233b1fb919083de9a6c6da87ca88b13c3a36a17e7a2ab57b875156aea6fdbb42ffda3153957106c2a0ae128bb0b091ecfb2cdd0a350e9628545e5bafd204d9dbb81678f8b7eb26e13fa807995ea10ae608210315ffa13f2a26a1f01e56e7202a822330a4eed712a1a98f577a47cf10b8092da99cbebfb06ae33793b5d6e5079ba4990f4fc651ccc5315de2f80a77a4f7111523da95e7647489ae91e90cdf22670e3ff2c7550452252abc3f2bcbaf06b3abd3770c1e1efb8497f43772453679dfa4b26fab5463b487b317973723a3297cf05dddd1641e1b3080c6dba216dfa1131c180dde7842d6a4894d2e898d14f294779625afd667598182345c67a785bca76dcb6b243742cbf6502c560bc613845f8cbabc2a16d5e47b97fe56d1b2ffe4c0d5479547070c9b5503fa8f0b64e087b0e80ef8b9b6476cf0a6e172fb63a9c674f0cc6a9020d58747c2436cb44d7873ad1c8285502ae7bfa015a8f843cc99021b353ad8792ca027361bee57d9fc82a4af901c3999cc43cf0ef8eb6b95bf952902289aef47741cde37553e6cba262d6eac94b7afc089272380da5f36465098b31fea211421ecdaa277248348076050fb2bebd200a48cb33f753ac5e9ca83acc6c5e38182cac100ed746b63760aa7ab43f9984bf8dab00d5c2dc6a6c35ccbab58007cbfcb99769299540ed941d0f8d11c571b1351d75e3861bd9ef3a94f2dd51ed2a8bc03bd36ac05a3bf1ac5154a117ad0475896ad7b828668fd80c320f1f6c48050f5b8552e10be32e18d517086c4c5ff5d8eae9429a52629b413897292c83f6742ad7e89497ed4186598b8f713fb723f5f6c9e30e8ea2b973026d1efbe8c5ddba8e12fc2a42b816e06cc12b80c57805a77a151619931609a239e05571a297bdb0a18df340e2a799495c9d20b33732cc509a936a3a63d52584b425f18430830ccf7feeb65d69ae427196ce7c0520d81d9603a5286148a3367aa018643f1e49da45bb4bd98380ebd022e3b72a427265f121668014f0c04e83445a19c0d1e272dab8ff4e96890ae77bddf97b80c8f03dc7fb094f92727f476121155405808402ffa417ae5c3a3fd5e2a6ed8bf5b9f48401526c09fc970d9610dcdc04eb3a5bcb110a2f56fd1f0c016ac7b7eca9fe9abc38097512426f92e1b19cc557f56e0645c8691ead819b0155c5e8061286643f8318d72704eafdeac81b6b54ed32071f556993c26340675f5d03f007fa043f4f5987c095ceae6daf4a0b694f3a3110c1a0e21561696cd1805331d5231173dd71463bcf0b2df6fea6681a2f174f3e3400b29274d1233f47e8a0a559c8cf871e75149dc54a1f3bd0a26844e073176ef8f065e09988b4a1f09c362831d0eb36937fab1198813b0fdd005313abdc0a00b42f2f612d37a47edaa9c5dc3b8e866acc5ef2abccc3ddbbf23fac3ca37cdc2fa990907fa64929914d345fae55eb993eaf7b8ae57fc24da6b2930dd91781d932f5b5cc6db3d23c5de58ac5cd638fee2d64b2db2b568da72872dadeaffdd72ccc9364bb001bec94e046c3be98f2d652319231de354a2e90410a2eaec7c06ddb783d95e8636284d2159460b71251be6405658cfaf869f41ca91dbe7dd5178bffb182a338dd88bd1541210b5912410ebfdaf44074272c90f5b66ba35fbe28fc33229e4ebca8cda41ac2acf7fb29382208b1eebf7e13ed3d330508bba6951a6bb1ec626bbcb3481205486183b2d023f339f56723bd68ed779b62877b39f35b431237d02dd38bd4355617661e2058fff5ae98b7e65349f195d6e8f3f4fc9d168d46c115cca84bd68badb5540a2e9d401c3c4c01e111f18cc6b738a69aa2697f2dccafb0ae7d3d36bc93ba9bd11c1a108571d0e93f48b8431cc4dfe6b20c42b2898ce1352d651c3b1f578958b8fc44f31d0f50a99e3ccd526d20aecf5bd2af9fa9f4f59e0eb019fcaae07cd598d0bc1d4e3cac49026d4a50abbcc016a6605c9b318b82991a2fc414353a3bd51affdd92dd5d8cad0f643419b6a7b79b5dca8a38e8a9b415751abadd1f8764b01883a3f168aa879b5078f9b71cf2ee5d2e7c77091fb54ec537ca1f568b8b1e6d02c1ee3ddb4e9040477e7b1e62959106d5f39a8219bcf5d7d459d2bdaf86d0186078a779b022b91bc42c7b964722061ac5e35f611769c06f69f3a5332729bb1a7a667569e0d9556c1e5a2e1bc2ac3eb6fd382ef11f7c5e213792c2d75351d8f9c21969f84f63906ef6ceb1cb26064256e7b0ce202821f90bb5b92ae2ccd205b111f13bb3f15333ac6214cc035becdacdfc90f84bc9f34561bcab3db046338de8c0ab1ab135fcbe891e06174636d0fcd51bf97cf2ad3c2708c47ad0bb4d87146b94ad6053ac0a50157b1c138d3a37bbb0bb50815fc64f8615563d24e7d44d02c2151eb3271e594a5b70ab908b66d587dd76ba2c7d6fce7ed8f8c23c776e1ab58f095204afb79ed147a3f9076e1c0ff17fb929eb5f5f4a0ce4e6475dc3ba5545f168d2636b8ee56ea2bc9964f99c4330639456fdb4cdb40a28911f972f0b041072f4425af82d9cfc60f45dc165b19462f19497cd6fbbbe9c5b8622abc69ce8513c810544dc8820ede704ae4c525aeacfbc23390b7cc7fde7c5063bb3626649a6d821a9119c04c6e8a37533244270e5b93d295e8c2f1bb1ea00002cf3df5bd75b337dad7a22278883025b2fa7ab43f062e993b275de3b2335adbfc9077289aa9eb2ac885e8c9cac262ae4a549c3e1f0e2b33ee46ccd06521aaa031766aa6a7cfaf7b9ce5fa8a6d92b92a29fd154582e348f9074f36e7fabfed18fa7d53e0aafe6e38ed61a1691996eac159393c3fd5d9ca6a1c0a52664134aed3c67bee7d5fd25c70d4dabddd2793c77a24f4d7b3b5803cb700d1b31ef29914346cc3319112653846235ee5bdca7843975ff0eb3b9e76794bbc7f63b81b787fe5a03646f700f876544ce9eb980425727dc1fddc20cafb7bd3167c4086d114aac651c490a9ec21448762955ee87b04a92a4451fe824fe650e77bae7c3ad2ea3819d0246d18b1d9657c25c505405049cb3d81e5dc5beb5e4849b19f83e678bff227e131905e28607a0f39471870ca7773e68931cae5e1f09e38119dd92382991a4cb0671f461a625c9722865a6c37a7520b8b6e13cbca4910926bb7c5d71bb4a9dd6096677945fd1fee4b3caad55566ac2f507be918780b66c8ca596cf5b1294c27835b4e96e20aa7b7732ba58eb60dbc412c3e823d164dfae0fea739148d5e518a6d05ee17e22edde4a959072ac213788ac90320a3b89532a31370b43de5c51b75e17289f943d0c76439362ca9c3bf55e1e916e3a4f4b2ba2554ae66a403c1f87d1d58bf264a54d9075a261f391c0260aaf369cc6d16d93c6c59804d6c0a7c7e64a6be3a1985adfe2a700588145aa62d54d86216bb8dd307cf7ca1c91d795f6f0dfec97322b798f4dbc01de1b7a7c82bc7c61aac4434e6cc030f309133c5bd12dcc7def4e6792fd9e2831b4a0e1598ecf1d68b579c03244a4ba5660ed4465a18f95726a287c7e341e6cd246e54daac230c12870f58e29170580d7221dc54e76c40df805c73f64611f643dbfa68a7f133f799943a16d82be5ece0387810028da3e7019cb6b416724a4547f3f525fa8f05680a6fc1edf3fbf7587aea8c8f5417b944a8797c7f5878411268c1a592ceb77d40e1dd6553f785f40c67dd6d5bf69b29e7583771a8959b9bac6289e2fd0be6e6fa5e6c9b31c30737a74ab591a6056c7dcccae2d9c25585036faa3be740cbf5186afb33acd13939d408c3904f4498bf0dffe93e16e81b2eeb06637fd13332031fc8a55090e444d18ce9447ad23bbf4f46bd8d72f8abc0299c8b9850a0327db72d65412716244eaf46078e309695efeb0604967fc94289d7a8c08502b9fdb98b33897e5fd3ae31a8c24929294b4b8f129d51c322b3c58f9592f6480e00d1d57393973c92013926e591dfbb086c0fc49c8cc276f7d485024ad79937d9dd90f2a25e43f3cc93ddc628371dd8c0503bfe659a591092c1e2f4bd864c5d662ba119230837631e8351c182474436aee26272c421db7de155f16dc1914b1b1565dcbccbf03dc58d5351f678b69507ff20b3157103115a25074b4ec5c72741e34e709e2257e1120ab8f0831f9a1493e89f83a2418c792adc5183b2ad7b0095fd29452be87b436df4170906aa1bb71c62324769f5be4ea1025be69326e7641d050ec80e7de024ba23f6908b626546cd95ae8575be03ae7105fe1f8d4ec9ac640e7f030232b2bd4a431a79f14bcf2b2dca2ae51702a21464cb0f812e228421fbc6e0e189e212168a76eb0930cbaad6d47a543b88a4247ea19c9c56ef3403a6447734a18a1fc2aeb2117997912218ec4b0cc21ad9db565192f81a2e63a7300e0af76aaa6d7b135e7c558e55a1765bb65ed049fe0480c4b9fa111236372100c2e404dbbedf41a6eca55ee1b0bf1efe267255c72a330ffdba4ce457478276a0f4e5e94c2ddb36af8b00961e4fcb98babc2920608face9cfd7ea054275a1dbefdd866ae8d2d3b0dcaeab66129da69fa79c382fc3a4c127e9b33d01faa71419e12e6d5df8b86420964221235eac5e459e86ada0dddeda81d4086a9ce08286940c89d5609b53ccde4e927c82ce7d04be217c1b102ced8989a7a74da963222985edd6265a78e410f67510235357a0a5177c2158db93a1ce7bf8ad73de4fea22bededaef7becbf37b98eaaef26c38f3f71caa8e32be4862b153a9c43055f9cfb27497d9dcfae0c3b90e26a8050ebdd3d3a915fbf3eb7af1d510bc44520824e914c3e9231575f9671d081934d8c3b79b436b1195ff6b4d66491b51145ee0721c60ba2565e031de91a738c86eeb14179621410a19aad6b098203d36a0719e6a1caccdb7105c9962e4df9978cf83033ccab4881c9bbfb71154cbaef49d55a9419b5695d79e5c88f1d616b8af1576eb7019b859deca64c882eb20be80fdcd01197d4c7bd5d8ca94f50bcb420f6f2119a85a8585ee70bb0150e3344f001d0f5f4e97e704cc0d50677ea0561821bef6c02982e1533e9e78d74cfe35425e55
You can also allow visitors to only vote whether an article, post or comment was useful, adopting a “like” or “thumbs up” visual style.
Outline buttons with icons
View code 347afba737ec4da9374fc0284efd139bf3f513e8e6e0378a531cd3de8f607eec9ef9946e9c17b46e18435219015e88933f1e5d907c4d8d99594f240abdcb4de2fc4c93a723c2c1d3e63ffedbae043d901d5768ee1bb1b7892ee7d6a5cc99f0cdd4255617e8f2a52b985b84e1b98411caed68e4cd5fc6bcb5f98b883ff96df4a4ad7eeef9df20b9a955e930a9e5770380bccf2a5680748eb996cfb58ea6bed0e6b84544ed1fc369837b9a413ed18388d5e56f11ba5cdd11a38fbfe35de3cef73f8adcc702ebcdbbe07a04cfde6ae910a39d995607ba2780dddd95230497e87ab4c7f0b2b846d196d33f832836cccfd864e268bdcb51c244a7d12481590910c9077cbc2c75f3cf368ef71a7c77095ebb79f221352cb70da8c1226c4945b94277be558a1f7913deee551bca8d1eb2d4aa7281410a698af812b5f4f718b3afe145fae104037534c724f85000e1b04c70d4af1dbcae103374bf95722db79bd1d312bed3a93a1a5b218a4fa69e0196f39a00446f734be7b8a51617b277d3870b0e4f0a3b526b34b6c025e7d1e41d0fc1e723d52f1e55504f3e6fe4ff0bc93f974065f21dd5457f7617f4726b780ee37f628534ea5000fbdcbb9365a5664ad89f91d7114f3df708abe4c4b4f55904165ef72b036c0c8371b368adb206226deda5acad31f75d8135a7307371f9f4c229ec5b5619af21b923fd8c3ca55c369942e658e0eeeebb49bd988c74dc08fb8aeeca83600009b1bc86f01a32b8b3904f4632d96352914c8a3b5ff010691efda7d0af9b04fc97f08df4c97a209c76b5f4b7f194ce187f9cb01dda4b27d4038482ca31589dc3de88ba619db5535f6a51f67d4b9234ef15c4494d93b1bd982275a2a49f99b8ee09e95cda4510ca9bc1733597dea8868b3f9c7cc89606eeb57d646574aceed02853bde8e40c59507dedf7b9a755b387d48beef588b66f02c32f9863adfc653ec546eec17e9586d403cf87a07055f8fa9dfec9cae456034dfddd1176e96a16242f51e5afa95a245dc3759a4a05a5d77fe0bb8d873e96e5568cba074f668c34103499f86e34935904865365afdad2234f3e48515ec2813ac244b06fc090e002a3d9c20753d5b50de3bae233a85a6b912cfc6adae9abc9561072c8d046b6aa7bccdbf463c6ae01cac99be07278162c7a7972e60c0a5105b2e60c92e4054cd3e5f098a45f2c35d37513a86efaf285b21cb8f3adcc1d7cc80bfbb8e7ee17797e99c2af043c345f360f6a3cc246594edba4e60266959159bcfcbb3e904a3999b79f2caf217b6784f3d6399f16eb5ebd6f5748099d25f0df95f2d4b1a947b3e0ad5be5c046dada997edf16d6b684fbe9e47507cd7eaee965c4fed956b3a945fd6b04bd575f39ffa86dc7321b6ff5217d6d0e514be495457b346eb7fe55421cddb5566cc5b12c1adfe3ed400a7cbe268a2f34145d86c9e707958b1ce420d84b798a40104b2d71fb0ae69a8200293f86a4b5a5d80de810252fcebfa033bb9b23ea76296936c32df6e7d9ea9cc31c81e2d19a731be89d06fbb164f71d3765aeb3ac172e628917280c1c63c5ccd8d6390b6b3f5729f4974b16abadb5e01b43bc7423db48dd695974868c68d46d53c242de3bc6b48da8334ca151245f9c822f5b84b311e6cff5a3cf1c5af62a8518081adbd191d8434e91f016de435a13a2a96e7966a0882893aaae9027771649dc3587d73d0a5d338c1b7c27078c035cfd0e7c5f86a91e2e5b5d2e6391fee3a040ddca53467b0bf01f32df52fcd6863aba9bb838eabde5f6e3c057402b004a19b1fe6f02ab8c9bbeb444c738d848562513f1fe8967b5c0eaa673866a0b3d3a58a3c0f6f1a0456b76427e90e6d1cecf8dd99708604ef7d86ecde4995d130e4111360e348a3d03e2d5e938d4121455668256d0c4992e361fdba078124d5480990c9f8a306a62996aeb050ee6ce4938b0c7a57ebdac3f157070574eb991316d1beabc154861907ede9b1b69620309d0e6846c0dbee794aafc466a2d96b048a3fcae4de6610838a3f8346aecafc441dd852d395f5dcb97b626f194ae0f28edd077473692ecb8485d8cb78b9ca894bfad0db9c37d144c31176427f52e779703afe02ad86024c09c44b7fc0f0a709e556362b2767f02956f5c031a86659952c991088fbbdada5536d111b20db1e22c48b961140d6740d374c21e4c758398dc1d366c38c1e5dcaea38e504966c9a2d84b23e099269cab9815d2e536018a9b85e4747cbe0a780a9ab2e0a5ca704a0fd38612a6525d2e228c64e34664a1b692262ae336a7fe08951f18537e295a712c8a3ed2b90bfcde745231a6c8462d
Post voting
Simple post voting buttons
View code fbd134ab65afcd4b66bba315dd7b0ba55a5c014838e0793a76806a04040c8fe416ff7674ee27bc7710f25a495d0abf28d68601b6db0df6c02bd8e8f13c2d5f8ea2c03394a6db86bdd49c7c3376880b516ee341695a70024e87a4c4e3d41a53108d1d206217cf9384952789fb9336fb5a71c3d30ffd5a7352fed16e70efcf36b07389f54eb3fd8d75741047ab39143ec5f0e7eb6483d6d0a232695e4c8695e20b30cc72e965dece97bd0ad263ec263ebd72a5348d67ac60919aa5cecba449063a60bf3c97a913f5958767a386237e2f3fffafb0ac64231ff59314074cdc134e0387d5a2442680651abcc32b97c4f8da97a0cad47bf7d4f28dd9aee39950ad30c694ae8cf3347915eb0867281ef52f76c68e9c641430cd101665882506732c9aa538fb0b4f5b53e25d2c0a304398666a328ebdf412f0a9b259298542d14656d12913e050268bb2ff36e842f754cf072db407e90e4741ac40e8cdb62d49fd15d515638a95bb59fc9f7da8b2f15dd2e6d4dfcf3b1c91cf728e4ff411786c59ff556e6daf39a9868746cbbf8a1fa8e4eee4ad31389265f2818bc00e40ea2904dd9a5f7c1ec45f2c3e8021fa75874929096d34de865f08879f5c7bf3f201d8287b20b4cbab5b4404786fb249281e6e7e798b4dc90dd9ed8c5e0d9b663a387e27d54d85c4a2b591d31082b6db8e8de697d54705598f0f4af396d6a049721028a0d1fc0917ebbcfd1e838c401259b873adb7a5424dbcb79e41ba2e54ea368b79b6f169094aa6d7474205c1bf9c8627952ccb7ef81eabd09c3a244bdfd977b9854f6847a06f0e9c191f00766741bb62e260295b95248557485b87e776f0a884dfda37509dbfe357aeb334d1d47342d690b9af48e4d25dd3083073cc3dd040ffe20cf4cdddd3cb9002e93b19603a00ad890bd57c713883574a033862e915650d0209cf8a3774e6e0dc57cfb0f88fdef1dd09b009864a3df1bb99d5460f76aeba2bc1c82d50f74b011d3acaa9af3ce28d5d3c337cf56c1d2ec588eb1af5c21dc66c53f5de7b49e687b43b994c53782ab0e4cb24a0e3dae46fed8829082fbe23cf59cde203602fd4ea1b7dddef50cb4648310fab4d2e1e220c41afaee945fbc63d2764b860ea7cc8a353825bb2d86524654991001461d52ae15e4bb42b3691939f83fdbd1233c7987e2be29f9b54d201b8091059c6ebbb4eb960578a62afc7b825ee4870e387de0d754f1e90b66c5c348f58179221edefb148d59f901507e503f630cd871af6d1595f9d18123e2ff4967467712b67336b4e642f8d3916722a0ab4b8a5e6b5ef0ded85fcad42d3185845248a4bce65ad173b69357d847d42c4a6ccb8272e8777772a3420f20f0d6a03972a78f0444c8d2162f6cd3d0c7d7489277879949b600e160f7e25bc340f9fd3831b95c813dd158137cb98c4a1148a21331601c288292871876963464de1c58be2b3cf677608ec18f2ddccbdc69ad676b6ecf203f44c317f3cfac9947d439c4ceeea81005cea2dfb249200c77c877bc1e304014d4f7a9a2d4ba908b8c014e767d399185c9bd6a435bffff095b8bb0fb36a7ac5668cce306eaf12ee2494353930c2e8a169407652472289492530779fc934c6b5d802b4cd4c1c034e9f146ce93d55b9c53ff3c9b098639c195153526f0125696106131c7adafcd49fce972a990a4d5a19e890ee78a321a5754f3517b4ec7ce7c7e3a225d90f9619696db34a026a2165143a8b7cd9f25bd93a7c1d3e99bc8f35ed89527dda29d4c5d2621ac5fb17b65210f75d28b31ebfee04c8b8757390bd02a3265a1d31e06126172fb57d4d48c120bbc629505e7dc8ee276d5c9c07924b9d28c0fab29739966c079ef9621183203171a134c3fcbfd0a887d238ad100bb6cf758acd683b910e2cc2a3b17eaf6e4a76e43ad5593f90c2a7be1b5de92c72b8e6521ffac74262cd3d632d544a630950e34c319f65a9fd115aef77051a50c29a2c4a5a946147cecca4d7148147b16917be058fb2d11d13309b46720edcd289358a1a0513fe75054aab89a1953c1cf6b3c1a8be46a62f6f3912d659d3cdbabff4fe6e9dd6bcb2f0931353bdc2c29e5fdea326c7fbf7b8a688b9bcb8c8d0c11658e3e95b110eed02e9398a6ff600ca50d20686c650839ddbb740c8313cf2fe81549248652e86e6
Comment vote buttons with chevron icons
View code 95aefa931742f52480edaf01c0f90466e2388d0314d4f0c8f9a4fb0577f41beeb19a68c47d402e5458ed3e160aa22de26860b29b24a12421e5e3ae7b25e358ffb3ddc22d673d307d3b780cc29ac1e1eed3d32b05889894c927e458f32998eb955fad09cc564e7125dd26930ca344ec58451f551207a2a929658d84fa413b6cba41325de9791821ef7efa394bb1f2d4284c19e3f46e00767c83d0a3d81a2d9ff2d047a51cce1c128754de623ff2d916be3695a18100634fe03bda6e3fb03796c7465834959a51d9384f8e84668e79f264d3e037650fc43d0f2a6eda9d8540fe4b42d2103b0d3612e768b14a70404d1e5c57cd7417994f340c5ce01f3df4ed03e5f3ebde123a10c5112da09195e61d9945f4f4b8f1dc0af54f5b3a7e197e8a18eef46ead295781ef76716910eb46a18981a899d3d8d91b0b3f40770fcbd10d3d3ec931ae1f4ae57351533eafcb9c07df5e51b2673edb774c035345ac02a0e5b1e00a25f8ff7219e8bebd580916b1c4b1dc575a49d43a37086ea9a7972c1259080fb3453914988e3c2a4a9bd42da15c2e8488ed3bc1a3db7b898fc75cc2f40b2b743795398156bf6c07a545fca3e6dce2ec6f705abafc0c95f957eb584a43b1054e7d21465c1022f7398953203af244f71d3ef0b2e23622b790bf869b403892d3e0021740336aacd080ef822f0f31a1cd6dacb79313e3cc3e9b4377199d7d71b6a35425b293da1b4a890f711a3ea75524e670dcab7f29c9c222de351e3ab8adde9c27d07c4fd4ebdc4fd70baea4465b4dda88c2362ea5e9f67c64947ec4d274ed33aa91abc958e9ca292a95e2611f94045f4145ab05c86ac86f4ac3cccf9fe2acf7c63457dc36fd2f1c9a0ee63832832ad30f616462e53a656055cc117ff0ad5423f53750676f9233ca37a45d8bd98e2bdcb74faa913b1b2b896cfd9dbd44cc5ea477da0a062baf17a42dcac15bc91b9ceedca994caa9910e1db51774857b9cd03b99bb9c2bad0f4e6399c9e887cd4e8115389b1a095f888e6fec624e6f1d237a2702c1b41b5a34756f4b6dfd7267b6cfd65d4f11a743904eaced643287d35b9426
Comment voting
The following patterns are intended for use with comments on both Article and Post pages.
Simple comment voting buttons
View code b4e53b2d65cfea5425ff7f24acf399567dfd0c0cf2ae93e92119836a31138ec5b3ba87fb0420867dd1a8962a2b5a39e22e2009a242f5a024d6597de0e6380afb8f77e9197bc4d1a0fa19237a7b545a7a5037f2286a68e93d60aecb1847d195bba21d45baf91caab86ce12cc1069196029303d14f59282c520ab093d2eded837eb5a6301a2ab77be0cad1b6c6cfd5d3a3d16524375f4915def0f768dbc9df4c635d0c69f02b2058bb27348d3faec4261137b7df87fd26d8915ac16caf76988f8c9f7046fb8e19b6d3a0d637c00164a290baf2cdb9f51719e4a2ddfd7455793451fd3e0ab39036e3c299875ae6e6473128f3b49da396270678f4e049af3b28a78e075611d24157e625917f29049240bd1d5eaa5a5186c7f28afc8c588e6c2f974154de6a9dfd439a37d4142ec3e35f3a1ec517557c53e09f93acc17ca23ddf997b683f6c1e9e0dcbd6734d130a5edd67e91b6b1a24372352433714e1c25000c1549b0ac8bd0daeead8d2cd88ed4be3cc64b539019ec49ba0b6b3686aadbb69e3ad2ee9dfb08ce0fb854281e4c68948b567dfa7d7dc73294328ecc315f3c9220ea7a0e2644c44bcf4a28728b7791257c2331686c1d679dbdf250715e7a2f01f12544ebc41ed4ef31459c7cec9cda816f5f131cbfc5a30ced66f31acd565871871968866c9f5a5435785ff9d821f45af067e2b17582d468ab2d28f95e56576e69a7c546971222e06631ee0f78e9a92a5525231d74239f91e18985952b49dbceafe2554776f6f48794029051d698c3696c161fed085b8ed5f5759ea78a6d10c8b3cb8de5120cfe67f59bc77bbafafa6bb2b38b400f007f94547c188afecca20cbca94f1f05f64bf3a357f604ab13bcedf1e94276503b9fe808fbab072d9c755b6d7dcac8d557a181f1f518babc21f4e107e657f20b857fb3f97164e59ef177e1b7ceb28243d8d81d776d313d1d3822eaab187b14f77da008ec02671b4c0f3e70b2412b71cda952cbc420f9246a79e04b81559472eac34b5409d381ea8de019b10d2ef0b464cbb7a78359728d2029456a3fad705388b6872d2226eb7e8d7428df101927104fa8ee06c4a8b8f139c20d444106b424144d8fa19292d08e2353b876bb024fd48508742b9173f958dfda1ad5e026496b0506976b4a2b0a9465ee2ad6dacb5d731a0febfc9663f524a8841f3f668f4fe5572b4fe8cca4bbae4ad9be2d0c75bb217d61642d44576ad950f33f45b7c8636386808b2ac970072ac4ccf86195d3d7a115f5510133be7d31fa6eaca48ab34f525ef9ee9c0764703973436ffd2a308bd8c991d11bb1a4db28a4673bec4014b786b7e355b3347f6f1b20799c40fc332e9b0894904ab4239509403d9fde05e1720574014a8a6eb1b9c88a7a34019eaf98023a0ba8ff39d258ab72a5ac92c3fc36d819eb8cd5bfb64be635bff47fee7f6c836ebc9c97983fd7bdc9b383b9ebacae5971e080aaa3284b4a29c159c16546bc2d7ae34b4ce2a77e1d097f41aaa0f2a4efe855c8760d35148df38e71becacb73fd66f944a3bacc5f6288100d43de0b589f82d511c8414c0f3eda33708fa7483532d96524c510be03a3e1339c893d48fd1eb70396801bd02f782a7c85427220a09b4bd0c87fb7e970e1ecb6e15e2bfc64a47aa574650bae65b157c5501a37108c03bfaed6ed83956da23be823ef3d1857243d7d9d59683e63c6df4a2ecfd5753506abe272d3425a331c9300da5e9893e72358516a247483fe6ed9ec2649d7a0e960c6f0a15ae88b7dbe72459e3a1c60ca1cfc194160ec4e1a58d7f57feb1465703e807bb626bf2284560933759a884bb694c1dfc4245dff5c149d60e23aa0185b3f4800876968bcbb4c23d98fcad5bcb542124d85e1c8bca6dba7045c2b1df8eceade3303fcccec333b8aa29f19618242fb80e53541998cfefc5f214ff8777cc40ff47ad97b2c8298a96e8147f086ee20b1ecb4a69d1cb8b4c25bc5530528109
Comment vote buttons with thumbs up/down icons
View code 8e066404e7cffbef8a4333f23817269e36befe635979d20fb72a4ca90d93801692b7f6da1640745df3954661e0dc8f17e747db14c498280a53b5dfd3f94f8a158651c39d0f162e90b9cd47581644cd701432f07638da782f4b22350c33ec785e566614f6ab96ce91d207f3c521afb8d630f9a0553348d6712524a27ee4c15b237079bbaf37084e117afd92cad75c470713ed582843288ed621f8b652329b991405c773b0facf72b54380efa68b9758d7bd05952d04df4b648fbbdd350bef6dca2968eaab0b9a509459a7ccfad0f2570bb5507faf7fe3bba22c081fc80b59a4021d8a2bb6e0919ad12bd28d1b37b0749575070ae9477e587eeda19c64e1c176d628dd123491d8301657e2393e281b2ae938733d39574570aaaa0dae9f8d349d0be08b42ab29c0ac8fd56c73090427999a7edc3ade5c5f1cee79c4b6cf44131020a1a8d06e7e2e08e0f19b5b589ebc8c26e96ebdd01e71d873a5f04ffae20b6000c2cc295d5e5223c6f9b220de515f71ff657cc65e897d22f112433a61b54f7c62a94fa4069a25b1500225f4a3b667a22273ad13ec80d1ef6bc41be3ac9f6cf9c45d05ad562b3f8dffab04fdc275fcfa4941000bd85a2b2832ff06d066f56a1cd8f7aa66298ec0b471e6e024c3fe562e7c11e80721baaa31f1c237a59714f78c2f94a739685dab76303bece6f6ede17739f569fbf4e2408aa3e3bebdd47825c0c7204f863f4b47d9b1f1d16194ea43ecdfd88e64e82ee34ae4f5354def23a96e2fe7262dd6ac78e5ac98143f10f7cd39f5161308ac466cbe9952e37b82653abf37a59e50af787aebacfa0cc93b635943ed123fb7a83da93835a989d1d8db7fd86f58726f23efd479f0f0acc7a24ad3a58dce9cf3aa076141ae7d22aa2653208f1945b29b7802a89e44b2af669be0f60cd205a821b5554181d86e7230fe54f764f6e2521d36807613bf833ce152cc36d9d4c442ed0a95da68e64acd28817c6d0dd83e5795fa6efe449bddc8baf6ba64d01dacd22031a0c2c1a2afb3c66e27d92a83147a056d157c742317d01f691a83b2a75e3f59cba8a6616680be9b38868a50fd7f4f34bc4fcab115e8f1f4ea52cc7b5aa20a524fa2edfecf999b305ce067f1f1237b69d5943762790f2da32f3a4ea12ec70da156bce3f2f098738802be906aadb4cf4f823a387376e1f80d662f5143db0d89b4dcda57efe24c1ce100221cf2cc2ab8dd859655a941f88b0dfdfc00f745544dc0cf0f6f2de80dcd88b0a4fbda7a9e6a5f56edfaca989db97c78604a7b839cff7cad4a60ba26dd6eb24a5ba8d611651bcd3e129ace9400702095e21d76c259addbaae8c58ad62488ac4d8b5bc62f0e8d4b42a2f12ee32de6519241c9ad7eda9df851107104e93cddd94b264c58977acb81ca63d021b97d438790233b0c6bd9619bc6c538eb95f1359052b201a70598a70db56a878ca51935b26711948bc37abc6b7618a1d7ba0365715d169f54b61922fb63ccca5f75ade6451ec62056b020ebebb767bea76782ca25b1ec6cf45b186bae06d36508c80fe765d040893e3934cf4a5ffeccdaf5e27b20b5642c4e5da7c259f154b21366704531bf31b9ff0c2497e2adb1692be921ebc650e6a46dfff3f7fe893ac47cda4b25f28c439e4c89fd017553a33bcb0e3720c29c742d40e433a4b7cb3a89ab2c2db9870af72555efd2bbc531fd7544dc204a074710282492cabb20b92f14c9a811fad7b9e4d169e40d55aeb16563bc70a74f24f1fb7b6452aede6f322577a7300609d1ed0435ab7258e8096e0d52abae993d77079efb64842b6b7783482d45afba299165edffdd1a0e40bd04e1f5969c58edbf8804b14c12497ecdf03956a5f6963e3718246ec06524dd2500d0a2a0ddb83396367a578854631ef8902d11c813105e63936b4f47dd8e6dfa1888849f6c111ecd70825fa3ea668483716c399d01449bb8a8be1f4d75893e79cb4f0c9c07128810bccb5d80f0b2e95e88ec5f33b85c43044874111ebdb9a36a7b2532fcd66558de88ba10ea077ea7b77a5f8c55bdb5b9c8f3bb7250b5ff991e379b82b51ab02ca3df02c11bd08a115613b4ce4c48f4219cd15dd48d4f6b5ea3309a37afcaa3135d6b715902896d24255014fb3ea415e86f0f273f7c916f23b73a6876a384a6dbca99082b766f6b1b3161d1f10c600ae63b519442e8e10f26b2215b081574fcff094f1e01ed1282c1650d29ccac034f5e1a07ebaed5984a6406007b2c15aeb9a374e9c85f06e032583243c16e2327633cc8b56a88bdf1633a65d9852bd76b5f994480816e7a9f3a675003903c570faf794daad5e94188219668c68eaf6cfb7bd7e7e37d18a08e90e0b323198c8913d1bc5751ac44135ad5015ac61cc618773ae108bf4c15ff115e2c8434ba8da99c656d18b7212f0f2485f7445bfc250222190137af602d1e61c1c4ed16c76e488be9158f3ce3e82930dcdeee938174e0f5e1b452bf98d2d22edd2c69b19dafdc3aeef81c9822a035e0f215d978d839309671c51f342120806534a1fd17b7d808689d240469335a23159a3572f20b893d22979957a0581ace7aa1252ff1bf0a32783d145814093cff763448e5978a7a7b25ef172a3695aca52d52daed49dbbfdfeb8af8320252c47a257639252c3e0206d0652e75166cf956559ecd61c188aeaeb1161916b4dfc6285fe4501671b7343d01f025f39256e99b10cba0f7997a6c57dd8b744ea7b5ca41e0938eee262ce98904e2e333dbdb7c6a3fd72985d6f5b042cd907b34239ca237be3b81ca88665220827a211c709cd94f39feb7c9a9619e85a1f38007b556b3a82f0b8b846a46c1aec0761b06617405f32dc301407650503ebb0e6d6c0bda73637029c56d2c841bb8d06d65ad64dd52cbe14e6ccfbb6a5f35a868f8220cf16f4b97879b99e5b91763bab94e3112c11c717af607f5ddfb7ae7cd6b98634a7fd7c84e3f86a7c0f1e71b3128ba48bbcd6f00f87f83a441bf71d095e1ef565d052dbcb7aeb1a2952ebf6f88b54b747d541933001a19a229ae831087fc2d3a663ba63741b4aac508bda8c3a5ddf79be0a4359cd5b9e0f5426840d9c3942f14309302ae02a8d3eadcea4dcf14a08d969ecb0bfc5da4fa0f2be9f3da35fab6e6cac9ced1a513e00a7663c04d0ebf3a68c70ef9674a149530f80232fe498a28e6e0bc02d31e5dda3f01870c631ed26d3f7ed21cc5d7536a2bd2b81d33b8b023daead59584810cc21b720097030efccb519eec14fa3de379e62e34229fa059c83e4b5f758339fa5d09205c8f5502c29692030f73c4dde15a4f9339f7e2a5e03d9b44a8ca61fecd669e56c048db1ff2e2cd383b08d48651732cf89f468e6ae55c1a430ee508e1629e2ddce0f75523bd7686eff5bddaff30ed478aaec2d5e447b508fd5d81b1118f9ae362918bcd07875bb837d25314c8845c82423b204308b089b9ed68040cae0519b6970a75010613d64bd24ae44f2fc21b43b812092686d5c554d7d38c525f600a56955c1003894cc828110277fde978c839cd5166c2e82947a1f94094aab886f1bba1b8b151abfc12e319f1bb1a957424e2cee52ee7a2d926f53dc6ffd277616e7089f11f4bc84f7b66f02ac216f7522b43b493197a8dc7e59c973ba194b9ba5579364652719731437e20b233a1e84e3f4a4cc7fa3a8d01a8017da2cf4aed8790ebf6c49feb355a3054eefaa1fe9c
Use .media to present vertical vote buttons beside the comment body.
Vertical comment vote buttons
View code fd0cde361f71bd97577b6e44ae3d0b0d143f4674718b80023687c201dcc99950fbe0f512908aca12f908f6794ba25a5e94c420f3b0be215b007acf6f026b553b3f516e36c2758116f398b2d40b45c4b0149aec268cf58ecc9b649985258396b11c1370730f51cff5ce008b628575cabc13abaacd2585ca97269c73c6478b8f195d8a67ccc4975da8f377ffeaee3ac500847daa7083c1d0e225b8fb111b30fe661cfa18a17328ff4188f464f287cc6c02725678f94bcb1abb6ad684ee000d479e03c6a33483003e343553af3184269435a6117f838053c6ced2475e57704fc75dbf0a0f3527153ae6bbe311d3313609b0f238b9a311e0c4ce1d687e1c3b99009b5d88881ea8e86cc30b23a5c9d79508647d1b728955edfe522cb39303caa12460143c6f1ab9a7333b3723cdc812215755bd60c5d8a6c912796dc54ee7c701e6302cdce7871efe259b4ec0055540dd610da2ab8e55d9b6c16bfd49b9777c4eb9acf055fe70bb9be8557c4d3d507577a9f12c1a009023776b44b0725804251fef3e1ba522f80479826dd13bf970360a6bd376378f029548b8449ad9cbb549e87781eac528932e751395416d0c93339fe674f448ef12107d80b74638a97f946c0b7a9e55530b9022b76a711367c6d103d328d2fd153e60f1fab12cd96f3c61053fcc0540ee6784003c4f950670f2db756fe1a63856187aa51f2fbfc4c76af8f35365a2e96aadf8438e67d02e48e21a1dbd35baf78c3b025329eea3c841a81507220e01fc124330ba24e40d0d19258a9cdcce1e1b7200ab47459ee11ba4a7fe83e305d96c7fb8f1e1856ec95bae5b2ca1ac5f36a91d48732a794f3eeefcb12ecd4e5b7c85942a225aef34009517630cd6a1cc57705b99a97880df7ea534c3da896f27ca58bfaf1845dc78deb8a12a1bb89a478bdafeee85fed66dfd1b46fa9476c74cc962b8a12c91ade116cd2e0fec12cf5a71aa747e6bb863a46f2f5bda57f0e89b272f2639a149cc64b4d833fc79afd413fdafeac09aded6e7cc0a68266efdfe7a46b588989f4ad9f57b39adc9ef60b7ed542fcffc4084df9e73fb58071aed847cc476f1c06b887e3dbda7057647b8310a5643313cae523b9992dff22514dabd68a36e5c19fbd043247b39d1e95c30d770e59a9c205c47d232c7d66f9dd67ad3f99dbc6b9ee401af72c6fcf25a7008933b4c4bde747b489bd69ac7889df349034d3c7a84d9e13f52c218b9a002d6710450e16a540478ed1caddef6112a020c8157085904816fcc37847717f09c55cd4809c3ddb4c66055fd50e02724b34102151baadba9ec4014f175a81f7889936f715e5b2829d2b09f0334a8b77e22dca9bd0c0fd2afa2c65281f84e8c15d46a132054074df18c2b3b78d99e57a441bf734386d3b505f1157729643944b1e76e5a9946fc343b6536d06bcb360ce23b65a102e66b0633ab50671389677519a96650e25db35312715b5fa5ca84752151a63a3d49f373c5728cd0d529d6ba9141f8b634b739ca5dd196086ae8cdfe1bae7b9244b28643bcab96e3542ab6adca9328053c45a38f3c4b7a296663105442b0540fccbcb3134c10f6bbeefda5d753474dbd76c8ef86e3f9ce866f5d16b8f3c21dda9944255f25d2c059ac5979575ac8d45986d89f93b9e8f2f5bf1b5e49e2cbba1a0ed1ff52fead927767c0c78389c4830cdeff18c450eea87ed60f481d25983818e18553613a110afb435ddf61d99de346dda461ac4d6d061fc02a87023ece0fbe780b8bbd262fb998a962706208e2351509f6847450c79e7c100bfabc8b70308d7f9eb082d46a8698609983a5d4f17ea26f22fece92f5457b97f832a33a6829e9c06bee2fd851f0483bc76043e0cd20f1b83919cf0c7000ad3a0e7f7b6c8f5b20ef9a3cb7f658d0ad7b3c7a1493fdc67d67f5d335813432a461fe2903570c9d4221b1f87f2f3891504e9e7f40171e7c374aa1eea2dc3fe1a791d577ea1df5d5b8f03602ed779440c438760e67c9bd6ceb7dc9309b540a75cf4557fbd37c7e63b349d9b19f602109d911621f260db60475e691
Using voting patterns
Voting button build upon the {{vote}} helpers available on the Article page and Community Post page. You can use them to allow users to vote on articles and post, or comments added to either.
Article voting
Article voting patterns can be used anywhere on the Article page (article_page.hbs) that has access to the article object. Simply copy and paste the code of your selected pattern into the position you’d like it to appear on the page.
Post voting
Post voting button patterns can be used anywhere on the Community Post page (community_post_page.hbs) that has access to the post object. Simply copy and paste the code of your selected pattern into the position you’d like it to appear on the page.
Unlike on the Article page, there is no translated text available for a heading or a {{request_callout}} helper, but you can add your own custom translated text using dynamic content when localizing your theme.
Comment voting
Comment voting patterns are designed to be used within a comment loop on the Article and Community Post pages.
{{#each comments}}
// Add your selected pattern code within this loop
{{/each}}
