Article voting
Outline buttons in a group
View code 2caa2f1ddead02cbbfe1b07d1c7968abad51c8d9f85e9356a331a03916097520f99a40615294ef87b8774c255dd31b07fa24cb695254681bd89c6b3d7cfe685e71b6971e07d4ca38b428aaed16d74fc6d7afe4ce46a8de40e16e9a3304b58225f8757a5c53473255aef89850efd8a2becf14b6da42a6d3408f9015d7b586104256c8add90449bc8c6ad87cc67b55dc32938c5d7d0e7afb71b730145106817f1e63b11d92f502ffd351e1989e43232d4fb0dc513062271c5141a50b8d76454e3dbeec72db458ea3fd4e3f5fc4ebead4ba47ff838ee87416f4f4c78aecb83f62571f3c3f1f6762439b811e4def24e7745f585f6458099313626ab4589b2d31e67e06f1df3765ef53c83442b8299729809a5744aeeefc71213ca49d9613a1fb19622b2209e3e8091be34961a08236db86e3433e5ac5a4889a41d0e0e279a9e609760e1e3a9b08b8b6198aad913348469cad1c7d643c3e7ffa2037dd114d45e33951e939c1a1b178a945abfab708fd147a3c073e0bf29fe0ea0d12556644fade1399f86662fe0798713faba6ae6b1fda9c6034aff5eefdac1ad4e163d60377aa3e7e6dde52de2f7575ecc7e4afea81feba9fb5d6f8937d527d141ec66c14d5d54bce64d7c09516f181e5a73bb48027a30209b3a4fc6c97dd4a1862c2c50d70c510b52e94a01d458fb7a3f4388df33df42f19afc8248bcf028fc3060232bb278be2f0dd39d7e33340d7770dda73dc137d46cc97ad02dc6f2cbbd77ebadb608e8c8b0d15a80bf969f6d9e9b5f97dcda26c69eee40cc0e640e8fa6566b315de8bca3e5a22068599a0689980fb5b1aac7e1a45fc43e87e5ad3f697379206a2257d0d2b6974ef7c1fde3d8a4bccd17abf0a9682a529cd947d633aeb8ae36dd1dd6364c6e6627608b233c2ad5cca3c242e52bc6d8068c1b1c430bdacb97d39420b0191f3b58d2b0849161b971c793c693540b1974237a013f0df3a51c87ab51641535fc79ff9793a98237ba8ae0a7abfa6bedf1ceec59c6f2fdd39c8ab14ef585b554951c03787a17054b7a50c910cdc10c8b8d755d53e644c54a73cb6be43d930845a82543211e93d69be574471720b0090c07b3b2ce2496176ea704c52e7af8d7b693a2b1018277e1be250e7594acd16bfdf47e2c16c42108d7c9965b469ec9a6788e9bd25426fef464d0b7715722bcbae2fe25a8e50cd4e864c546eb5646b256046e0a66b180491fe2f4f2cad32811922a73dc67b0370ccfc6908790f63cc14a84ae91c8ef4fd79b435c757169a89dcf85db782b8f1f8d84ba0d4f84f934cd56c602225a8f4b2ae1d424238b09ccd1c4b25d8a88c96096ab3a0b50c3b132106f9a46918b8d502035baef08f909016c4100382bb0ba00dcb8b92ef6ced79aef573dd8b3d
Primary buttons
View code a2fbfd42468af783ec9dae560dfc1a5754f4a542522f26ffd4d6d3bcab765cd408633afa59aa76cfdc2cf22b09c2171c58815f0d6ff64820f244cf72cd876bbe5cf2f5f82e7991c52a7dd501fba215928a308594f75d7cbfa5b433f102adc0edfa1fb1520fa1eaba082938629129d046b26737f53ff01b695309bb5dfaf32989f5c3ca5ff086fa8290823b02b164a582fb4ca8a634831f32b5c1ad0bbbf847854db5db9e71dd9d26a30df6fa3a051492dab02381689d3206a7df6c80a6c3de59897c236c9de0bf0538cd74e5dec3144dcdb421726620b3bad3bef6d7fcf0219f5cf259bb2a1d2c33763a1ec4c792338450e66a725b73351a5baa23237b6e64fc57b539001ae442d291135ea33043f3caf812eb4391b934c642cb0aac0107fab3061c954462753860378d4bf237c57fd101ae7b2ed0f88241c4b5d041a389491334a4f57c3310e3860f2607038f485749cdf30afcc4b267dc103cd238c1df204c7b02c1c4ce43359857fab2159239667238df481991c067e35be101e029d9270568b660978ce1769aec24977aaf449990b20642471c17fc128532181efdaf965d9ea9104f86f195362a44b24d3963ff7863376412312966ff9b7dc4a3ffb21bd70668dbdf220fd292f93de85a68efecd0f319c218d037648795addd1761350364d860361e395cae54d72936f154b1a5540ca42b384f032e6409f8f856733e2437530fe60e69fb68b03c20bb8a54a218a5a3fe1c9ae9da5af23ee6ae76c094f74a350f0f05afc54c1857e427f2a698e8cb7d97067691fbfd9c2ee8c7e569df802663d266339c5c8e3e41a07952d51cc33ddb84e864c2c0650d1186f00a103e8b997a0c2376c5b707417a34db2d09c6032eb777d3b50995ef352e9c0990aa2429facc274b34707891095a6b3176997c0c09c3fe4e28a73ca4c6c130c0cf82dc39c6fc108f86825dd46036f0e1af1160dd067ea7e7d0079b8667bf8d84b87c7e20c8e244580cdf2d25e95c17b8f6dcf38187f204afde0ee99193db3195f53e4bfc275a58ac8fb160b9ac3d796196ed7f73dc6bafaa5a06e2b01aa739a5a6e5d8ddecc2ad6dd8784736a0af73e75c7fbdc22bce5b79718616c32e0e6b1e38e08f54a3143fa6304760d83b4b18ce7152bcfccaf0ebf81c5050737c541e9c3ad9f8a294ffd310fc2f8aec51cdff57bbbc0e4925e21649a0c8a7bb80ded8ab938e83c1c0352fcc9a3ed98fbb55ae5826aa6e9424890badfa6a36d96d0791a6f05bcb2d3b686fd651bb7f4d8a4e56aafcbf25438bc3437dd5564a2fe801575ebf57c7f97569b7f919e813e37e9ec4cb338964a3b96616b8fc4a2ff634eefabd6bcc741a502d6874813513721912d22659c61856d0597826989779811ae0c9000862851240
Outline buttons beside the title
View code 0b2678c5b6a0ee62a5dc8e48e6a69ae36591739b5b4e056de50e83baa03a8cc7e652f2c4b6fb38a5ff7dc47debf9a78a573ecda1697603d2fe99f4d4db46814e7f3c35da9f408b48417452b1e4cf53362d7841ac3f336e17e9062bbb16658ee52c5315f80bb2b0aca1432b0f681dc4978d2dbee6c45e396cf8cc01c92e9cab086ba671567738f4fb0b7ed27dae180f6a4a071f64ad9daaf631503544f857ab06087223e7cc2f004fa89d2508d55d869b8e6e286f07fb92142203703d2b817ac3246fd14c0ccbb8c87981e6208692c8256ef7a5a32bfff9fa8214f2e9d8758a18716cf2a3efcbca1ed7616f5f517d0af75cd17aecd54fe166b59c7c247a425d04b7e6214e92f1bb02fdf0638f2a960bb9a5d3e1b2d131970da7d12b545633852839264686a77c2ddfe8f4d5146aa9ae500182e8eb04b407f7ce8a98358183f0d984ff702423b63a8ffb6f4cdff6b4cc1972e8ca6154a8f8bc505370f0ea3322af42a485fd2b32bdbc10e67855bd799f1addae20f9b452f1a0125aaaa10a69644f0f78543210a8099a20f7fc182ea2abf155bef13aad1d28949de8d0fad04be4c7d9847f96b3bc77458d5426baddcc41e37c6167d1a84c5f8e28ca78c25195887d975f1193d13217fac6737b40f0f3d2cc7de994e9e6e1124218c67cf0bb81a6ef03a758b374c5fa77f107f0f5f24d09200be697cf89e2370082ded708e2c057730d8a5ebd0a0e64c25be03afb8232bdab0a2ecf8e3956d79a87f51ebd0c4b60970f0abe20fb3a4cdde7ca088c504e21ad02994f64bb24a6ec3d9b98b87b3242ea5408037924ddecde2fcf05bd370227705237088301e430a2d8ede5e9b0d220924aed4281ccac6c11d7af4e334d9ec264a7a17321292589cc3b3c7eda4158b06a3a7f6ec806f08e6106e6b217a625dcf1c0add20aa14a90a7907bca43ab74315cf9db52c4c2a4f25da0be691c892cdd267722ab5e6d6d33e3c63ebadaf3ad7b24318322b5cc1b9c3f8730b537f53980b30f55b19c81364d92e851fac74ddf363f2a491849740970c8d942515794297f49958f9d2cb0b4abaaa5b4e87866e708f38924f8c5d7fbb3e9e88623079dfb02d99cc214e2002b2bf45ab85516244e9b5ab9f4b3583e56dd09dbd6ff049b187a6eed93c6daf232ef2b7a80e89a149400d384e6cd66b11808690921f914cbc53ce1df46e2e02e170614168637e44e9c014fc02f560e10bd711586c6a2cb7538fa9c34004e734c122329875961c3169b09bf47e62d6053210f3251218f63f2e9c18b9ada01a2ea64299665bf9a5faccbeaf7d45706d0ae68f8264002c9d3251f56f4e3b3a81c1542c0d1c6602ee9e28aaf8dcd19e66607c6ac34bed6a9decf4187f4e0f546d8887ae918c87b870e0c893c0d6e6342647e75374af006ee73e5a499c5
Buttons within a card
View code 8cb2adbe10b37a70c369936eaf91b84472b8c17f7c1a45091b6320226a4feb825f54903d6b7980e86e075ae9fc668db06167c06c009ab5e941c3f840deb96de1bcb71f5dd1fb9cf3dff31026f10d108ff8494087de7cc75ec9310e54b042b9f3df5b27e27862fd6b4d05b1e50bca7577c664975ae653220e7da906c3b097585c495a0fae36c10e5c772daad132ed24d16696e9273f74ff933ec0ac18a048b64197927f67884ff0916e848cd2d01be25c65d729bfee1d732b3a85413992212d791d3704b92608fb4f9bf5317dfd556555c28836c7cd79b6372f946451dce6051627e2cf66c1ac64e06aad9ade199836d721816fc6f9f7a4b4689c4eed3bb37aad8f604860a688a9d0175112fbd701430ee91c8657644fd16434fda47b57a76fe7a5225344ec762854b1fad6edec32f65d4f6429c2b9847f863d7a89137f1415317b1f3b64e06094a9d61ccf9f09bd7891dece5254dca829b0d1f69d8bb30f80b3a6395984917fd0da5023c1ec41e0c2b72a2cce55bba0c1fff3fb0f477ab93b3f9ae85623d361fe3073bc50271c73a93f47eb58191a331056f4dfeecd715a3242686e3ca7ce4fd181f16141804968075792c83eafeff3e55fc083c022f0fde31119b1c721528085dabbd6943533d623bb51a102570e8a9e09998e9d0c5ad612e3fffb300453c54de90aa62029a2b6b8bbab7e03881410567d4682f48759f9b21831b5aebf3b039fbdf67c4e4acf1c64ecb11b75e963a73c11487cd5529b6eff89abddcadd084d616d49f0cc90fba1734b079114641928b66a1ea2c89731b0fc480ada55de1d55035073b1b0566154cff77f6ff354c9eebd519559ee8d8618a02d9ab1c7cd1c3ae688fe12f7ce76a0d8fafff2ab14c15362cc6146c542a1b75b71343df28c9c58aca4fc588b4878e82a5320d7078af7c68f5c3ece2195936ebf67b67c9d04eba26f72682da831d8b1b905ef1e2d3f95631cbe0790f926cb7627406ff89e3ffa2b1631b6b144260ba767c0b4f4ea9c6ee64839bb5d43388222b975582a84c300af6efb97da8c02eea05f2b4971d5acf3efec8e09b5b605ce658730a16a5f2feb2a713882fdab565154d155e0b8491002a856a0c5e1e6a5ba974e2ae68e1282ed17968633bc22ffb6a53e0c02bb138b70e2b8cf7bf0dd3e3d0525400dbb8078f3f161ac4e7a611bd920e6d7f97c63071ef1fa560f7675b6d7e0397aff2fe3934bb8ea82d31e76748ab07bf9a89ebc8f4c2c0eeccbcfe5674aa2528e1e532b97a74437329d2b54903007b93ca1ba48114825b287d2ca36aba7313a42c573f559d0b20cf4c48898c8af546d9084ae5693a988a7450ecbe100fb4bde9eaf72bca8029b1b53843eae77c473496d67d229eb1b9667e18eb37ec5cebce599fd37bfc885013d5a0bebd450c0e02c20e56afb0f427b1dba86eecfc8fdf7a3d41d4c6ae452d2afd07264ef88baec2be74588c53c0a41a233a65efc6868069ee91faf964549080def96b509ae52a405948614d2e7ee6ad17b63a6528d9b3e112c530941fad354badfbf3e293afba53b8c1f70622980bc6bf5b83455f306c681a91462de887bae3775fa9f2070f8c1c7e1e909bfd635be8ba3186a3d227e53a340f93ef92d2c4b8517c91e259fa3d22aefde2de91a063aa9456022864d1b182ca2998ede777b28a40e1afacb4929aa2d18370525c518436ce78a1a09d4d63e75123e82076c6b00f2a639271f18c17366ab6f7f4e9e95194d41f2b8e5b1a1116d72ce4008199e74bc7cb74d6f8c167c8e71fb7b7dd557cd3446c9a9e7a76e162595b80d1530f5f242ff69b9ec8a43f715415aacbe7b3df43472b5ffe8f4e53f6252949b53a06e96c9f52810b056a90de64df380858bc106c573fa98ff6d51215d7063feb0d670e7350281aa66b060bcd41a2905114d227c5ee04474a3ebf23b53e289077f418ba3b0e987c203f55335e5eb9547baf188a6c6b028a5b3f0e18d4a35657320d6da7923e12bac3adf264f1275f70ec042378bede702159ec34ebf3a6e2ec1f270e7a90d91849694584f61b9ea30b6fd3ff2730abe1beeebd7255ff107fd9ef664681e9b5a203598fef30bef0b89c9a45f15b7e8858c52690f01aa44af00d2d55a24eef174a30f91c4513020774fb59d837d1e4d85692fed97d3102bdb08448a602534f4caf558007f5a9f6bd2aec5894e90e0091baf545db5fa9cc8938c98673739fc8f12bba9a842327a5f790609aa31f9edffef0881e571132026c5d683c42c95f53319daa855964720172953c8aabb4fadb64ae95f294c69d2929fdf72196014d6bfae9d86ab959d60014ecb97306f08cab66bd50ec56da246aa7dd87781668e52a876adda1084f92a2903cc2891a7f2e8960d3d103579b40580dce6dddf92ef22a02fdd574a78d098f9e4456f008eba2ac89cb7598b1351fd8c02392dbaa6417017a99099977839c482bb3e256b34926976f017d9138264aed296
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 6c6b909a20ae89f135329105366f36639bacd8a583aff517cb403a4d26ca19cd2f4a89401b3363ee88d0d9364b9dd5e5e91e4d4bbbffb316d79f829129457adbc9e33298a6b1af72bc9647559d95663add826a5a7bb6bf3f708bcc52e7013f5c2c1e303ddec6e1ff1626f4fe1cc09d1a58a5d511d46f945f9e02ad2413e223934bcafb57d26c2acecc9a43b8267065af5b6cb7ef3f2013d90e0ceed9b2204b5df149376e8a3b047c92d27fe1abdd9330206115351302c423ade633e1775b74334891ff6fd99e9860a8225a198d4b7b9d77bcefada4a43fc68c29839f01f8f19a1ddd15fe4746c3d89ca0551854849714e7a2b933d58faa91f9ba3cd27f6f1fd677f1db2e6097c1f89c721d09553767ae058456412d08554713a709f217868961c25263d4a4c4a51a748f833f4fb0f2ae632ecdc988a4bd225672c81baed98cb6f27eee96c7f8b31ff26caf4f4dd3d3c5ad8a63a9567f9cc4c63eb1621097c1cceec90914c15163f50472d765742daab10de2e60d8a31236bad01efb0c68c3e7a04c4368d9a646384858f764009d7aaa490c57ab9c4b9c50075611515a073ed8a424831990651584e477e89798f91adb6b953b7815b64dc22cc478c99455c551e6ee573e390b224acc1d93aa392a056a40aca2d9c7b5d94073ba783f48ccb98ae6d9f2d64a0be5ef14c6b7914cc9639fca323376d4dc9d8155cc6c9ebcf9e189dd68d8f06843039a4bea5dd4da9df0e6604e45892a343cd504dbf35eb06cc0f28ca6606a1746ba28786be9aa9df0eaf155743bdf6402125a5d6adc2051ff906b0968195ae2c6034e4f396f192aae28148cbd3844f4e77d86b3ca10aefc96a6ab53ee65f46807ee24da0e3a3e6ec3c04eb2ff4c56e402f5141ff40d01a74c2b06ac77b02c0b3a7eefd3dd414b53d3d590a2432907bc74d70f76f1a1e50386b36a3cb047c0ca38624702526ffbacda25ff838a021938bf58dd58032312641ee1d23a0ae36596f743361e7552f45220744d933ac69305a95e8e33cfc4abce5730f23280fbb111fbadec06a2ed71e7ecb58f414e0004c39bab961f5a42ccf55d64abd780704c246055f9f50e72495d79d041bc55d662b22ec25d61ab5f62b6fca559a132819a3f959ea57881d7458eef2cd0d811013cef17180f940531f30b9e15a039dde2ab61bf5c36f53aad271d74a37f65767edd103c0bae2fe6de2c86573603e3b66a16fc16aa206c61012a6be20e5820943b2e99326eddbedbd5ff82363eff6f78ce3657fba0a8242cf85ed94647ca51bc307123abb5d517afdd9a3b9223bf29fc9376f52ab95fccdfd19c42f80ffa125d9d75d8313ee32f1f0dd8da9cfdc1265ee3a4e15da326a521f5b59312c36ba48cd4733860dddf37de894b975a25ad3d5f73e724030c5f510587d31d760204148b97beba9d7a46d3f6d55a0d26dae0c7ce1f17bcfda6f2a8fa60c03dac6facd533fb936be40b1629a207b8a07582afe029650c7a04e92d500f4af407d792a6eb8b7a428f66402a7cd0722cbc86799c5f97f632e10bb9b8b078807576823783e33278070c27fcbde887d12c2061591429dfa50e13c733db651e88ef15a3558c2be00ab30373ac380975840e61ca7ae975606b19fbb16aae35ca6e2b1775ba4d99710a1d7e7f671b5df5299901674da275d04f1d7b02ccf9fbe7583a40f1978bfde50e06c071dd3c750c84f54058ea5beefc57d70e2505cae6c66828a44ea594c7004fb6a1f941092758f18b0635ab55b6e6d4bc8aab0359cf5a2737d03d563a9d501ecf3be61199f7678e7413d567e14e696958032a43f54f67717a6c1e49c47b349423f398b7e0d74e26255f0d4f264554909434617091860661660dd6ae86ce92cd8ec9740d8036bd4798a25921c994aec97a41b451e4db68dc2c4890cd9eb39882a52bf583af2fb6bfaa7a823666375384f8759060085109989f7d1bade0430b1170ade9b48c318da62d5d1af635e87d0b3b636014960a97eaefad5ac60747a0079b6ee2a3c81ecc6de9e55e44b0fb7982a40b38ddbfb74d08461890670ab3c5a1fb8df827eb6fa02c9384522ab19f59b8e23794da2945a2a6cbf69e7e7518f14abccef1f41480f3b37209f95bf2ddd0dab34349aab234885acec01fe5897977be6c2c872542ecdd535708b052c5819487e04ebdf2a48850aa41a954b17bb1a985191c2709b3c9f44674031229df49726086a7c58004cd2bea9089ada707343aa7b344ce52089f862d2994ff7bd9e5903d121672ce8f10d973d46d9b9e9cc9cd79997a49538906230d281096c6eb23097fb0ed9977295b4ff7d4e999bb6f266dbce0cd38d3f756774eac4fe8d67b764f0692c16dfd6878030c60a3e2a682e6ddb67526519de3a274efb09f94d3c61fe4135c83d4210ee6609aacc3520c15a451059324fbf06a6e2016dc366504bbfa075d68a27af94654ad5d8f3ff2d20df7b6bc6debe0e4a4b683ad88f8b54b3c9f168fb6df46a4af2dc290ebf91151a2e1f2e95f14b96e94a21b5b5cc6a96e3b05f3f29d9215a9dcb00cfaf3bd3edec5c723d2e0b7cfb8fe584e434bedd772956fef584b85c15cfcb8729eeb0b7e37357de9cca4ae44eb501ca4b08e5532be89770ac38a629cbc88a58b43ffdd91c18be028950f9e50c8837a1a81801b1c5b2fc1cdd17462a13f4c7fbdfbece84acf7cdb6f0995bee0f73558ab1674aca5304645c9a033254e8a29b257cb5561b29ecc3c556dc3237eda7c59fce3c5098db5aec3b243b4b2b4baa67dcfba1bdb1c1abf6791d49be0b66d73b1ba9d8143046f57e7a4dc83fa5174bd015b3429f6bf74c88b7a482d4c5192378e47a36f39c2bdc6622a11d5b1215bb5d9caf1a25ba8fd1a13502590fc2f50220c2d6af024477221ad2fdb5200f6bf3e499d1d59018e965b2054542035a200d025c51589ef0b914c3f2302b4b25fefb8c6e9c0bcf676b26ab4495b95e144fbca745966d44f0731e64a25403f4921a536c9c545868e0a3a3109e937dd17690ac8536e7641a9b403ca18deca2205137d8c225734cfe678fd718ed74918be4262ff7886e816833b20fb787b74f15614098d8c0820f738a8b15f0ef0e7f18488b68877c9e2ca6fccdbcd27e326be7d34ca43ca74c85a74888ad1c7d506a2aaa0740046983d1739a094ad4bfc1c73bcdf4b035047c71612405b97a4048ac06822d304372474613023508428441768570828f1031a510837b1a4a188a8a6111199c4242488190e9806649aea7260ea596a566aa4bd91055f3aeaae14dec2ea8b331c53c48c3f721af31dae3480e10b3e2edafd86972c1b21e474d0c5349b43f2678a9162352db22fcd9a81f6ec586227dfa5ad570948c0524163a7e8bb54fc6eb0f28f0c14c581eecd122ce7b64c65da6a5134c1b19eee2ee4d04b9966bfdf78a7080963d04d71137ba45d04860b7733260a3ed7ec4e54d813b1a25ae22b770f92db07b5a1611d1620515470844e180562c16419fe5c1a299973b4daff45ebc2c8479963345565e3306591d8619a72280c9aada38ea9c60909f5dd41d6ec615d32bdde5ee55521cb4e96fb0e57c0ac30a80355422f08004d61db05866a17201480e19d5614bb16edcc8dbdb1bd2f92daa95a85ce4bc90d92a201f6e5770cd5117176f14fad841e5eac2126f13b7a44fd6947223693b3b99bee806f4d0de976ca5aae08a447212423d0c42a2a945c74682770ebdc8c81c6ebed350518fc1400439e493155e93cf15e884c0276ef8cc2d9d650822b7964fdbba6e9d64b8c843880fb0b96e1df5dbd87a2b35b94a1c2ceb24998729a6c07c88308b4f3ceb3b0dfd7ca2610695aa9eef0d24a4a93df176012518f29cc46f76e9d74b80c30156bd3c9caa04691ab546afe58d6261eddc394f3cb0155da0d4b48e4939700929964a9f9dfe7d5e9a2bd7ebbc5d6419177f061d6b2901618ec4be5f081635da8e169139a9a50b566a89dd4355fe60d93a62ff1cf0c21f393588a1305d0aad003f0d54da9d1d7fa1de149a2560c04ed033ea8bc0f532c2eabe5ba8a4f75189a743071d96559e84a2debbf759d7f828068eb35773030aaf20c139cee3fb263ced9fe2389cb42068fc20fe5ee17ac0adbbeeba048316cf3014e2dfa62dde62bcc0c5737253c401cc5d811392ef3629ceaa32020fb17373001b646e6e78a89d9a2767385e5626d561ae84885d22f6a4c2c7a294a618e2050c28f3ed61d3a77def84a22df8cec2d41e270eb98a2297905615f780e97436889f8fc63aa716d6a1d8fbd1daf64582cf76efcee5ceecbf1d838dafd61544b700f838cedfdf5e812a5d0f
Outline buttons with colored icons
View code aac70d8c5c190e13e487b4a7b3948535a14ac3b810da896e052e8df3566ce44e5eaeb5aff9641a5ccbb76b53be9f5e232a5b8d271f3f8b5d30d2f83df9d1f3179b2d7650591a84fe1cd428f7a47aa60d8a45fbe5e87c8ed8d436301dc2aa27519955029b6bbdd3b2a93f2ff1e9db3cad49811b099d184ee867ed03afce4f1cd5a8e240a9bdd6c7d513dcaf7f2bcd99233f8bff2b819f9f955f9e40b25dfed9f523112e6a5dbba11c27ce3076e182c33aee48aece038f82f8fe83738e41c243fb453da900c8fe9addf37977e71b925d1dac856ca751ada41332a09ac7fad06f6f053969837be3972b61ddded70757012aaa004e2525f567168af58aa68af159998c6178151954eb2b13f9edc90af9a07776e1c6805424af9dda4a04996940f2f7a12d4167ef84a1fa7042b7dbc8f8ab1583fe7b7968dc3d04864c3181afe6d0882c7429f1dd9ff9510dce841e1c3f37c48bf97c3958d78e0fd75c8034b0fe58b3cf44060f8bf9883e033d545484dc7ea5dea01dcedb91d3eaa5a452710b31e2f8169b7ae29a432a8b0d65163ee62fd2060ac9cdb2f7213bd4430696a94f0000bdd7a2ebc2b2d0e537f39784a017893bfdc37e55e6573ff8c0f782410b076ffafa96999843f12e072c47f2c0fb63adf5ef39cde00c4164006ec43eea57aee315a1232ce37a9108dc7492569e040fb3ba87499185faa52c3e5b69141ac9b74f1b164f8ee4d26738dc4ad83b502b0ae7678d168d529c55d7bb01fb5558398aacceab4ad4d8672fed46f30969f0b890cd36d159cb4ae18ec96538aa81225bd1627a64aee1a1407480b33a3992f7396e8b1ff4c9f1106f25368ca5b0fad1466606618332195a00f087da141b9c5344a910c3978f11d3f6cd820f43b10de782bfd966b89bb7072b2b095971b9ba415e013b0d4ad5f49c24c8c4f8356a9df7450c21f39e30d9dbb8afa76d5d45c5f709754c0fbb0fd19669b9db3aa42fae458b329e8c104338891dd168ba067d50b32ed55342cd10ab1fe07b3768f05f24d6dedcbd0ba04af90eb0720761c45ab3dddfe4d324be33e5ebe632d6c924556a3a2e15e4833e3c88922263a59b7bb29633efc610556d50caf900462670494949bf73b2a7760b5fa134d799dbde7a475e5d485b3f67ee18aaeaa6e2a6ed12d9a582f95eb4665508f6037189cda1b3c8a3f15e7dee3be20e4a84092e19d74a86fdf4e06b3d06338f80ae58fc3dbc3f929df38d3547d2b412e653b84fc827a09e13bbb79eea0666027c5bdbcf37041d0a2c99601ab846d8d7c5cdbc0d3eec978263bd9db56ef61ac62ae7b3987569ce8814f44bb77088a5dc7e1c6f1a9d195d3aab834f2dfb5a0e737745176cc406c125b1c470cf8ba4a974a9219f5c18fbaa04d4ae46c5b6632826264b0230cf857c022c702ab4a0e45f6063ad130829e30a3baab1e447b7a260b087b321a71e04b59ea19d69411be7796ea11012daabdde5b30be9d211d08e22fee465a588f57b7c2755bd591169077e12273d75e90c302715606fceeffb8003e33db8f37efe3e525dcd4e7f5227f929c9833a88d6d4b3939604d83d4d99e573f145b69145026b4580555049ace0a5c09ef0f8c096636c26af80f4c2a17c94fe60683536f04dd64a8cfb7faeb137602563e5770a3ec092bd01b71a7b4a4ad08339d43c24c7e442e775312d389abc839f1a2d8fe4a9c5e224b5ca4bac90797e894d93f2408a3dd629eb22ec5a24bdbdd8b2c05fbdc5c0ee90c3f7a478ce060498ff314c2653d0e7f044da93a38746a27456fb6bb1295084c7f575c44645051e70e7e4e90e8a97284333ff043cb65b1adcef7ec72e0fa37675a86698d5cc37a3885d02ba7709f7c64a3df87711b8381fa9de4eb518df118ce0e0fa67a690b1f6189d23038fde25c8874a1c908872633546ae562282f51881f70a08a014634e6d1ce4f38b89221752477c7bd5a7e1bf5f6c5a0bb4f30c592deb21b4d8866ca1550a9f8b03bf0dae42a21a34d4e5b54e37be91d2522e50103abbef98e6e3a27faa211c65ed72b9ed46626a65edd5427ad07746a6bb4ca60743a912f9cde123003c25a3ccf114f014f4f5712d4c2a20530db14340f10b1834f625dfb04abba22a319e6d1835cfa272b0a7111add42a52c60eb7e2f9f73fc5b4b36caae6bd848c4bd86724e0aabe1bdd28eafbdcdb9885ec7aff9995a0aeea8ba11e306300cd3b15390bc3dda4c90bc0b231c327caa84ea86f3447141aa789c83f3d2b3e85b1d0238956d9325215c53617f07e5ed9e47603b1abb5e9ab39ac73003c3b70b51fa59ad5219e613250e14a0ffa69c6e15e9dc776ab9bd8fd9cc318df0dcd1aa10a759a156eab800fd9e986e757e7e4dc24adfe9766f7e7b2dd5fa359d52a90c9ccc68002c2f8ef11b0fd9032b11e64362bca1c1109954f74f43f10cf78ceed083b0a8d37fdc3d44087f80134c3de44eb8b000c1450d49f3d3eb548617ce03fbdb20941cfa29d840b7c25609f18102179dd2173cf787a940a089a4b9fa883f47c1c62c99683cd4ff0260e0479007c2b5a59c2f2bbe0e065204b7d631759f8b2af8aacb106586ab46cd6e3245ebabb9e74b692b9bce5f6c659341d9248ee7ea4ee6a0038bd80bcc892828da6a81c2dbaff842509b8a5c4bbcd25e4eee7126f87f8a4ba7a391780cbcdf25eaeb16ef13dac0d85e523a
Article buttons with emojis
View code 2b9977700bace197f418e9b905f10c1ecec5d82e585f79c45d67be82a4d87bfbabc194e1666b25b8242ae98b01b702a7dd6baef1d8f4e86e112ee792a95c0268fc86059aafa8b8ecaafdefee105b2fde6f104e8e28a0120fad173b16cca247521146afbeb5511a942502e2360a7786d9dc582b0a6d65c8bef7ed1fe7f4fd22bcee60f3ed37c7cd34d504446aa313761df853c8126d7cf78b3c81d581c2597b3cf76493595ad13370313202a5dba66061727708752df60a2f528e6a58216334a11f1d032244659b31c891c8645a071606ab1587763ca1e3e1eba69800883d1776902a8ce868463353660454b757960df1590e2ca0f8e1a46a939a9a9da4ab4c3e83c8b51844d66e4a592b60c4044e1dacbeaa4aba03168fd4dc9822f6d5a5fb9b35b405935e2a91b31be370657175866d159767f3fd2c49f48ae65e1c2f307de7118680876812a40ba01de953429dfbcbfbcfe6a33dfff28ec6bf3b600968cdcfa9b213d2596b8f3242b00e0f898c53a7ed1d78867d79f392711d24f1bad356271c6b2306bbcb493530af9dc6e33f3122a921a4719fb667954d33d8d74bda5702994e73373f9612c260efcb7f9130488252f860452e6a47a2cfe8bda8a74d547ed440f086b81784540bfcf6e85aea48a2724865858d6cdba2783c54867e2d799da1185eea0faa3955bc197e0cb264ecf1910be4ef2f6207e3676e7f55c79d564266a74ff4da5da32026b26f6d46e9b93929b7269260e44183043d03d5df00f8c0fc2151239051c3d76b3af724fd946a76f5a973da5168ef6f74256d831327a3897b5a1cf5e0967d6246e929fb5325453d62554d5e0e87d31d202ad6cf797ecda8e37103331580676ab826b179cbd80efdd2945424da1f9c50c61a5a7f9768b325787a5b628218f3cba2ddf8fca0198ab7534530c3e39de2a21b290c6f1a7bf385edfcd5531d24a484f3702c8754a83f87540852096b06a91e961c1683e2380f35178472ae396eee0ddc04d618703bcbc334229d3d361b9ba3cf87103d93411d4c5aec3850e8d052ad98fc207c28ce48fc2de973599f38a4b6cedb5fc916f9744d507793202f21f2aedc89e09f5482853df17520bb43822624b78785046d79116337a2f1713c629512d40dfeebcf16c9c2a1f519b4264bb08aa5893c4b8d597041589b29b9b9dddbf7e77c244393c34563ca0ce8df6c2f9f90522b172fa6d31cb82ba52203f76eedfa298a6563135ef771f5521c014e7508898ce5876480bfdad2e660f3108d6df27f942958c6b5ad83dbf4b9da66a5ef604ef266be437bf733f1815c915e2bc427c32ad05a3a8a96843108161d3b6dafe5d162375189a47c8de1c61a8820d3a8ad5f70e31049b57404ab111a907135be09435fe20defd9d2d1b4e7d2d3ff0eed340814614683261d5d82ad0c094b85d17ee2c481163c95ee481266732fd15ce74f2fffbd3a12cffb9ea1743e5ce840b055acda77563c740ae5dcb31b28d3e3b30e2b4bd9dc6f997913de3ef0b61bf1d957ca2f08af6143576052ee2cecbd1f1a8fd9502d14afa43753b32971ebe3081f6715c4e15c5cce81ee3d8e2f42660fe16df958ab0ca2824c67ada0623f64d76a5cc721466eab3396f999a00510170b0654ca3baecb35b8e350b880f711c63bdaec6ca967a6ed65fb758aba5aa0b42bce5610bbd1c2a0b97b2ac7f214f8dd4b8cce41de64c754d979fc2b39a633ad23573044cb1130b54934d384d72c953831c6b8aa518cd3512c3751d25f966719e3912b70a634151bdb6d7d190c435f0705d7cb478ee39652247a4ecb34ce142c3b96e87f386efe9182b1fa863a6da4d7b8a56ae57820a87b98c6e339cce76431c66777c3122daccb52ac8fc4296b6201b1be31206ebf91ca9b03b445373a81439f9c0d93124e9363335e41a12bf7435c26dc2c920a7f5c832dcc80e4f6215973673e909c848f8a606cc5b14a52a7419baaff5f8fabd03e1a2e6168dfab3d2d708173c7c236f24e01bf4d14de548647b48a403a229cf863ee0b2d6e0712579e59db2b9668039871812711f0e4dadb3139ff24359e31564402a471de3324384a241a7624b9a1cd60170eddc49a3545359aa0cada9ef9499e09d14966316b0e5c9c34a3b6e28ab4d648a7e3c15d21538a976e395d57e6961127507781be4bfbd57d1f29f03bd901b474dc1525436bae0e3eb451bebfcfbade3954a86addda493f2e227edb910c39504f5261e61bc896c6d3b3c2dab8cf9950b5776de0b3d3a8db89d01c654280ea0776ce2bd4e22cf5d5d793e6944521b77c7cd83d8d5bd49f68f2dd58b1e033930a586669fff089f1be8e3fd6ede71e98fd017ae2a9df595dee1cb6a2ea8b4caf1e14d71f5ede5bfb12c31fa6906b8c35b8341b6bf1299a660455c41b854ec0a57b621b386181a23f3461b1aed0a4936e864f4a31f645ec810df48fc6d58efa4454f75153bf3d2625cc93486aec67506f862f9e6617cc142a8710f3d23e03cc6cae9f28584d441cfd042b2359a88716f65e5dfb56dc611a724bb4427c2632febbf03ed28d46dfa1b27edba000abca56abc6a6892fc8c1ac92b969283becfd5c6881ed6afd16541e67977b853eafdacaff2c1de227ebeaf6ece827fbdb628d1556e86ea1d7e2d43513c6cd825a5f8a851e770b7ca35d3e77ecd12ff86a3e72e865ec3a02c19dc9adabbb52ba2890598e0669e60c8013184ab33ef2a22c5d6f9e11fdfc9093731de0b5ca6825ad03f7c33f405a2415c28e8ee4c4e31d29d41f91a0e50b5a401f093ca636bf807e1dfc5b19b6617d86c3ecf61e395b01e1c4b163f7f109b8c8965f8635d66061c2a8be66482aed06b52b7af39aeddfa5bf49e7ffc70cc85a437e65b0ed04613703b9eb5ecc1008edafe688fb786bb9c7d38d88653ed1a2a99cee6fa7c0b61f109c4de4f1ed765711d6c0055ac2ce1221a7747dfe0fadaa7b7392c91be2e86d91e5e106ea6aadeff67b76cc7db5285c6d264d01c1cb0cd956be2f6f4ac8fe7f1f6e7fcbeea61bf4dda84a19ec4f0899b3882f2eddd962d88f28bd91b0f50a10e3f3357e302e9d1f28e94764896fbc141ade4a163b9956ef2ea95ba4e2a13a342c4365f8836ed7da66d1e4e97a57ba74e6f36e4151c2bd50be8f4401be252c8cc959108ee285b406f7042f5eed150f2f2d840164220a341cb7c7ea66cb6b714a65914292df9b809e860319367a9247d2db6dae36a4ef57ed0bddf79802c7edfa72d4b0a818dc020dad7ea7adcffc03a5945ad0bd648dd800df2a2cbcbad5ffec4c40ab4f7e9b451c91de291603f6b288ab861990fc43e657019ab5340bff07351a1543c321436e9f96e1415ff7ea866c2723424b609cf9ea7de795128416646efe389e5706960640c5170cfc06141130aedc9d878066304e79b7f37013d2f7680489b8f740a4523622ffde001c12b0a6c1449e58e3b07dd57f4354dfa3e3e2de3e6167d36e10e33bcca98964d5f88c810e754118d0cf6d4d0d44f11805bd7b3b546e552f84696b98788ace869fd1e12c833fc689fdfe73f43d47f43d16190367f7e8dd8f4b16027533472bf9c7ff6153dc4f0d5d3ddcf60dc9e04021885c2ab4b8c033d387941e42f25f139a87f0c754cf57db7fe519c29731ed7fbc837dc00f09b284d5f2a9c93af70eeb98abdf364f25a57a224f3ceeddeb23cf5c17e12a7fdb8cbe32b765b73b3e4f4e910e4ac8ac27ae5c37cffe3fdd55337ec4d28da81b0afc6aac9a80b6a5b381b7941fc4e0745145ccdb49b2f0cf4b209e3df80312fdbbfb5bd967a152e7a47c3d27d66a40212d2961d9333dda84261882658d27193d0c9bbf98e2f1b74fe219dfad3ed4ef06b4cc05d72648892f9acd4a1fb9938220d8dacb1c50e07bebb5de711906f4d703f31967d6045985b5b087d2f2fd1e8d1d151b234508f1b866e5be205c4c4ccd2ba24cf1f403abf756ca23ced76ef6ca20115e98950e70ffae45b17daa36d02bc3aa581f0fbeb2a98e7f7555ece5479cf3accf0d1780f02379ecd3a5b6730aa09b2075964318856a8cfc2f2851bd4b7f02e6d295407c547551855cffe14dd33ee3338e5399effa19a09fcea4515120853c97927ef4626f6c3e3a521eafb955e6f3c2841b611fe485b75227a9ca9caeceb3e3098014cd56690a0e502bdfd58b719ab3c2188dde25bc9317a498ca3dd2ba3d481b58d35d322e227c869800f89c96477974e1dbbb3c97e9a1aaa2b41758aabb67efce745870cdfe4e47a3f90de14ec8d706ad6ea61056c28f87cba0a93c85ec430f322687dc022ca8166aa133dae6fee54c8701ae67cdb3e14caff1183d3e00ce7de40c5e4890445484b15248745c4975ec7b4c687ead6b199c2bbb1d5af4a6c82fdb53ccc946350ded27da75b3dacfbd156585ced4a57831963d910cc8dffac183d8bc1189c79d3da2053c4996e21b4054f5bbba47b37656cfe5eea47005ce15ba76e85c50f53f03dd19f141854bbaed3da1aa09d9a7fd233b66d488010e424ae91cc244b3c62f1cfddfdff5ccb1776b48a21512d8e252aa786b2e75d2490b35c3bb930e98833508da5bc8bcdc8ecf614d902abb44cc2689bcffebf66ef7923e879c0736d6952c5349600f6e34071752aa466e7508d4754d54cfd3518750f287b249b89343cc23bde7997c262a911b75019b38108ed4ec7c3cf769c9255ad4de70402d994efafa6d6f997654d2cc814309a25f982532307a75b21b4f948b1166531f9d9f4ac108aced3d62e158a10c6d14758d830b4b2ed03a87d1d005767703dca40e84dd813479ad9ecb97d9fcdce82c02a1e173f56c885ec07ec7c1e2a7f189ce9a7aa01aa3dd90442f1451ad7e775e740fc0b2b6d291b3cd0412b849e0f3e3b7fbf68a3554b9d2e5d3277716b79c3903aa8491f6e568f9ac6a200aab1b089e459b19ee37cdaf0c2bc9287b76c7c082391fba04f3b61dd367208a43647a6432d75c0110286fc9db13abb76f55d3ff75235c414a0585ef50b914926174075e1d03c9283a6510a51b900bb5d0fa412c6bc9ee89c7ab0a1e49d04456e040cee6da19834894671dcfa5a233ddcb3919331f1b25709a8acf93b80eddc75c3116e9e0160dcc8dffbd4172ba705ca5f0f62140e1ebb6464499671b0d1a1f3157f353b8db74058c25afe1931778df5c69a087c33bfed6242e3c8562b3cfb4b03364f8b4070f59d4d8c0fdbd647cbac486a6fffbcd9cb3b429f1ef443822594f643cfc52a75cfbb36b99006ce57ee5cd9cb1cc3c38799b866d97b10bbf0420484a49a3d697f6c32b2e3e4ba0560a48b2ce5308d2b7a668a34e85f25eb5b3c34ad6d780293ddcb727c9b56199af4d7775ac18b05111a6fe6880325d107db41370ec44ffb1873aed03adcc92779b7f604e408a8745be78c36c0faf4dd26c76bb6364fae6e5cd24c4038c67bcf33f7836eaa0f11a8b820b3ce931d52f050aedffb0ebfd902967a4c6ade804656ec8b3dea6f95e96b18ecc1250ab33e71327c2f15c5655c33fecc6f27821e28ec9367c6b95ba2e789331dd0c093093041b39543d50788cbd46a990dab41eb11fde74d363e9afbf82cbafdda8b556bfdcdf7a78bc3ef85c43707fb5dd50a79211a3b4d76d14e47622615996c0d7c3504cf5b03e8b2739a446c28539814924c7c78975620c9e6f24d93152bea5250b93a7b6b9ad54d463a95570f9671979c8f17f4b1705b3720d6b7346e05c0bddbd8cbf2861d93c3a32bb506760a8d1ef4818b8999fd3e32f12eb74200f7b6c8f033cae2436d208b49904257d5bc50d103b146ad69858036f46256b15b1c121390e3a3bd8bdab14b1afdd2b8115fe69cf5982560911ac0481f4ad6ad116cfcca75dc74d31514e77d6a7e87b766b021e6ba75a630ff6b1f4d07f562746fe021666e892af37759a642e6296d5b518458577ca76297588078b220b427e4a11a2bf587c7323aec87d2b370f1deeae2ddfc7528dec0817500dc28bfc8745d7ad5c7c8e833818ab33c5a69dd88e12d0f32970fe2a50a2ecabbe10cce91f3e4f3b937480da96b8688137033d9772d08b54a9fa0893a61c9ceb106633b41ef1296aa922821612af874551d225866ed8fc6f0e505fcad71c6698eeef79da216ccb1ea839404269d04a07f54508162f7ca39c19b285f8e8abe9b59121372e2cbd6ea722e5e6f0a04d823e2e46913adee59593100b5691e2f2f7225edc2bb1b77fe051159e9893e610fe7ab999ac62f3eedb51141cfe16f6da53cee5e3d91322a9d320135558fd7bce8d71f2198e0e63659bd041854d8f78fa341d413670ddf6e29ae1d29a388b19a55cab6f6b3ecfca6e2c46e5b85f9aff667bf02d4a99bb17f1e86dffb5db52359907b130e9aac1cb51eebf079e60b92321686e60765b46844c6dc30ccbd6176b8d17c4876bf378c087d60e0c0d43135d9176e2ad8725000167474a34f75a0b11341dc6056a806c9d74d232ba6d6c2349f371a405cc82df5a09ed77ad49e7c1def5283a6017790119db45f013cb336c1cfc6032f97db7f9b20052b0ae93e92fd62f10ad908e5e52361fb097300319a8c4fa06c8a341f0324dc766a83f38386963654a780b6359797eb4097cddae109f68e7f62081cae66a387429e42ca10c9ddb87eca6e417a050167c396da5c42b6e45a89dc6e4513bcf3fbcc5a48adfe899d6ac6eb6a9265125a6a214205cfebd74d9d86176d34f97ce3cf505cb62898bc99605463f12e47235975e7197143d39011ac1381a1dc9cb28b42dda5750478929197407766cf2ac9e3cb5bdfe79771c689ce6394f25ab10eb20ed5f7254e34ace013ea0481a6300829f627bb4c4dea8fe17f7eaca9302a588f2af2b8bda7b089ca709bad93d16b9fda96547b46b520fc740c8aa0dc67c439b6aef96cf226c6181dd12afece86ac119de4fd9322ae0080dc5cea15f9845b691b06fddc07c9ba3be2e6636cc90a8c1941305a8fbf425c156fa694971a3a422829c48537033ece0dcb433e6624dd298ebde72d8ed070b044e628ecdcf2c23bcb3afbe563f29a7578be5bf8ef2d1d0570d89d137833bba9ef18c52a8bf494a6fe3bf17e7266cee883f970129d196974ae10d08bd63cc88387addb2c71e487769a69fb8e46e3822241f3c428e874b1dcbda9ebac121bf0c46bf09611bcd3257d17da09c405fd8f8fc26df06b2ba814c40fcfe166b29a3f46b727dae06af230c179e23d069bbd9d457e6ee491662dbb654c37bcb52ec15b9901b64a8b97db8fb1723e69d31b3a25cdb316221ed8c31bc1a8d3701c4d82ce0a90968583ff4ac8f44b62ff92d03f5b6db94f9d5e3d6577a5dffa46b95978ae49f03cfc5ee67ab17d5581be2612e930aa350c9dfc2a39626bc175ba035cc1c5dd130097e5a3097a06f84ff5c99921e6be14c1cacf10236d392300e33e0670b4525e89b9662e6bea179a59ff5f9a73a761c1ce267eb5db090302dacf5b55fcdd6a0c9609e7f692f256ae33546fb732f0a4b577dbb6ba373faf330668684ff705cd6822ebbe81fb15d0690fb2b71454cb0f41f769920ade8653ea090c8502fd9f87e35a49a9b8080e81004f1a7ce895639ce4d93018325d189444c269af3099c800716535e61092b7e1e784b1d3d55c0fac412a10f6aa752df2369b41032e8a9beef437139972154352508ac47d0a2214c5c8ea94578d82b6e8ef27159175ccbbd4f918bb0461702acdb9de5e35395372b515d5b6aa6c5fc4fc2038bc2b1a1b1799bcb7b74a9837ee3f71ffef0cc638980b8fb2c2e8811b64adff6f03f69da8989c0504240485387844acda8b8dc8ff175d698ed9e7dfb60724e83938594c22ca7399a5bf4b2f9cb723514575afa6a0a8e1da95572fd2cfa85c52ff5880c4489a046705d59dd21a4a01650ef750fabbd214ab26ee3b8a74aa673f4189656618ab2d26b708e4b2bfe5029cca20f671d9cb83f58d4b7fc2d6266dfa184b778c95f992be5fed690ad09160450270081bf3598d675e410c773b1b9ecbee720ff1401db793b71939169de5d11edeedcb1f9570e8492caa9f07eb373920d39716891be5414d4f3089b1c0366f5953a6329d93db1761f1e7a238429ab1c7110b0582b3207984d90e09274bee2c75ad8a5408f83b714addef596f1cdbdb0e3468e531ba781d43ccb0890c9d4c4f6d68332ba70231ba1fd1412e7457b949a5f5aefe0f859a36e686c39462ae10cee77359bccc6b7c2b14760c884128028005c71c70118df82ff4ed2ffc01822724283f95cc52890a7385cef1bb23c6425ed756e4b32800c63ddf4c9a5f08f0a3b8071cd6ca08208bc137c669601e4c8e399962c670aa9ec9fc1d0092d030ced7340c15f9c99444637e13e8e5175d052a1b8aecdf9b3a9e6e6db98b6148e93c293647821ad229e41f035f771c27f9ef523299c27c073962b1783c32c47f87080d3a4ef87b9fbdd355cd3b5cc80ffd48d49202bb2dfc21b9f2ac807352973dd20e09d1ec944fd31d627e4848441f9247d084b83c8f08f5a34ac569ff58279592becccb3a28da3f4f921d8ad67bb6c046e17e29e4880cd48c7f5060f0ff99bc2471108897d245443fa3957cfcd0a58d99118b0a135c42f97d1ab417c165d777fc59364cc3aa2dfaef27c37b03ae9a78bc2c0dda81ef368dc735d069522ce8a8389ead2c237b11244bff94059276b8bdb85785c0f630926a093efb7db66365c93b0b697921cba2b0c7f51c55b4721101a7c270d41422086cb3b403bcfe097c9e551eb145b85a0f733fb13f1d54e3c4af633567c9c9ce4053699707a7c0632e8cf2baefaa7e4702416b4b9cb116a13d95fcdf1cd8b1330d45fe1d775a7aece418ac48c4f7a8b75449c2261fbfb2f9ef544ae56759b0f74d2f99f930019381fb974a027ee37011495ca0682fb8ca32dc2228ba7bf89dbba142b5db84f7e71b97e07c266de05d81dfb203561f377506dd706610db7d0396ade7a3fbbdd49e2a8a5721babca089b874c55d5bac0a403a4d840e626cf7ea3eddba4cf288c9c4b995e82df6b15477f3ac54094e380d9157ad8387dc0f43f017d63e0451e5b50ad2a8883ab0bdd3c02b228da62ace7aff87f69c7fa8a1909adf2e664f5d06cb0b699897d279de63e36fa8dc0e25642388017b1652fb3c6527d4ab724d0bdc00af2467793e482d813941412e486d343067201f79ff80c2651686e31bd1c90f439a8d6642616666d55f219dec6a052d5c41be06ec555bff0c884007aff1407d726c69181cebe7a7b096685cbfa572cf427f8781652f5a21a82c0e8cb33cf9d4cc725d083404fd8d60d0facda5402764ca3b3b70bcb73fbf5d49c0e56b48d50571e1ec3d63b932e1347b192294a9f986140dd0858ae83d3781974c0592d56cc8e98bdbe5d92153805bb9022a010e666beed42d534cb5e1d7f5e1d852b4f209d23265d64a4cc22cc44186ac849ddde4957aa5f740e9553af64c192d8b4060dfba9c4d37b4055b225cb2984e4751e978624487d0c0581946eab1e6164ee1a99f7649c0865f4cc147d8b7395de5f4ba3667310b4fdec99ae4f46821471004de45814c9429a6e64864a16a3f3c63378495e95294b754a05c690c24f070ccff03a547d968747dbb677e80f69ee1673ebd4bd3a0f6eeafb2db1b9ffe2c7feb6af335c457605cc7786bceda4e954b4ba61c73e4c233a69207d151ef75204bce59f61c9f9201ba137249cf6156cc149b66c119c01f46c7864b852fa13fd6c7e27a00267661bc8b34eb21067559bcfe0bfa702244d09a26c82fb7617465109202c5e472247fd7667963ccd40490bd01c1bfba78c232fc6918c22d1a1b682142717fbf684af40d05df86a24cfd0aaa6fd456b48d5b0708141ba6193f50e066ddeb8bc89c7ef57b9223b8e0fce5cc607175e013f32439214a673ef3eac36fd15cc4540c7056770da59af3b3c549a8092785dd90f99eca87e6ee185399720e5f2c04f330c1b524ef28c3385fb237c99547616ec066a9738b2b39e795e7c3407496ded2e1fafa899c5b74650c776e9340bb6def1a9b7eb150b87a7da0390d700621f4909c3de2dd534d90907e32890f4914404d02b53278e143184a7ebe58bf475c01387001f36a26a6ede96f5bf0753ae586bf77c5882ec1198212404f69a98be97f5bce647310f735f61c870d98da580f26f490bb3f8220786c1b31d0f18265372d261118d09a24682605801a554dd6a195ebbd6380b031cb7f9b9f0b9413a343a8fbb2adb87bdb235d405530eefe2b9481b7c586ac0072050bc2e076d1b68447215198d372d49746cc005da9ffb33d232e02ae6e6ed1e4fba1ed540d795ec5cfa1a05bce3a21389dd4e25386f402793371a0dd1f58474c217a9250789e259a8770efe3f42999a13de845fff261663903a08301adc36f03e427040d14e479b625e9913bb4579296fe93128944952a29fb4e5418629b6766dea597a944651642a1e8b94aa19e92e7e6db937c216a7fb509f0b19e4d30916cb596ae704c2248831dc7689d0e9c78e412126472c137b49556ab2184086d34ab5d1ab10ecb83c6d96e6df0933cc26a1a2a452f5ebff196362922a1390b1d31f385b45d8dcdaad036e3079b3b11e57090353649512c1fbf34b12e460a2d373399fd1c77e327e074bca9e7d23faa25e080ceca382873cf2f9f40f5e17f4731a31000e9e384bb4d50eb1c22ad8d240a686775d129fc760d6f1efea6c484a3de4f6e39c7795fb9a8dc694fa6a9720f1940350a42f453344c8f3cbdde7215be4c60fa562561d46618c5a891a80632bdb24f4346afc35f277a6d2c621abf7cbf606f0654ed406ecfb025c1e3c2d6a6b5e2690b846a553a0c92f8e9095e5433b680a86730b9e4a2ebbfbb53409acbe5b847c03e0a8a0e532dc499a84d2d0e35af22b487cced08fb6f27fda5d4b1de0d9cf619da88d54e12412f71c3afa567330068a568347d2d0b8a122dbaf8c3a7673e9fbd22fa6e7077a7a8c266e489f2821671540215263bd4ee9eb1ebc2e509b8e4c2984a741a7c3e7930028cd1b3c4118cfa63d5394b242b9a1cf793abb4ade3d1dea8f3028625f295fe1968efbc464e40fc1bb616c6e50b707415e6de4c011a22aa4b427bb71021215f22f0aefce531aa2b5a7e8de6ffc481c0afae151115f3f793d51872ac6d2d164887289db76e0344131e3b1ef4cf9dbfd31178fdab9f7be42dc3a0a363ab058f9025ccd5e3963981df4daa62ecf086ca071b561816f1759a1011f892dfb01b5463986dd3c8219fbfbff01062d63d0fa6506535559179dca6eba40074f45c6a23d752c1ae6e434ba8ed0b8673499c0bd5e9948275ae8b3612a141116381e91123371e1baad2bd3f4cf5a4ea4654f08c3916c3785400232d97d87c8a3946bf3d0b5dc95cc1e96002709585db3310e75e1239cb0e55cf26b9a9e466738b2914bdfb87b0aa5fb5f71609a07f60f195075922c42fb5d1626efa3330d4bc7ba4ee765ea2c4f00a4d70cac77b63f811192a0b3a3902fbcbffc209529b9abd7b085a2a95a3ae1fefe404494de382b725e79a654c0ff815ceed4ef8824f29085197c20c741a9d5051661e6f816d431eae1e1b53e
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 550e1d0f11bf43d11bf35a92ac25e5e87570c0eca1e81564eb1e70872e10c29d956530dd254519bbca3bcc33418d25621720b800dc6fe4a3587f824baa54c1b6ec0063acca2b55f45744dde1699599614f62b91e4942d7e5bda9b6385e785bada66a60a0f1069f32466fb6609ffaf676da20378374915d7fc52e94ac35153ed03b1cef8d2964c33f1f73a944ca4498624cac73fce1464cf3e359904de8605f13822a395c52313bc20e4a95dc1d14b95760ec4c732b1513bce5b22e896149cb89a4d9a539f2f567a69a7e38d5c526e6ff578f86373efa9c5647f556b9aca7088fd5bbdd30a14d8e18f3e9f13dfa9455d9fc3757959ffb8b26818e1733541b57ea9e2153eafb1aa14fcc985bd963263361bf33dc928950f29749616d66e7393175a5a6484dc54a99ca253399ce2ae2f4a4bc622d9c81a8042f0e123e61f1d2716de792767850ecdf434185dd45dc2dd187213902c399df63889179aaff23c2f783d8eac8f78db1e6ecda9651ad52071d6f62f368ba8d9ce4cda8a2af8072cf220361ad2db967c99d65915201c07ea8ce1bbfcf43e046ca6e48ecff6ca9d7d384e003596c662c0546ca9c3a5af8b00a5b3acb55a91e6c7358f7c9bbabe9cdf3eb817a1a7ad4167538f738efa7130e29088e2565e349be59fd513fa20945d3b727d262cbbd95a1833504782d119c57f55d71e0e07230e5d02983e55ffa489587a912abd25cc0b8d8b9fbe45e669fc230b2e1326f878f148a27385cad1febf3ca46d161ea51dbcf5ed10a9fd768d11d40aed16bee152f011cba622db9e44b0479ee50035728b733203fe79bcb64ab69747fe0f93c91d28c2007ef873e11007009e52d711b99381f47400de98e047c181ba2d2e46e3d4d67410d9178a4519a1f20985f24397436540be7682efa105a34896bd8150ffc867a9aee3f909b00563e9e3ff22096f61876ccd36221b81b3fc2b96ac34503763ae4149f5ec64eea129a636776a29f64a462cd2584f33ab7bcb5a27e5e13d6aa2df6c62880b580577034c4dceb2af7e4d6702d0ff72b8c48e9caa0800dcf76e404dc66eca18123ac99c03786515d41dc583d02b9536f77351b0c06f4b85d25a575da52f57b59bf041d72db90d282f2afbc371ff776c2e5420db47ece333ccb2bb0ed1eecd2361a6c8dc4736aedcab4ad9232bc14411a041b360016c23687d8ce3247dc3fa4a2b2e08f1dd05bdb8fdfd7381671c06d1b7fb345422a064107a7aaa749a27ffdfa6a4c59b65d7542bd929e5889f0a4d6699051d41ab4e49abf14965ed178e73220312da4d55382592b939f785c32803b8ddb57375cbdf7cab700ffb5a8f67be44e8f185f7ffa73e3fe43800c1b32c56a9e1890416d2c006177eca5d9793f9522b61ddee6e663ea8442ff388b0797404e2ae8af77ec5405f2bdd6d0faf8f1796f5e0bab3e22a1f576518bd08d8aa196a742387b4db59eaf1bc3037f7ee274b4ffed4baaca1b8c2dc6e5a5bca36cf94541cee812dfc68a81583c3454ce6fbc0965283b4b32dc1a3b761976783285fedf1d5cd531f2260833a2181585ac7ffaa020436638d8d7b868d171c8af601f22181ba143bed560da550fbe6ae26864fed5a4b698f8087f42ad9375a39df49aa61d9237361bc90009eab7beabda594574b5376b70c48ea526b8fb2c587bbec96d60202988278f4caa4f11d73e6d6ee8084190d1897f4f32b1040d692d257d30af941367927677c28ca76c19542e9fcc2aad028038547530c7e51a1189d54b5802dd07f274b67ad9bcb73aa7d24845672a68dddce4636dc46c76a20851ed73b9572c33d92676626d4421576d964fce5686835b52f0fe717b761516fdfad3b2a96e101d00215437c441545f62c933be557598e18deb06ec7a579b8911d623e05890e37207b46bdbe02718220aa16f5771ed05d9e8ca3c755db4077f0793f4dea85f7083e27187c0b0fa1292899130ada4066bcce1c1e9aad7715cbebd8d53dea09d95f6f29dee74c351feca3754ee7b7ebf16d119ac6feed09c0359829e301298f7843c9b78693e8308f7064a04a0d6ed0290ae91a5770e9fae0a1f9d481aedb66c4b56ea02fabeee36f40efb164066a0cebfad15ec67220e359785c2cbf9d0c75015d587bd6f2887e5e403d62dd19749534cc2536bf887fabaa6a1a72459fd93e630e423bb0220b6bf2882ea0adc618b75db22f0de65f1a2bbd64842de1abe1cd3d8988128bd35d50a615a2a5db05ce611129ea6aa52be43920a71b1d09df0003a4603f7698cf230f103252a6a680d98a1bcfe88f2898d963b53f868ee3c5f402abfe93dcb6f2d32f32ef1
Post voting
Simple post voting buttons
View code 96eb8b411df63f2244acfb1c34fce897eb25b2220d8cc3e3ac16aa96f56a963840fbbbbb8af615917ea57e8bfc6bfcaf7cee825e7fd831e909e53b3b6e832bb15da5ac1b94eb70bdd5b40d362275555fdeb9b751955bcc30dcc8b67842a83b2c6dbd0efb50ea73580e8f16bface65504ae9dcf3669575ab033417da6664ffbfcda61db52a1634066db6f3b316f95991c6d65297ca02999b50cc2b766ca43de26154813b49612ec5e6fc3835c4fbcbb587eb74d9210bf95d927fe2ebaa3a497737380f28691a175df7d07c8d1dc69bc2097929278bbad611b82445b2d902b1caf4eee5b78dd98719e1d19e3cfeba43467591d195e014fe1bf909a06f3bcca146986b80f7db3ca4a22824f03829b760bcb6d3c148f8a9f3f61fd2b56147a2ab00cfab967393d3f960f1367b95e467e48734e48734b76bf80519072ae14eca594338442ff98ed103cbc034ced46167e5d1807827a648cb0176f033a6012facce1171423c8140c0d6beac8953c4e3556a9394fe24536e0cdb1064f5387f67248e156a163c1d375b47500dc0c3b676763198167510a892f80632e3cf68f36b00ccd871ad89cae89769e25b364f171ad9b9bada861d1bd2408a9b4e04e6f49229642cb48006e48c5acaae9d928575b20de15b3a09c71cae06a6c313076b43560731cc057dda52e8aa0a1b3c081b18b39116e4b3d407a0bed0a9981365b7b48cce72743ddcaac8701512829aee134a0d4297b5345d0c33c8d3f8e5fb9b52f068de69f8d2c5c9de574b6b4920d0e27108c4c1ddf7bbed37fef76315346ac98aba61932fb05eabc84ac36a765190fbccce3fe69304d7ae9def61974a8820d7c3ed11a7cd7ce865c9f262ce8a4ddd5d497cc35b099e5e36c8de4422811cefcd0d31b487522c8754d62e6d47bd2e4225e8325fd9b743d33b58a19c59e616d0d02063ae9e449eaf145edb3d571555da67a4d0ba72a0c0f15937f80724de3d1b4eecb41218077a718a0a2f9d66db1e60549cc5e45a98d6ada14abbb4d15a6ea3d5b89859f190755e60f68a2c80371c851ae9b8f4fe430e4fa3443c05c023b861b31b903fcf4c91c005807e108f4ee500e6d6d7a2eea6c9fb015b8e9a88bf375705e936d84725d25e47eabf4ca8d8c36c1a13050945c538e5774940545d0ec4d925ca7f4c91c1436645a4a49b2279db7fd89f6363ad7f94178d829861d1f8c419f2645d3453e365936886f98336fc871c744327556ab785b3e238fad2de518c39878494a898a0faf2ce4db4c262a357b6c6c4dc61ad0c6f1019da4edf3ddab1fc32067ed336f209dab3e612ebbe6367798f34e99c973040dcbbc76905f48d429ad7d53df0740fd7e4fd41c5540ac284afff76753421adcc8395e577890897b4b4c47a33389e90c3efdcbfef3f51ff699fcbfa796909428112b14112c1ad6bb6421685ff5f04be4680d3e686a33a8de4ff3e64cff62d0dae27f5fcb973f7d9a45e3974a47e3ee4bc4d19ce90a547b2e2076e0d5a6e8f5bfd0b2082a50e35aebd37735703309b9f1f054e2ac9d2671fcadb41c8fb4f515a04ed08bc6804597aafe7e88a98da0ee7daddd333b3da1ba3543731acf3d0568d59f4c5240b9c1cc90fe707ac0e6dd038f0c8fce329fd0d2da761eed8f3732dfbea166b45de0906b10199195a40f4f23eaa728c5bb44ec254579d51439b73f63ce0c1cb45ca313e53b57dd011e29e0f1bcfe5b5fb4ed6c56b8c7fbb041b2441445ef37325bfc7741aafc29711c610fe7757d91ffacf3e050d80972b4a50a4fd5353276a2cefebc4fb1cae1527b3856340c19624477bb076a420f87f3d5a5a13c53aaf259b8f5769eb4a985fe79fd4772443082debc393a5f4900d522c8d89605fd14e7a8b39c4b88f22114ac1dfcf6eb16b2fecad0b0bef960d403dff112156db5ab666564c31084a23866bf7b9883858316142b6454396e79a445516c3e757798dc0fa9722b763c92f4331717965268f6400e2477ab1f613ed7b6ec6df632fb8012991b59aa69a848dd9f337280bece16ca0090044c233a6bcd196c274512f2bdf2557a917bf8cc85db8969305c5581a87c3f3c7a25516503cea8d793fb058cd74fbd51f635d49cda409c00a94225965b1c949613823a5bbf128b65379fc72e3dae22722bde5dfe227be23c71ef450205
Comment vote buttons with chevron icons
View code ce25f10f8ff57449018aacf7fcb301024990ca68e15a82a3573ab90694ee0ed07e4a0a2a624335eaefb2fb9b4669b4acb2c42130c0b5e7e482843f31e998330aa7ea50ff7040526ce327c47e00408a60aa2ddf03e2fa6c3d374a3d8bc5c212fa98bdbd07ca0c1fcbabc19631a55101c7987c643a876b1d77871490f14bef871d29138c509d51e300f44783d8fe3a27030e0b42d096aed4b54b08c86ce25684355cd6e83e64b5eda551b61fc09b0a471af366cc9a5ccca148ff5b94700d4cca48007a69e4a79f63e7d544f90132c7a681e24088806842429ae6015c2b553723ed12547b7aa5d496d3dbc0f24351001fc9ebed5a955f2c0ee3a141d73f93e751d28ad82a6192b82cc8150e21d091245b6eddf019328713e398732593d2eef25190ea3e4ae70dfa29db1c4398bfd5bd32397f050b947a817965c45106ba65714e4aee99bcdb392e85da2d88e7f2de37a7251585c8b788c0bfec4ff2cca65f32e46983697de0b4d56b3a25b97e7799d2db218a563b82bdb0327580ce57784b812675059d4909d9986fa05577a399e7d3cdecc5cb574bb8ad7ece4aec2b6aee1aad27ba269ade6cb61c98676ece1362004afd7961b9b19a094b55f9d008b7d875243b524d1d422b1311384d69a9fc9214678089b8a9c1a9f2db52efde81ec38a2d1dbc03fce58db541473fb926cec21e2d23ad66ff69b6d1a56cc29cea9ec738234214d1b5b1ef256f9980e551241c1f3509c9f08e5ac6bc032519331d4a5edee18a296482de32596fb78040e73006506ef44fe48208dbb65507767bb3bf6456f2019df04013718e6a39caea1b689afa875e1e68b207256049180aa26ddc1e98b82820be9d5456d363338ad3331b5dc67d5e29d274f224248c9c0b17fa917da9f44bb389d627be905cfc61b7124566c7d3abfb6ac4b3dedc5575f41bf44a11cd05fbc1459e4da57764ffce49191791fcedbc2d14a8262105b1254810dc729fcb5418914785b7c175c6e10a8c526e677aaf6e94c878d087d3f68e76e7d844ee75f2d7a0656f9a146b3ddf1dcd4985aa30361d8169bcae642befedd30e1fbe02ecbe277
Comment voting
The following patterns are intended for use with comments on both Article and Post pages.
Simple comment voting buttons
View code 988be00ff5e510959b85dfec03029e9588c6374170378daabe5bcc650930b623458579e7324994b0fe73f68a835402d079dfbfc763917a4a300a20a757b63e57c4a515a39caa265824846d7b1e90a5e61785f5d80fa7c54b314f017635bf0c66e9c971a02522c7224fd9b3bded3fbfe8bd40bb74cf5599a75dd7d9de2fe401fa041fbeb6ce86d7dabc3cc5daefb9fe7fa010ee439d1c60002d11a481f07a07edc2d4a8cc470836bb401714266d76443a36d625013b9b6ece89f08293d94a00238dc5a20115b65772edac97cc4073cf93e4bb44c9d24ef9fba748d6b580440dc9fbff2aca34d816b7c487881045f6b777e2d7e52713ddb7a04ca8f56e23a340fafcf6abb3790b1aba0d1a24dc8853d4efc3b0110cfa753890711bed5706661d5ede2ff0a276894e214a8be4d27e69d1cc4d1b3d80838f8197f86440ce4d42a2a27d8c03c42a522baac7866752889bacac7f0f321828a4cfc84d507da8832d37db869e1c32af01a1f0cd824026c577da3a76c36e88301b97f1f27e76b116bdd9298bff06efaae676ab775645bb1b783e23d779059fd8f6cd7584ec6a3b22e04c7d4ea9be0bfb0293212b92d450f0faa362915b97704a6ad641f67f35185caaa5ebf0616573440c4be975e844852362112ed57bd8e6a3982340655943a221d2c4d7ea4ffd4097505ccddaa539a41d90a3b6f2bc7ebf1b0548b9033ed6eebf483f838b7ef53944f9366ef4a2795f8faf4240c15dab48bc9aed803160cb50f2752a9100d5a5765dcda85dc3c23685b488e0a8889f86b8aa8b70964e0517af622477d20f9de31fc6d3ca797642f23fec019813a1d09650c2ae8a6e6dfd5a89f63e413dde9995de197c5a96d4664f6ef494c1633dff3bda77594334475ac46987d4e12cbaa07f177c28c6bf1984ff1b04473deb8448f853288af76216cc9d546663d5e3eb57b6e62ae8b67db637243ffce9db15f41d6cb9f1ce9b6daed31d1aec510deae20f805e64e415a4d3eb7f754c290f522be5bf752714167c7476d35c9f21a405d8886e4eca6dc413106f95640a31aa73f5e293114fb4188936b0e7670bfe6be629d0ad4817eaed9e89078a49ef2ba6d35fed840bcffd6e8b65da50bc683c542118d53505aa1f3a721611ac669dd6f4d5dbd9eaaef2d37936bfe83aad53c36b051dc9d426f35980487a8f1dc8e9a067d191858115e98e94dcc275bd0450f1c95680611f5708afef2d8d01b5ba8b925b76b5144374bd1b84e00af023ad040e167ea020a5ced0737c9f32890ed18716bd573d514cdca73bc5ada947c17679f9d93cd418c77428e7585243e28a744f76260ecabbe85fb74bada121e24146eb21769d60cd787837c6c18c8514afe2fcac597464bcdeba244dbc67bf726be08e807939fdb9dba331543d870b175524be5894f068c10a2f9c78912910e8a38bd7fb2f2451acb94e145f3810431c6f84a6e0251a53122b7e3ace033b02a70505920f7da45e4ee00fdf7348ff64ad8ab13bbcb00b9b07297c6abf6160e107e2bd8cbd51d20972522745c5e8948d3d8ca1cb6dd8ea290c64047fe80bc0a008aff815a5c0a2567d22ac8c94fa6c8619616fbef962706e2c62fc2ef48833d2724d6cfa77cd0432ab2761e38db58480730c27a05b16c9d5695bf775f9f3076911ed93f6ab6b09f6dd32bc3c126ef1430426704ed12eace11967b7722b98d112158c8e11c05eacd64b9f3c2c6a216947b64bf125eb981e439892d6b5f2b54157af7a3043cc5277618e0cf37b232fd1ff1a2ca61b17001b90bc0dc7c8c2db6be42481de374cefa28c9d6cb279630d58ca601237f0fbb24fb295db2cfc38b24aa8aa5fd09883ced1f43e3a972e48f64249325ff4f3b46b3cd627b171250604131bf49df263bfc594a1cc9e0fa869195c498df0de00c117dad33ebeb6f9924995761aec4f11d1d355ce2e723dc812b5b650f52b15c02d3a6fbc8f491a8a38da484189bd6c9114fd96
Comment vote buttons with thumbs up/down icons
View code 1353c65f9a607b9770a10a779aff94bc4272d6b4e1c7404cb462db35ac1e34bbf882fd53764851090bc3e18ce9ac73bf8188b8f00ad938789b7c54d1d7ec33e66d041a22609b7db38f57f9ea731e64ede5c9a6b0265cae88d5d85dab2e9b6d938f0c43da319a8efd55a24dc869b56c9832e27de4bc1a01d17fb3004bdc024d01746f689d88a6f9865e145397e72c4932095342127c8a95086e0a1bd17768d92a2ee6740742cb3fc27c166acbdf28df35f74e4d4fe1857fb1cc086527971e04ed843d2330eb8c2425d2d7acfba71ae3a1ef31b49351ac3c735ffc91c0dc168d35e1274f1744fa412e2312cf2f900f0ef12b54f51d908b67b5fc23be3192aa287bce1f7dc27f9fd9eece63bcd7ac21d4b471d40086bc8edcd3a1a3cebd29a6e711ace47bd5d418fbc583ec6c7c91fd6f46e6dc7e85b61f695b3922a6586715c42d4574ffc270565c86def47f92ecca927ba425f37153552640c08586e340490ac2be9428e6415e476e8efda1f6accae0022135ac2ac52576b64f3216c7d2b3ca71f73a5ea320dcd9c41a9f32134a2f12a5761686f819dd1039baa1c47bd836011419b1908b939c07fd5bcc0492ab70f51ad38e08635cad8bd90de11489575b6b46424e6fbcba35dbe7e52d06dd89e193ab9d19808fdeaa486cd19e61d1d9e996443d00b565755e8f0bd800fc42e2fb8087d7ca5aa0fcad10a03ac9852598eb5bd52ef7fcb8a29be31c7304d93a50b0a1f988e9501f4bcdbe756c46fcbdd0e75a76b5def01e5382f8b301bfb20dfed8206022aa7e58f16f95f288251798a15e01fd5cd8e4d43fa6fb95455ef327ecb5c3bba0bc28f74c2d435a7d5605d47af187c61b1c3743944664f30a7c392ebd93b0165c2a2566441d251d5c8a92bae23953286aaca08011d1ef09e0b733de16ea1a968c44978e7a9f70528109a68b73afb0099fcfb8db2ea23386ea314744be7957d96184baebc8f8ac8c7d82ef4d72025c243531d2bab3c6342b526246cfa67ace5abe033e97da6a213ca975e5cf09994ff3508007a2c2c4b4f33a47a4d994e2b99cb71ddbd618ea4cb30b0eba0831026b75efbc714814adee29b85aa91fe1e0318138fc30794dfe5c79c08ddeaec22f4336377624203f666ab89f87b4e66bee17f5f62e8d927c86f8de95f4d8877d6ed21634d76e01e452228bffeb61cd98b3cfa883b0195893fb7afcb8ddd1475c1dbc4372b1eb7692f360aa3df062de70136b3c9b54b2879b83020a8139038f53341f0d1071e1d07583efbc5beb9987d5130e7cb36a698a5c330ac46cd05687a7059a3906562b768e6d60b5509b4283d177e417ff78b6ebe02f29a156c48d7a4749b54587f645d50b29be31439f2e8566489922d6a0589eaf1583f53a608c7aa94e38dd23d4480c89aa399022eabf5f29ecfbe56c8e6dc7a09c63fb2e4ccf4753211818c91d0ced1d92d5237f201e380bcf2be37187776859bfaf4180da6943bd68c34bec6ec8a461281202898159202c053e9f6f45d0d151105058c8229c872ac365f418322344c43a458e28bb50efdcb5de97f846b658529e3b4a9af40eb542650d1b857721747cdd7440b216855909fcf1b7d004cc5cc0ed2ddb01862f60d8ff6f720498c033c389e7d1d5ec780ee3521805ad00301b238524ea6879dcb0eebb8fce1689237dd6167cd29b7af9f5a5a881caa755a17486613fb3532b3cd59d73dade23eaa0490fc4f6e2fd797f38ade005e35b25ab00aaf064a3eb6d1a1bdda36a3e2776e60d0f22506f178a079a08d9dd67da3139aa22edee98a8d409d3e784615c582d7f06acae9aeb3a361127a5c8b805ce0cda6261c12a98d89a2092312417add20fa1f083da0006538b2fd43f3db3d06a7b2044d9cab045f88656541f99fa366d78217be1dd45359e9f0f6a97c3d6d45bb7e3627429a6bc10877ded49ec067ecc1fc26e5a6320c7e7f872adf85ffa7432d60911adb8b4df57d158e4b3f2ed9bc35fdf6581d3b18b06e4d8831e616e06debe668c98ad3770997f3c39c72cf2c54e7f5a41fa8764d39f2245f5fefec4d496ee93b34d02e3d22639414e3b633ea4b8e40d49bbe8d0f1a55270690ed7602473b133b36e38083488af71cfb02d69fe38825c8d6f328891041170dd03f210bb7a0075ae969ced19d2a94a45895e68ba3e607a1e825915b71d8ceb06cbfe20d49c93980f237816df09bd625c7ea9742e43dcfb9d68310354aa8e508d236bd532b293a73a8d4f733d797a33df006e156f861ee0b23f76bcaca0182290fadc1eb90752580b3396ac5a0ba4f5fdb5ce630199010e835b15202b5d150f9b0d5bf630a9441694f1515e10601efcbbbf36a74467b469a8c89a4ac8c69bdd2909e4e21ed7d0ac400315fe0a4bca7cbcb5731fac61e25ed1bec5c38b97710123e4de7a2b1add69f9babe512398b1e3aa40b3d732ac47ee2f9322ee8c0166cffbd4137eb32e8932e3474dcd634f6d14a5560a19b8a13f7ef172dba6597a453050ca07a2b6410ce1715f9a5e600de9d4bc1a6ca20b8e74130bba0895481635c476dfec3b88932df882eaae1fc06a4119ca8c0fe2c9c55db4c671f779c3e073f394003d9e62bf12838ed545e0b86dc33ab94df705b640c069ed34b21ef28827d4c06b5b5795c8a343098314cfe8bb865a3e0c90a4a8b44a257ef400ba983648d6bb404298e3d6577721ef429388d9308894c8b91402dbb85cc5695a3d9c456af0ace747d85af4138c4b969f917d4e3b060b09cc7cb213f548ce809cb1b9158f24623a4ea5d965e20a7ee4464a9325fef27a6e49f5bb0854b3a47edc22f67caa968e493bf9a61104fe90ef9f1f462b9fb50b1f7826752dfc329a999c0765fa63b35ea64ea61c28325f2426fce828c4927100d97b99649ac53ae919a3f26cf53e801c5c2479f6452298652cc62704cd4aa0041612bbb3160b1bb544287ec5f07af0c58d609132c2196bad5f5d8bcde9d541a50d6dd516df084c3ac42d8cfeb7eb7a181cc4ef8c43f672947214acd44dd635c29754702946c772807c0ffda1d065f2eb27bb56e227eb69b586b7ab201e4f7a51787a40d32cbf2fee44c0f12d7a3bc55e811280783764514d6227345cdf55195a9f78f0eebca34edf28eb03e1c55bff0f7e63631d9b9acfa421c0f192d66be51e0fa744e64b095d9ef7172574401bd4c79fbff18372a5c0aa62fb1d0525a0b4d3e846f2df2b0a3b5b237199cefe691abe33f228e79d6c187d95dd5025df1c131d56fdf2247c458248c43cb15fdd41f120b0ffdac4fb2acd72cd4197890cd8c3bcef07f8d9e864f9f1a055099a6efbde5827c9ac6776fbe814511bfe7f36cfaae4585d7e15ab28e821899bd615a669f05b58d4997a3018bb7376f9d7ce4b8026529d1e0f71d6f80328d9f9fc8718347fa918bb17c567b3367574545b9c47707c90e4ba54e309b6824c9e05c0197bf2aa7551fa20f961a89c470498ee52f527b5536bdac5be3159aced39de9f2fab536cb3b7e9af0a923d0d21278915cc3a6cf192624e53fa738e84028d76ce91a2c2adfe1f8d2d10ba39ca5b4b19f4828f6f098a4a406b6d618e12c0ea5d16cbca47a269e6ba860085deecf4e84923062353c7820161b5be96d4cf554a36488200fd20265beb3e10f1061287aa56b61115785e9555c69e22ecbc64cfe61fbd409e549d934710fd8ac0115ec4a9582f256d9e7ab5063ab6df
Use .media to present vertical vote buttons beside the comment body.
Vertical comment vote buttons
View code a88ea7c88659072855fcb4386ccf5110a6fba7b5aa8b6e7721fa5557de9d657937a58e65a3022e6ab04b0b86708ab31c942595fdf7868cf9c1d996411adc666541b77d3d1a558119f5f5d6e3e93c47d7c8d787629eef62ebf8700f278f5c8e2ddc86292917f1060df7f174ac82304f38188a0a2308bb5e31297e70293bcb07f23d782b15b699212f1da49d97d9450c66a3c65305f53ce298501f0e112a10a739d60b9200019484bad613e45090b58d07c390c4fb65b603f6c785a0a4dbccce82627b6b31659117bf2484d863e3478b3f28214b0563e98ac91d43fdcae2d7d6a320c7a1c14b8874173bddd421666f62d6bec9bd953a85b17282c551ce8c9a22a00201c0a6abcc8d8252bae56252fac21be31c0e45bf6f8965bd8dc7e8598d9bd4367d64ae09cac5b6192ab0c8ef4c6b9ee2ccff16e75baf93bceb59c8bf53daf1e2fab4ab7966eca17be80e200c48cb97c7db9359b2ebba125fc12001f74c7be5e7cfb39df413ecc58655257771b9a6fff51e637f453a2080f4f9801073d6faed8528ec958ea1103272e257fc932c88b3b7eaff48a0350293d0b8434fe40b3ee1cd1015e5b7b5b1cca873bfbae5ef9a4a4166402edeb44b5b3c95e84d7107d1152f758c503bac8c920aad95588756a36a1ec12f21158532acddd2830f1d10aace46807d5619249492528c88a439a9658dba5ce93bf87f01a1b264780e398d63a6b49af453ea6800a1aed339b08f87ef6680a3af18956ba8a131d305923ab5acec487360ca2525afa19f5cb4a10f6da52296b8049f38ddf98fd6fbd12e80e2bd5cfe4bf683758968d68fe4451bb70c18ae9906795d82cee763343a4f6a626edfec12620d5492c37ff29d30307c1e733a1d73c66cfa83581de65a61d308f576edb69394c0dcb3c434282a22431576a904b374551038d80c122a0204e4f12687cdd18ec75b2adfc672a7ced452e2aade41a90cee7770d6ddb7c3fa3f4d47c283ac2483038f074211799ecd87f12c20bfbd72877feccff242e576f5099d17a580d59ae441f20b6a6113dd5b650fa8402fc4acf1c111f21ae8afc3fcb19679951cecfc69db2bcca1d29dfc4b00c7178a16ab8ae491cc529c8b6d8096c197ea9a4f059b05bbd12ce2b071dc333d138d0142d31c8d6b902588554997c3fee390c148084f0e8bfc4ce2cbdb3fa1402fee6cf3f2ef482f9209f53ae10ba47c076cc5e1405bda7303ec77b29b8e92a46890a8facb8e73c011e168a8d2594073f37ac4c318a0591fee6af6ad1ab96e38fd912f7951b9d4c4b8678d6dbd766ad9fa75d25f165aefa6078099ca65aeddf2d512f68060bf1df07ac99160d23f2305ae4b227b116abd56cd878b235fe5d6ec464d577af32ebed636b72d4e4f1e0db813d28a12d787bf45413c349e0743877bc09f1c78dfa5b06599d773569f61649f611d361cffc94cbb1aabe63abaa3528e1ffa240702b7493b10f52f3fbf523108f54e681473f8df4fc61dbb0f62bd04ba5f94f8e82c89ac3a88353ee86ed14b050b86a8972be5d517e2e87c3461124e67f8b6a3a5483ca92bafbde0a38388f7b9506f7b4c570654128c4ce6af8656fed9381680b5ae548f49b5ec90b4bceedbac6494323ff4ac76949987c73c9d8cd4513dff46ad5b9db4cebb27a7317d737f0439e41ab83a770ef70f5cc1cd71c6a4f41c86f4f44e657fe2ce8ff191ef63a7a16ca8d1dfce41e99ac511dbfce4adc90782e7e674883b51156437a1fe89b420b2f21fff939e0c7faabba9832115719e71131939f8c1c5b36ccb12ca5bd8f278be5133ec44e5a4b513a60b3e96cff6512040c54e507998dd73bf982df09d165bae9cdf701b8535d14e2072da76374be8933cdca8fc08d4ead75277ac1edac82fdf1ac6a79d2c0ca821bb89c6a61c7239ec5f5892b042cb782a5b8b0c6171c177f2f9345649957092cb3c3f17ad5dd9fc8c7cb6269ca211bc5b151cb5f34ab8458d3e1c2fc9cce8ebde7aecb6c9ca93c75ed3010b9fe624612b3cf76f665ab9d586b75b2342248a7ea626704c2116f8d374865e2a284bd6
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}}
