Voting buttons

Voting buttons allows visitors to vote on whether content was helpful.

Article voting

Outline buttons in a group
View code
b84d9f77b79fc1c957aef4cdab326ecf513d177ed73aae564118787194988ddc154cfcd55ec6615dc5e5e7abd707bcb53935477460fb7e6016287ca08ff3ce709b68ded27c1d665984688541d97df3002fb4684d0690456d7e427f95b44b1869467300ae700273feec5ec5c5615582e74f96d1b85264df4cef7b26fe62ae3e2156c4436cac59b8cf55d16917deaeaefe96333178a9916509e9a7c5035735a24eb3fae946b6ea91f95635a3de02f9aaca867e14e6d239b965ae76c7c42b65c883ad4829eb58f0ba6230b0f93e67fe164dd31d33927353e38ae4d7fadc2451cc0f40b8b81dd1d3096e986fb4f5dde9954fde581cea6aef8faf86b568772e84b75d7e330cb7c6a0dcce85be56e5fb1997798d64824d8062e59b00653613323c48bf75d4d0eadb89f6b425b7fb063847c9ff650ac11a388948196c647d3b52ab486e6ff263305beaa322a15bd92149c196cb9dbe1f6883e81666f792e5d3ea2b796eed065258771bfdf3a33c73adf055ee46bdb15b5954ed8ee35b7823ef86774e554c5c23fbacbc9a696e26b0d6790d526c91ee88a4584c5d0dfcdb23f73f249701dbb71e5b10742f403439bf1c6dd687f4da14a716dd1f582dcbc99f6ea43f6a10ec993ea22746b6cac5b50c734a9342733bc43d80b1ab6a25d06bc0331b9e56222159c91adc318754dfb546e09d216d506512e642a5f207c7184607fe78dc52d51d3b9bca981409ac804532246b84971c3c54cc538b71671dcd3855da00fd8af59167e09775778e1b89b4a536c199863d94f991bd216936cf1d0f0975606a4135188aebccdee2ce77636d6b5f133361042df80db1bf2d013cb2c48e8fbb1011a5d6c65f3911be847f2c57aa335425b410a59ab9a791f31727b7aeca90bd165082d2303d2b1f567b969ecafab2015caea216274bd10e5cc9cab5eeb5ffe18498b84c438acd76ed36b08908bc52a48336c021def7b63a85f6f5feaa465c7f7a5afd30972a15cfde71c5b88065143fa37dc08d9754482b767259fc2335758eb8ccf9c0552a801a82e59a0e43c2512f90fb70e88d8eea2449b794ae30dc3741548bcb5aa2b1df0a74e12a2aa90fe3eff0424bb229e8a644a4aaf0529574084b79061ba4168e44a5cb74bc781b769c961b5c4a18c832e285070a3f6e6b7601fb9d58385330668ec658831eba791cb061ef9a3385f45785609ee6f9088974e2e71625f88fca58e5ea5e4e2876634ec9bacd23a4f65716637de28268c2fdce79fc961f430f167307702855f12760a3deb4cfba7438024257bf23c5986e67d796b3d2ec5a2b391de9ed488bca74d6549993d4fad33afd69adaee413ade788b7f202daac06fef4cc741c4c6506dccf3c0b075403f351518e249d75d5b3c03eca58d9f3573c
f5d94bbc45ea9f8c411510efe048ef2a9b6905dbdcc8c55292c850d370c8d72f72262e001cbdaa30df744896a8c2cf9eb9b2931e6b2ec01da73fdf02f39bb80b77f6a55018c19fd37ddd642044000860d75a6b989c5adb4aa5bbfcb920f29e5d0e3947894974befdef2fb5aa3072015c91fde5688afd57c8808234c55821f3d8e98dafbbfafe5b02438ae32734211920b25858ff3281c9b351dcf26656f3616925cfc999707ab5d27ba48f295c6fb0fdace0566e9e4ade97467551677d8108031bd4f99ce2150246734a93459396c3f1ce3a1999f85df838a2dcbbdf7490658c7cc456def3b3ac373c05cda9dc0065453653d12cb09a107480ffa0f94bd150a4f28cb84a38eb8ffe05732efd30f6897d26f4e579f19b409cfc56cfe6631c093475149eb47e3ba3e6340e2c0fb18c74f4b9506ecafb5a53d900576813cbecae8dd736394523dea07babea087df8f16fc64f6d5e32c410dd61ba41cd5a808747b547522776a6e5d247ba461fe06fc812e6d1f636e3178b4ab0d071fe1a5a0d6c9fdb160cfa800a9ae3540d75049a8282fe4626b2de7aac57e3b3f75c8b43279e2cd0d1990909e62e7ba2685402ea53ac6a70d0427ffa5033f8083585c62b8bfdd6c33654ac16e4608e8ac1a62a97fdf745e8d93f7058e9272c54554878790840fd7a5e1ddb8f315a6f4e4f63712351b5bb413c6ea6f7f5a94a2ddbf7fa0ee0c0bd9fe0fa541e0b5a56afadb90933191f0512be907dbb9ca7f3a42f7ffb533805ccc92269df90d70ab371fd202f059224931860d644794d27d391553c656a83dce6889e1e17cbbce4b6d3355ab27b66520edc36e77d417d249a714042e0e6ca352449504d071ab6a56b28f46a7e5402d105c8232656c82dc69b237424f22474af176a5b6a094ad6fd1c7232490b7618fa76723638b695d4dc4892082aa5e7fb0c4ac9511fbc06b749344555067aa6812c0be7a29590b9c76e3e2cc4e84106d655aef30a0dc27af6fbb5acd0a4764a1a792431e3aeaba1d11d42bcda93ee64da9187ad18684ed0e8336d5785826bba0f6d0efa23145b0841a9b313efd59b693c6fabea7b19b6a50a55f87b5abe7d9a27bf1cf459353910386385a71366893e634f49ecb716223f853cbe3e5c4b00c90ad91308a87c07953baf0cf4b971cc584b719eeb9a666b93f1fbc0809ecf74c1df36d0fac9f8450c568b85e4a6c88aee78b4031a6385d5d5929a45826ac2a6ecde57aca9e29e0a589dd16a3463c9b12d6f7bf0ca270134e5cc761afe1723d3057deb3e42323f616d49dc1b4c393320ad633d09aee438482d122ee007934a6749d43b10ec7ea61dc49f18823d26390c5d87d19e931179fe710c5030ff4e2075e7eb5cde4d8ab4e3641b9ca04cf418d80710f92f
Outline buttons beside the title
View code
8256d80f14a5b9d1519164be68aacec95c1aa17a02b5cce5212f4a2941b7e88ca8996c207d77e4b5ef9f6889ac698da596fa2d861cfb7a2646d7fa076cbca264565f84247a76dde7a2e07a7056767105de372ffb77a223bc28bd7dd0e8bc3df3da80f4050fde7b065a345008bfcf3473861f57d7f9864b7752e51de38ef532b6d0b508585b50011a803467348309cb78eb5e07ffe5f578216e4c75e6f675f3d115abdf0d7ac78f64f098fc17966783b819eaf48f5661ed277680e46a83dd81388cce45ad0d9725143f917ea716198c2efad639f8d1dfd6e407098cfd6cad8d35dd6f24a3a8f0dd8a4784d5017477ddbb9113f2fbed822689566629128a034e286738f79e2fb28a5767bba8c85b1ba764a64dfb835ce888c49226358377f71e4b5dbe1005b31e8e65922abf19b7ffb77246ac05b66d5dc8200a3b2ab13ac2bf0d66c4fdc10e41c4e2029cca247d6604dfdf4556d0cd2aba527c179d70ca55650e07b939bc5ef5570301c3658cff1a647846641cbbb67ae62f42becd4ba1919c7e8fdc40e4b48e7ad8bf288962e28778b43659b717f8973983d3ac0d0a6f0c4238ff53f68e25e9dd3e4cd1a95fb89537637f924da7664086f36a4e2b3c7444931df895ddc3771890c40a12d949898b709ec4ffb0c28c3e82dd7b678e815f7cb42b2791df78e0bef531e6220d3d226734831be24ca7e34f9fb375e2d81ba4b657947a5aa125e9ef59f7c8234a0a3f2c85807149f28d09cb6069a13f3c588a69174c9fe3d66921d06d8ee43cebd658f8396f6ce0a495edbcc81d007d5449a967f3494bca204a230f28e22964f80ceec72255879facc58ac1a06ac79f123d3ea8a2562fdbe97f61ff5bcb4340b236d05d0ca74b5f8923242dee746dc9ad37f10268e080e26da72748883b2648db0669b9a8c82059c91fc8260e442b7d70261a856824be015d62e1da1cf324555811d72689a316319e5e06a7ab28f6f47b780574aa0f2c0b50d4b16569b86a2413dd608eccd4cb80c68719c8d36b2900ee3a291ac7d301c0a18ff27a3912fae47a7b7afa32c36b84d753379f525eadd5d1f9fd06677764cd6b4ed5776035f347c4785fd57316d9e26cd40b5bc37721b9875098800ebee06f24663c4fe09cf4552fdfc2ca46fbb0cd2f0fc4b45ba85e80a8bcb034aa680a6b9108cde211d58ce1a30946c4f89ce38cfc37a97f9fd906c5d0d2ce3d3dd09491f513e68afce6e045e7647002551ff6821528a9e3b572fb32d2084e57f88515fe8ceb6a55de720ea2bd11692d5d67e1cf6576786d6b67d80874e881f10378d0e95a24414a9496a287a5cb5e21937f22d7fc3f039dc297c9077927941cb5e5eb842bb860b13056eb9a43c55be9f3e559d7c688a4406a14c66b46621ebf92c2c71824771de0dab554c6c7e3f0061e23
Buttons within a card
View code
92801cac8218d4c665232f0851821cf09b8c15fd36077a573456f72663f6a6ed128303286e2657002c2df244ab47de83e78e718a8a9b8acd6213b7c04c96e6cceae158092161df49f27ee4162f69f9b5cf95405827e15aeb8f91af67f9095e972b4e1ce10c616ea5d6c77b903a14c640ed283edd1a27395da4deeec94248f37b1200a50678b7661abd707ca89bb69a7515e30fba74850509d4874e7099fe4aecf8252faa6bb4201416c8a256f58cc72f6f729a2fe68f248e7c8af4e1386f115984160405d0a4d78df856fcf1d4bb90c36ae4f2e2cace9f51e364220ff3ed4cb5889372013af1452c0861eb8112cc68a6826dd383ea6b0a47a20ee777f73ae1ecce689a0ac9ce20a6b248e7bd8d26b9580446dabe6753eec70af84dbd552ecee7101a855b1c22dd2e6340535dbaaf0868714cfc8aa6c6a81536d83b20bd5a4abbd510e67d1d1f6406145c90754cca9e9b93fe281e21e8d32b4040300951429b6ebf9873bfb573ae4d757f6995f6e62989608a349e2e1acef8d8cbfd643c4c97deef97aeccebf2ee9ed536f923cc373de71cff8caec344dd30039e062f92df0fb6e9c25c1e67e9b9acda677e0d5292347a68a75b66a79b66ee1e5733656476bd432d1f5b0030e36c29e7fa3e954620026afb778fcc53a8e3fbb64ad487090a187b10c8afd3e1c459566cc3369f1d19894ea15f6ce00eddcc6dd225d241a729d6bb37644cbff2ed3bc1b7ead1d1c7291ccdb9223b03af856a923fe1d366be54d0219be7e48a7f8fb98a2ad895af73bf491c42f68e7b8c0ac686fca6151c42672cbd6113ce23a1529c49c86816b2e625ae539f327c444bb956c68be3250afd420023a610fcc5874478c8dd5f89966117106a37f86137a4486f6016a72768cc4f2afc77501046914b01b11faa46296eb49bd2f6595d981222bc0a2621e643937f75c95e95b89f49639e8bd3941952bab008dd2c99faf9c128c64873c726e142b84112a10abb47dda455dfa1522d0b8abadd0bfc7198a0acbc06144a8f19cd357e22e81a8fb25ba1ad053228f4028b3fcbaca01f7cc871acb0d5911d5392bb02be1b4bba90a60120f8e494fb5e5d0712d192bbf2c3b08839630ce1c6c8a566ca6dcabd2d003e13f2350a03e7f93acf63412ff429971c54ffe06ab2109d3ada346dbc122d828c3d0e2a00bc44e73e49ba66ad53618a4dc44152255905b388e29543fbf9c6a16a4d10f9ca7a4f7b251b04070cb6af1409b17bb4cbc87d8923fe982118ec74a9e5917d77f16f85f7119f22adce59cd4865c3e7cef7577dbfdf0ffe2abc69226500a82a05de0cb956ffbcae7340ebacb28c4509efd9383c778a41fbac548584567eae0ea64bb602a23ab7fc9e96932f07e7d2ace4777d762d75aa6e3957c8d5781601bba14cb35670ff154d001e679eed27ed2483ec27c35430a22082077c700b2afc2cba39482a41f358698d1828690ff6c0bce5df705bd3b2b7db210f573abeacb6499dd2f361f34da31ebe826dd8302ab180f05bdeec69a7b4e9035b71170ae1ef151eb19640776daaa042a84d731884b64f2a517ca5f6a76865c62ad56a541073ea546da1264124c2207cdb7327f100be7cdf15984159b8737a893d64c0766a5a9163ce53293d6fd8bd78baaeeb452cf6bb38c20f0ce6c25580a27ffb4d376261b1d99e46fffccfca23766dea52f567912b59e776a8d9771e9bcbea52c841ce4f42ef3320c2e34556d79b7555a99d00dc1809ff48cea4436fc1e9e888ced4be59ceb1c45c39991ceac0a84046d2b86c83022dd71cf16e50504a18365ff35de023338f6c28e1fba8667a48415ee4ea7be88a61476100952399168d7bb4ece795a54bf027de5f51fa79c08b5c68375e2cc5b8f37ef94689afc6a2f40faf957d6ca426e9d570778225f9f6d2fedfe67fc67c0580af40edced057eef7c38c91a0bcc0fdb91cdd7bc552ff93cf86346adf47a5f900175c42f67515648da8ca75bf0679b57ddc9bb5318113891638e31f4c8b1a62c1658e408496c183327e0f62ff2d4561c9178cdae656b0ca7af989801a4e345210a429b9e924508695d3a1a85af88198707463884614479746bf326762ce6bc6e10462a1c39faa33b066344578fa540868cb571cf7d62e50e5d0e8a4f7d84a0abbee29b7261a67597246dfb639a609412565ff1e6c58f9f5cf9e17138072dff2b9ed179eff3b537fcf5d6c09cb80f58aabdf6c47393ee93cd0e138b01c571904140d62ffebb0758fa3dbe3571acf850503fdb3f5872b3f312a22233faf634037fc7ddd6a94a24a47f5ac8750fc11d35cb326e395e64adbc3918b9a1710c98e3e0a12c5d4cc4bda3c359a574cd32176446fca98dca5256176c50d29da107f28bd203d31e281f9b62e928d1b11f0d964f95fd68b50e324c8d1032162ca1e14bba7d2cbbbbee0deeea2033dedea85a0d5c6aecb65d337c9e65296216cb3b6bd60da68a824f3bd90dac974c8cd

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
23ff40abd6309e15f57fac366cea0764afc563e0eac75e44771fa652497ef857b981456b99c0c7b47097781a5b481ea96d80e1f7bd604a4058372356dd3a406f75e946513941c3ca62b7eee1f8210f5f66403d4785568ea049ec45cc7d51da49cbc2b39c14b05368cb48a0cb9ff869240a91382a332666ec409f9013d2249a11bc966d9532b400b48af5ea82cc5a55dc14a829143a84ec35c829fe246ae15acdd0621f0052f87ca92f9ab479806461d42493fd7f96c6e57379ae6d9a5cd3dfa8e150937876eb33782ab22591cc94c1baa3b0a765132583a71e51912c75cd15bb226fafca42d9dfd484f324e0446117fc2d028bf8d5e8e668c775cfe83f2d91330f93664a246eff49b59d79822ff28a91649337a3dbd3df346b2ababa69851acff58aa04e4ea47dba9fe7899eb293b3d1b8cf032bd6ea6d2fecbbfb5f96fe92b580427599af6be0c1eee2b7d0c6248d877b52a3cd2b39900cd695ed34cf9561dfe6e73a9c6e6e8e7b2691f3a811fc8f565a83717b9e31bdb3f360d2b9c51382d95b8425f9f3627a511a1e21439f60369b836f3531e1a0cb8f1dc1a60cff89fa65cb02f5264dda4497e24e3aae28059f73670fa1b943bf4da7a8981553362c43d1d96dec648d11ad3edfc92b0897b48cd0ba39dc866d204de105705cbe9e34ca970a51ba6f90b549a89475f899ff945679bb8d9b6bb0b450d9e1af3c2efec8e1715c9651fc4aaa0f12cff61d540fd6836d1710b0a5cfb7454890c5cb944b9c475684fc5fdc6cd678e2c1f4c0a7fae990032163446a371222d361cc41f28ee53c5cbaa0584953c55b0fba241a59c3dd1450ebeb6255b5a2482aeee4e6f629e1a8e2bd08de4a3c79cd9268a6ba972489657e17e33485f81c7db4ac6896df75dd8a7be37cfb5c13768a702769698b713d8419c4b6cc73570d4dddb61355f5b2b62a62d587901454b9075e97c0d13be695cd4a643443ff14c1ab3839e6d93cebc2edb676ca226ea3a100daa8e7c8a2c4a2d3343913739220af0ee87da11195958ebdfb504e69f00e47cf491b8f9c6442c833f2111f6fa7e008ead6f35ceebc2a484f0aea2587b672632ca2be0d5a914bed51a7ec70b0b7ac4fd285baa4d7116370296022df0dc9063da8430eb000b6bb01bf856606b8850f290d1ef737d4d68316141783a2cf11847fd654aec044d05823c8a6491c5c417749a1e4bcfe5c8b28dc200ea89905bd980440d343111458f59e61272a90ee25c4b80d5cf37c537071be64165093a34dffa64023c00b87fff922d8642ff18cd1d5c2fc31172844328fe4d9d57b18b94b4019bdf59cc58349ca9134028cede0e8a1a6be718cb98a045a727dd89262204f8ce4ec346a28b134277ed845a4256f30b5de4559f2512f466b3b7187e6d4c4606e508f4e2123ca4688d6a675c55195fb12aeb599888ef57c93c2fb3a8d1c83872cfbf95e2f1541fb6bf6e7010eb3ce96224e59d68c471aa4a0d75c149b564560e0e65b13b0b9e6de254ed5c44a39cd203a56b7512318ede80432b675ba2c7290fa19d99a252eb88ffd747434de65836f46c34d33a8ad83b4e0d8f04c2dbab899ce336dffcde1f7ae6074021e4fcd8425902a1c9db44af0a25b63290be7454559cc3faf9a49fb62b94f23866f9b6c83d75253f44feec3c389628dde85d9198324f1cff061f6eaab1d9d12131e764aa6c13e06fb8067bd7e8c1184a550b72541ae4ddc47f5fb528bfe034f3b96a9aa709fd471f548a933151ce17dab9012a1ec2bc85507023abda0360817572b1a29d17437972b0b8a84ebf578987814c7f3bd32b0a74f6e514f85504d17ba668f662c948ca804e09631948ba848f0cb71fbb81192ca8a3bd34c500097dd06dceb8b3d4d0e8ed42747bf1f772ad4b8335ac09deb7552548d1a02ca84963bf448d0d44194a6a25117a7e0e4c4fe592fea420523dcc7157829dbbc9beb2e5a9f41b906a12c4d08ef48bacaa81accbb8e9c9ebfc4f08272da6d73a7a31d80278cfe65b062b1e23b812cc6854474a99520087269ab9110261623003558773cfde8477cb40040eb7fcc0c0960c2e1350d4dd27e34798166a0bfbb95199fcbc562a7f6add9c3c9978dc9645ae8a63feff590f0503f707e5ad8460443566e9aad798e34428c3a7edafbfdd6ba06ea8e85118c7c480efc34358615c25ea34dde5d4f36ff7219b7374a812f9a9ac0cd46cec7c560c1d6dcca03ad80e42bf1da461e934392549d3c60ea300217979c846bdc31568788f3a06ff03a5e07dd14e682be55a8b497b3bebb761b3b6b582457fb8d17be908bb06313626c8304f143e6a38ba2b6b6dffd92fa0d76af4473b15c260d8a2ff14293ec93c92fc6edd50bf913ec7478c2ecfe0eb794df36deb7bc6704df548eba01ebabd3bd6da4cc0b5cb5fdf94dc977bd6fafad7354d1c43a3637d600ef8ed51b02ded893a3cfaa8574db2393036142806645bffe846918bffbc1f3e7c953cf7f0231da63d037118e0b22a6b2fac7e1450eb4bae604fbf4619cb7094ab4cfd5a1c2bb03c6a32fd37175ffbe2c3004045f0518dacc44a52f87e3576b66effa5e8d7a68d205e5ca70cd80c81e4a5692c2c3599052413e7fa2bbeac5a89ef3d2c13c56bfcaf1f3ef6a38bb60c81b3337790c748331bc713f49be5e7e4f31b2e3ae1405786bbe0d2c23977be179ff9513ef06c6b98a3605871945b1065bf2a819881e55f0e4ec7b90bc2fd8c4460d08c6f66a637655bdbee62d71a0f4fdd190411902b910394dc8995dbf930be27760e4bd8939dd2f5e4ec895f35499ef6bf742cb4c7fe1727d60d28d996a596b0a24569a6734f1c9cdbc4647823ee740f414340248434e6e0e9db968a7cef126a0650dd4c27a9a3fe3c21bc5063021cd60376245690b5235f969a18160389f96af27dfdbb4729849b8a6c2db70880aba23280ed3afc7c0deb751c64c6fd3ff040162bbb6c9d191a1ea340d587193dd8da4fe27d1bfe0796e57d319093064052c729d26156aa57573d234ef69e85cc9156de14e45641e6a7f2c2c2c92e62b98ccd31a04daec098c3cdd21046d9d64e61cfa615d96f2d1d577b72c30efa4cfac9514806541d3a696ad1a2e8cd879d9d1e8aec6f555eb41e1e52568b5b70d701ee532a8f731a774e6db7a9f7a2083c57ef2aa57bbc84356daf2578694d8098103be27604bd1ef122157b389053040d03358ca90a7c0d56de1805eea077ee017e22d410ed9980dfa3730654b2c076d471137774e8d508cd8dfb3faf5e99fd667d5e2b331c01dcba541c6a97ed8064c0163dd90f5745b2249395f314cf22dc8397f390bc204f116f596a2460b91f649770a8c01ca4d2f8693de3b10e19c82ad6c81527924cbefc1142ee607fbe509fdf4e531db94f7c8d56db9d277abccec4ca243a75f28eb03ef0688f3b8d3bfbe89c1af4a6241e2749114417fe6cf038046302829f6bab346eb74dd5ca83a8614526b2ba9f84cd452b6df538f62032d83666fd04a3a89ceda97a60279addd64d01b25b301856498d86e93e820cc217e4d0d1701c84be72b5d36619417bdc0f1fd87ca6eca6d4582ce9db42afab83a069d82034c25792fa89d0298e1f2629a1c967b0070c6b7c5f83c90b242159d45274b6cb6336798d34dcacbf5da95f1002a0ad13f149b2d192bfdb20429a812459d9ea870c46b6474c576768d6fa99b006c00daa1b359af29e7960e091412443a3f41f898f97bb3dfef8665631743c37b36d4aaace222909df52780bc5c9641987c9bc0304f4dc5369f59271291e801047fcbf56ae2dd7d4e9fc877219b85eea3e0df9a454f8d7c512c3153843bb5e97c99c7522b25e19691f6fb981bfa40c5dd5faa8cf24f61e4a102cc538b4553a9d1e0a4255683f6f092bbfb7c802caedef8630196b4610a7c6f9fd68b57770042487f5efa11783df1926adecfd240561a911d5b387eb046e2d41e6618ba8432893892e888967885a63d861ae18cff229a91d2a1def7cd09625bcd5a4b8380f44b840711881f20ed9a2f9916faca0ec5f5f5f19aca4258d1ee061c8c52abd71ffd14d8e6beed8f5dec95956d53b5e51727122941562bb148e64fe027bac574a07ee9d99f73172e9caea071dcff78001da72fdae5ca7d2a6f4b399181664a4b909bd76e9b54ff73706ecda2ae42ff2a9bb9417e72cb2270c8699fb9d548c72146ff9ccff32370f8547192c0cdcc9e804fa0610080b3763268c6ff247e6e8b40ad47a03112e90a26629a19e1f78cb746f69b00f3b6f8a178dc16e68e530ec2299546bbffac405e7503181de5913b01138789cdc350a79b4d861feb9bd9
Outline buttons with colored icons
View code
a3bc5db338e99966158ed5eedf3b0803336df946b8bbe2fcd451d219a5304036084a8cc863dd8b43bc8168d37baf58f6e401aad44ee111ff2495f7ec832410d7d7e6a8757259176e6129f92e02f37e0c7304e6d23ad49a404ea39313c1034d7a023d424d15b35b3d7df36d8df6b1884b2d58212eee40d447ba53242029679691fb8905e9d0d5e3f7cc8de8d25be863d3d476a148da0bf4946fdcba7d268acc038bc5abd621e7ef197463d0073c3ef713786d35411ff9a35d153b1da635d409a9bfd1a2fafe46ae3a72a5afadc61328d1c7694cc410b791e0eb7867a685195ee4b422db6f4589c8c6b2e47b1e3c65ef72cf4c462246f9bf6e391a4e8e33d3d54e25745ddaf370cf7116e82d5023c9d5d6d3aa30a56ef4ff9fa64fb4bf7eae616b18e92b54dbcdf8d72e78aae0c61e983b4c29a44cef8f38ab43e4d6d3677b66622c8273aa376e5dc1b3ffa0c096419d2e4bb5e43e23247e663689be91819f26f5c6b9fbc0d70dedd4b9700ee3e78dee1c90a5e8886c0765e9c088bcf5e8430bcd3a6b9cdb950de2fa42f2a816b174a38f661ace17f58ad7874a75878ba0e312e936fe8a54ac464ee1f6008fcdcdbe3c4565effe145d45ec7002f420160dd189b5db9fe2ad27e8b27852c02b02b33f47c189cbc56783da81c4270baba42230cc0c7f18206c3cda4f260272b0aab44b4ec5c21939fc1adde1b6688edc28c6310ae8aaefad23b9d931da8c228bf8a491f7ee2900e6f3b968b6a230ba6ff211a403b9bccad5d6b72e11c44f2346a85c5d9dd833332cf23bb67f3c42ca0c3d35762f128384fb6d61f94f271a70eae92fe4f69403b1582192b35de8b6bc473f385972ef7ea5ec216b38c64bcb98e61193c9108f0890ddc7dab6b1b441b6f15df4846ec9e330fe3a7947c3c969b9281cc5ce8e304c0ef56bae111e61fdb922c46462a6cd29f41ea1ba5c8d4d453ecbe6ca41dfc8b66349b88e21ddd7f3a7b33ff415438d3cf0c8bd31b164b6ce1092a6da7a8e29d18bd6a07045e17c3f7522d15d1501b56adb2eaf1b926bbeff59369b2cee23222fdb72a1723c6871dca1b3084c069f30855e7fde38b24d5f0066598a77917438c015a325551b465544b8f83afec148c88828007144f48971d163b618fae9c0a74a0873c389d3c15b7428ff84de39f1f880a04b68faf412eedbee8217304dd201b74f28f58581a174ea11bc01867e2a794c3df3d6e7ba1a8964f705ee4fa669a987311ae4cc849115ecb409953b940f985751468bb14a0b5d5dc299a784a516cb5d56593f3dfab49b0eafe3c71747abcca36f49942769c7d8b4fedc97f3b0baf735a561335743ef9c311aeaff8497c5ca7e01dd9d204a6fe2a7b80909a6632026015a18a4494c856768b951ae5a27e592abcd076c2a74243429f93dd920b7a0856ecac5c4dedc8fae08465d159a7ff781dcf76bca57aabb8b80b136969ee6288b2e8008fc16174aeae38fb0ecad851aa3505208643c1637ed7dbd5e2242a27567b6b592fe88576d89e58b780b8e28cf2df42abc2f18471d17cdc88e1278c910ebb70c46d22d6bb1eeb6e9396a32ba82cb26265bc15d61f24323759d0bddcdf43940e746f904b8ee97a9ca89bb1a1226394d892c64607bf6b1697589297ec90a857945bf668d7bfeda63756296d6d9eeb25cb7fa08e0bb34b5dffbe7a31a06886ca97820ce46bf58a9a3b2df9c76e8fd69f89eb164c538f6844ac718ef65bbd8b8cfb126c89d4aad99c9e812c879559bbab79913dc3208a2077804407faac8a4070afd70218ca3dfc42c08fda3d041d4407ac6ecebe7b8873956ef83821d3520d786573b0ab164aed6f596a24431df367d97be419953fcbece417d27144a2abf2ed6189b65af9051533a850d39759060c0c30e9e05acd7902b343b780357228eb2c742090dd5c294e0af1ca512defdb0a499c237609339231e9bedca52cbf07b72b05fa967eda5aff9fb7945ba3894b218e32edc42c526d78e4fce66d4e2994824b5be87ceb0c4c7bb37e48de0a425a47c12ae27b7a358d0e8071b8e80a03fe13ae70359925a7ba42cd5d1406e1a80461aa07f936ff23e111042eaff05d38928a7c9a96d2408235362ec73c17d9f27b84e98ac9176ad38c761aafbe2772463cab1b317869904c47adcf3e26ebc5307bf667e1f8bd8737ddd2d8b6a84f62466a1d1df2edf325c6d0a4eb6aaa886b674f5e0dc2f5daf5d8d0c058d866e649c07dbe118c68b5aea085da0660be32bf340c863c41fb008f4dd1b62492f7b0f4988505af7e3bbaad511e5149579e4f5631428f83b123a9c422aa8e789d8fc67aca724684a044626ce84f66748e659c6d2458699c2855f497e117253a7ad77566190642a28ce319d506cbad3dcdbd31b0367fe43001cb60d20d763b0edd56491d0abb332f4f4fa05b87960d52b6fc65b92e75c7b924599c64018bdb7115ab603c4794bb332f166fe0cf4e22a3f6e2187a6e766430420184b0a5d2f40a42c27a79205d938d499474794d97fdeb50039bda8882e4231e01eeacc1e5f159a1dc5f4559cba10435768741492fad36f7a7182276867df7e9d6a53ff64d0cd17c794b0e9c89ddae73ac7be377ab5d872d602931596a98a2e9e3ce6bc96c8c63c45bb8cce8ad22ecef94309f0b48aded63bcaf5c05cc39ace844312e84317dd9110bbb0b34f641d
Article buttons with emojis
View code
4d09ddc180032b4992d3bf2aa787461ca46f9fac5d9b59d8a2ae60eb28f35f83e4911d8ad2f838219cd159461de05c3a728f76300ee922f4dcde98c20a377a1a6e4a9acdf51f6dc9ebfc2c32b406ce337016b746da600cb871419500f7f0ae67957d2d8c0e9bdec407f561d35597d920c253f758f38388269dc14872cbf3214ea8a5db456b00e5161fda7f1f268463139722f3c1755b1c00e7c8b8c143c7f9a68f93747fc4a231f0f5584b8f3d00cadadbcf0e39c17ce6eb0f5399d299a7e6a6a8d06a733cc6e48e057f8c7b68084f1cc74a4be05855c7fbaa4b15b67caf6bef1e21f0d6db558a63ff1d356e3e5d8968e27937aee1e6e2742a059733c2a26ba4f8979017f2bc8bdd8899e2fdd9f811548d69199d818cebfa52dca8c490223f0b3653d75ff4f0691df9f8bb1467c7affc117c0806e60e70b10b62fae1d0ff2f656cf9cdc7e9dc695fbd76e55315d55ab8733b764b32a74f0518b64f05e6e8aa5768a894fd664f021eb6d6cc39948c6a6bae303f6706bca15106b0683169b6d42367a7d8b77be8b7f36c2971c58bd61180d3d3d9b5be8d7a8e199518b7c21eef2ca9f51212697047f2606329701c09fa6e1b0443148cba7ce045953c256480374a8c1ad766a1fb8f851b2e006e4f912df20b02c8dcb510169bf1b17903cdad1801734082555cabd822ae14c11ff6e40cb8c3ffa739945b4c67f196703408cafe20b0f224132ec2cb191aef1f8dd33d92db3eecb047f7446276a9dee91195997ec5ea5b85daf23de16cd0bcc089eac5179359517489d022ffc931069e8bdccef56d250d4365f2db148a6ae81448e6235b091d629755bc01e80ba1f7f031863a88ed086643ca7d0fbec1f49b1ec389c92c2c79bd7d6701cee5aaa161b746ee4c6080e312ba565005c9ad9ffe2fe42d6eaa49fe8c2ab29f3f760eb7ac65aaf012e6c1271e4d0d0a6dec526f067d965de6b55d9e1bbc7ff3f654f343a05b3d91730588f8be08b312d8164f095e01658fcaf84d75e001975fcad18e4067b5c4febd12a731a4d32ab000d5b25ec51d87aa5387cf50ba0d7b83a11d482d0303f97c5169462e9c68fbca447c250d670d52ff62d89493624d05c5ebf245431f827ec9342ac4bdff007efae6136411a640f7633da2a1b78ca28a48a22bde11e31e34ece2bb676f0857462f7e796d0413395f04d49c943158f431541c48a75f899c4c63568c57c24752570d84be67185e4227110b6e8c24246a6d5567ca830775c3f8d9002fe16e352fdbbd9b85a6cc1196709bb6e0f9ff169f4cba2a1150c421d52e45065d4246cd6c84ca4027f009ac7c4ffea6c31d906120d6e32feb662065b921e7d70f7cbd5c40a20cdf8549ede03b6e269f1d287dceedfc7ed116d948d6ed28c9a520ca67bf57203b4a7c98832f672a5e70ac3d677d0314a0f9c069e195790b8d99ceae2d02c7c831a4bbd92db840b3b83e04f88bcf1d2b2f07e519363a900fce1a4246dbf306c1ebac057a2937ae643d7c7aa169e0915c5d4c6b376ac8975d94694e957033d6946187965561362c93dfafbbe8317d978086a77afaac712dad50288c4d7d4815dde3b1c35ecda7690072e216d75e90bfb5653fbe13a22506a16132e66801585e589bce20d951318ca1b0466b03416a5605ddc6264217bfa5e3bc87261a1919eb72d0fa66c91301a3b3e69c7e3a3354e186f48c2111886cf66c844229f5672975e5f25d71c35f318b09e8ccd497e963a7c7bd00979ade9a87c3034540ee272ee511d5bcdff03fe5acfe85d5157075e9be5625c2169420d45a99474ae6d2315e3b41b3a3e062d11e33476984327dcbfcd36939fa67ec54bc7a62fc76cf7c48e4ecba44de9c76caaf5d8ac7a58059d6f078c925db31ba2bf08c278b891cc1b815feea19a20721c4897081d0e06b2ada57c3f444306c6e171d57ba0e70c0761b5d2013b62e98518c47e5ad647c758cedc735930bd99428940ab45ebec1da1bdd1cc84a8bbdb52389eb2d4067bd23ac68b5d52368d80c99979e2928b73475eda26b4ead1e9e5f8d861e224eff1661f4f03d3b9198afac5325a9243072e4102c23d9cda9923c3d5c69291f32a9cb249ef358a677cfebb3a3579fcc8af7d071d2c3ea20b91c3e2e5e8e21881e9ae8a66f1b262029bb447f215a1e6564dccd665d51d769ee3a1f39a36e79efa9729ecb372cbab5b53b94766f134818e32902a7999d94375f9366c701b8de98db6aaf5ff37d7522a06394b7b035a5f77653bab5e718f4c13cc9f11c3b070029f71e132364e9c6f261bab2311399136a9b5fa91c1c0c0a641f0dc79721c90ec793e3ffd986770a08dea2d5f7efefe1e9ea668e88b982a1289ea78fee2ca12b33a08dfe480b744ad70c9c3d252994329da39de385176584a4c772d3de4bbfa1eb69d575ce26199b145b49f256fb09b98b28940438a9be71f7ecaf49a62c0756d5c9e4b4652096c63a4765cb424c6fc9e58b53d3a3600e9796df8f9c148061e6eee2966f00ff0f0c6826b37a28bdb0cacf0d3cdc6050a90da57ec653c0a4f82c89d477e4e0b62fcfe155a4139b4dc7f2b9eb5894a9045ada6cecc2a3fbb9b6cced1c6aab5bbbc0d5e987e6f30b6040338b4e76d5ac51485f79cf2abaea63bbb90332db11eb187f95fadbc0e6bc26680d28b3a5a2fb1fc956738e345102aebe30ccfcd42a2f556496ca1dcf42d642e85a0cc4a7a0bb23d05efb1b4e360be3576d1885ec61a149043c0b3ff6fb22372e7e2b98f669e087b6678ae48e3aa16b2962511a8748051363fc86518646120d4a7da58c5506c9eba7eaa255f466acbb55187294d67249a46350dc781b2f3e186c5ab950b15ee2b723f9d72e45cbec6c475abd7dcf78e29922d87a440be14fd2f6b1d32c3f31054c965a5aef8a9566e5985cc58f95e9a4e784c5a30ad0668dfc0a015b031f794ca5e8046e947ec18fe8312ac4d888aaa88d66ab09c2daa029822dd97411ccc0a2d5d1ccf1da91d739e1690ed1f569a49ee78e66c77195a314c1c51f3c48418ab5a38ed70a3e117c18ad10702bfbb8cfb8c1e5c6344878eed90489884d975de33d75e2d5bb453203cd748903b617a0fc391934e77c295a4431e1ad7e13256bfe25ef7ee0e90f15924d9dbea8f1e32e9d395ee1041afbf77959102cddc7613f5c64fb7427839ebf694f5b7609818d7cb1caddd2cf3558b6472a017e5348ec7c1fffa4b7d12f7d29f043f8b56ecd2e5c7bed6fd7ac9464c02deef914a26c9b4a7a791660fc8960a14014f3ffe4d9384bb30c6e31a22bbd9264f278bae51400113661cc2ccac92b1b441ab75d330b0424ed2c34f7d4509283f0d0625f3f4b35221dae8f5a51b8a449d22afd57100ae4ace1387dad11cd4e446411a9dffc2d95971dc79156aa5711b5a4d79c27ea5f4d7c10e63dfb80b449a3845296d4427758f3fc24e37b7b4276fa2f5a42c09efe0718865079ea717ac42b160cda6732b10376dead3811c9b82d0499c5348def1b5d827bcc1c3dbdb379c49a91a3c5d98f88645e6d96310b07e7240b58545b566866228fc6116d612504158c8457d4f8d91e061dc69e273992841c0a4904996dd34fd6f35c50c07741f81cbdc6df8bb576843cffb6d56e92fea3474536ae3f8980aaa8e43b071419ec2a064701729e6ed245094371e75631da58237c9c2725f1c3a23e7aae1c3dd10cd1c5e0f0f70c2eec1287bf6a8bc38942830f82d3825d4e4fadd7fb99367fc02c4d7b6df26fa9d24eeb945c641b9ece074c9fbd8897eb92dba1f85faad6c5cf4ff52d5c7f51685feeed8c203a7cf776e22aa2d9ef995bc40c250bd1fa9016bab6426848ebab2be8eee9d85b608a875a2c25395efae40c923bf854bbe7372d5061ac358f8d78907a00d22dc8631f5f7101af93d504b8d69bdecf8b436a6d6b92b38e1270a2d68f0839cbb0af91c0cc53be7d4b76795c931782fcdef94cafb8dcbeefec516d73a53ed4444fc6390fef27189ddcf8ef0afb43eab9e47375761b8cc8a313c7870c9bd220ebbf99dc9e6f2ac386ae7a01c51a47660c5f15e620972cb832d47b8b85ebcb1c00acd73f7c4bd0e1550e68421c7f71264f763d2a7dc7e76bcdb621e312a59d66d739351080efdf36b28ef8c4bbb9673edc5a9e818aff0aa96a0565f146ed3e553321c9582581d68353c693477f633da6ecfbc6b483ae48b7d3698e3700fcbe1f4ae3bb418665d027b38b499b8aab13070496f05168f38ef3fe8f397d849ca4323f40e8e1f12ce06396a8262a696c0f05b80e66f3df098c134f623b68fdee569ce103e9190b9dfbcc6cdda3c532b3a372ec40ffd8654657fca7d1e430605a6a646317d4f4a3190c8c2d5c1350efe25e477a82bae7aaa205c56ae7a4e9601807d9795a6d2e48ed5bf60fcc2fe80e1c6bdd8e49484b751afda699de0589cfd1c11b2f619156986ea46fdaa97ca5d83e07806dfa0599184ddd339864e86bdbb0d09ed75a61a10a0b70d3c9975e059b3cdaba109350cb55b790bc61e0b89bb3fe17d35a3f69c8394fc1183fdeac8a7568abbdc2b307369faedea42d97e2f7f4d9f46b15522e9baa71a67d09a6039bf0c9152e93047f9db4dde925184a5e51db8ae9532eb0067e2463e96f7f04f9c4344c7b1258ccde4f78c60c41e014cceacd66d4e57b8919c3f3ddb3eae601878db1ee6774fae4f4189b08eff6f59d2e5bbf906a185dd9d626316486d37bd3d67dc6200f439e66f619e29c8c37f62214ac1f8b67b19ba7d30d6a5c2058f59bceb12bdb676419fc624cd5c2cb47994f32a4120862f7ac437ad62e6bb3cd44fdbeba7060e2fb6d53fb0ba981e0db036ea7b79a7da8d16a67fe7970111014830eaca1a2a6beb8d0e54362fc0d2586d1f134541b2cf9bc576b71c166226dce74c004d27a6f204f56cec608c615a3da800238e78b8f5a4d1591832fedea50b9bd730acc35723d027a543d7d0ebb9f65135da0510f517943cdec869f375233e1b420be6b595c617cf28b66a6f832815fa81fd78271d3110951337bcf6c2948ef706dfcc2783f383bac7fdc65c1d771202f9ef91a8060e483a891f0b4bfbb4cdf143aa109781b8a734d4cf1f8a38c52166847c3f5bda865a5fe85a562a4dfdefc8f123addb117215d4186fd00eca8de93fe151436b43e0c939f45c292c9e7af162cefb1fc859485d261ced53b98b86a2ec45c2d4d13290472ccb7b2cd44447be187956d678ea23a7c6630ffc49754c5c5f6bd3029e684cf2e85c3eb0b272ae2cbafae8becb235067e8a83e5993bb7e4cf9f9067aea578c4eee0d2cfe006181733dca04ae5b5b7c08719ef95be7ec03dd6df295d39759a7664c6f5cf3944f14bc1febf53b9b82e3feea0ee9848b9b71b3a527c28425605b2d829069e9772f00e469f1d65b8cff3233b3bbcbe951f47c2eb6f93a1692284abf42cc1d305d729a663d7c8382c8ee0dc11af099c5224402b18caea15d6d2e30d32622d76da96ec7b2838cb4e02307f9a7b9247827f0b8a94d857a4823e2c3af643369fbd04f382c8bc6fd6828dde2e5f4a79ea124d1597265459d8b492446ce427d5add9d68e1fa63ebd60564de9e623ea0dbe430e998e859dc1235117ca97639e5d2ad382d0c53505f3b39615ae7b62a2c323062593049eed53122e738df135b660b998827d23f926c08b9f3894a2c54f13127143fc5b86a7dddac94dcd236629204fad21946b3d540df080dc82d5fe045561201e2705a1e026bd53f50d23269837ac26a301b45a2145e5120cc92dfddfc71a5dc6d4f6428bf3d6d22a3f076b66deb93537523a577375b761e27f867eec3040a5bc2ce54dd85e5915c6dc3e779c406a88ac71a497b07c0e58f1eda105aa38e116994a08de129a4617511487a94bfcf971267603821ebc93a2fabcaa48ef5e26949f04c31bc3408bf02da8b191d9fbf9384b2ce6a8b59ba34968653364252268857ed70696e372b6000ce9a88ea0c8e45fb98fd276d45fe319dc93f300131f8b0d62e70635dd7f8f4a3c1d30bc610b1f744a1316060f5ca913a72b6282e5babdd9b328329105f0aa55fcdc2ec07b0a739fe5a310571745a5f543a66cfd7aa0f4db44a4309b861c16959759c121835fefe4cfa1d0cd7ce8137250f6a5effe71daf4f2b01060a63a61b0a50b52e71957a4fc6bf97e7275c176fc983879bcebdb8e836148bd27bf29cf67dc13d9f41c70a456c56ae20bbf97eeb05bb5a4797edf77d5f204210e8bbac99ad11fb6aaa613ef52c48f55f4736c67684d6ef734d81e8965f26a1d789df2f1f53bfb51a0eb4fe4725023423ca3475ca4aa2390db15914104137061cb2ef39ac6d4c69408318fd725cb304e83814673ccd3d4b166500b71a4041fca73074ef2725a72133097b2ca77585846b7ec19f1a6471bed8002bcdd7334ebda50cc5a849d123e54c4224888cd015ba91690a79e2db45bb8cb90dff92074c356ce0887f900f6e593d1705b2660fb3b94d3a178d4a6b5830024e8b1be9cc45ab1b67b5b8f2c6f5cefd3c3d2d68061e5bb27b5c614990a043820ef60cc7d1c1fd16a8cd63d09d13c1c71d4cafdb2b8911f4fde947b6dec36ad4fe2b06e57ef33dea9ef1605d8d3a8a15c19513361c179e5f11fdee58e32fbac7d6678f0b0f5b504efec33e3eed2a369317d80833654eaebda5d1643805785c3fa2a42f92f0ebcd1449d3b54bcf38a6cae4f3d6037244796145cebdf1d772b2a0bf5724d7c71414c08fc76ccf0c932603ae4dc430e649aa5f2ba01ecc369d672c01d0883948386d0d51176c073f0205393308524115db67180459cdce4830e973cd2219906746d5596eac2917fa9729168c5ee44a79d710b3df6ccae2b25bf41bf408e4679c768d7466bb1874c2bb57771be47056303a9b3f0940d1ac00afe3b43bb199a529f48a7431573b221be0e0205cce9c7861f98537276b04a97439e34afbd7d87ea2cf30a1a2d6777b9e803dd8f9c39d189fa4f0f4ca6a95698eb14fa13c816a074bd265235bd959850b35cee91208815011eeecd3dd65b83bf95204c4a837ddb8a199436949342fa4ce446bf8bfcd42d20c5e5e27af43090c08e7ed904fdd5b976544d3bc8da8f33cb66b2bf4c032c803a7fbeb7447c88899241d1110c320f152a2c0593f7fd1f6fc0bc342e7530cfc37e2cd8a4c8f69e34923bbc7ad2cc8b06e08e372da9afebd86734819cee09756c28121d5d90e6c049a38f1457256cabcd0ffc8214d6c8db2ab6f5db823d7090e53f54b3d57172199454e40ef30e90fd5fb0a55ca03ac9aa8cee4e1e3f5be07bed02a9d565805ef26140a02ed558dda6faade2848b1378d5cccb8054ce3789647d71fc05373c0b0dba2dcb97eb7b761de5154c6473217638f8f84e512c0246e03c1961297affe896b3d9cd8debb8e02383ad7748fc9ee17dc4b38a20dc3e5cdff66411613b253195f5931e5238bc956b85745ba7f7708ab8133598966e5dcafb1fb8af033d4886ac678b3a5cc7f863ee36f976fde63c4ca736aaf382fbaceceeedf9f223a5cb54c7305ae2131242d82f7b56e0b0b041d945244f0db95b21405aa4853a9e35b19b0fd521fa7270d6e649dd2f55fb4748b55922a8c1c9c06d765944c775b55b87ff248951444374faeddc9ecb530557fedd7e9b7feecedf865d7afe0b3cd4fed7bffb0c57c6dc7f2cecdc65955b356501921f12270623ef5cd908a68358d91521b56f54cbfdfd24ec6b958676a8ea8031c20fc6183b1441478b6a59a573d442de37f19a67d11939c8573d9b7f9d90b502621556f7d3d9e3113918afdf02a3e1ebae667f04b663706ad63d57a500d15533ed97b84ef811d0bc2e9dc22f81f2c275039de653fea1afaf3df6f19123cb10bc711b2e03e4c0ace52881307555283ee59ebb73c9e476add0645b75916fe800e5e5dbdc65e4fb3ff95abce7990b805a1889ecd39fc79b9f3c856f48e1ccc223fe5e00fe86a45bbcb2d8dbe5ad51d14dc4b0fa5da890699b64e91ff043473a136c0df9ee892e60526605ef229f1b5b5280db22a1428cf93c6bb6198268245d70b450461f5a3c8015c30b790e8459947ce0c8681450bb732ea1010dabce248ac69ca32616b04ddb3a367f1093a8be892d018bdecab6fac0a85d5b699f851152271f97f61576e9db22a04e05082c151087811975d127f75e530a77bacdd79d2134e85a62329dc716af5530bb8af8f87b650fbdc14e252ebf3ccb0a5e1f50580e123d8a09b7bfcce2abf3c9b799aae86cbc1ab1e7b4d672711fb75c9d95f36cc247b3afca4ae401d4a68213548f77debfcb75cff9069c60091b446a274d1cf8f0325c2cc57d0bdc2712264ffdd100cbc23b0a3a00a02b5c89063b4e5e1bcca32df492a366534bf14a2724b96c17c78f6baee7b727e3b8682c2b6bf3a275ad735cd407894c7275003b0f18b98bf4080841ede38a90bf5ef33c81e8c575cf6c144e6fe64f3a9a702b7269c49d8874f5f23cc8b630fbcd87ec0cde6fe3966e52e95163988c95e865ea9e69e26064a7a24de2ba8669a30406b18a9bd51cf7164e528545199a7de98cfda4fe03fb182e4d42682af7b9b300f9c63a413df29f30e1d3184d9e583af639cf5426b6f27fdae2f3e1341fada45dee0067e9a40823200043ab222cb1e3899f2a73355282f43448afca47932881053f12b8baaad373daada97ce1c3aa8aa73cb5356e070a49d93836b87652e6000d3cf4d6fe3697addb223f3a0f9f58f55eb1b13f9710e9456e7ee21cfe8e7a4f28b8f5b19625612e4b7bc14bf334d00833d36c10013f5a1bbae3b0cf656c79dd8b66bea4a60f5638cba6441d3c286efc05bac781be9b645163f96b76c4b37ae0b52a64ac647e01dac329759ef04e9e6531b768b01a1f6854b30b1ececf9a342f1e66fbedcba71d37f6b9b4911b9a4f79b9988b2c4d5a713157ece2173f7b0bb881f1a716aa56596898b5013c7a34a723047739fa1a1f029bdcc53127a52a473c939bdc065dc62559d7748a3c00121350a6562328c97a903c3c7abfb02960c358dee2bade19fada95f04caf57bd5ac6fdd540319c8030480fb7bdd77107b8b8b8e0227eb5e4fb146a1d84195500bbd5c80a0ec6f0d2abbb01add523f40c12cf1f8cf700b518e910d60fa8eaa44cc6f536706d1211124f9abc1208d118bd658411abaa09fb9bb07f3407578ec3388751a2efec5ba94ea6da273b8ca5d204d46db8743969ad64a27dcaf171eee24483b9eb61eacf576c0ae315f811462f537694e0aa1e04405cf93ca2c564a8559e9160ca10ab2bd21565bb9927d4f407624f5c811f39534855d279142899d5605e6dbffe7b81e140abfadc3e80fdfd055ad4c24e70be2ccbb2b9ad35f05f14cb1efc71e5180dcc217bedf9262649baf0e2e42a6e4b831c722964a9aa7a3df4d51724165a689fce5d017287fc8e867a55d691ff7b11f0a0232107309255f30a4680c7cfe2867ffe8f027b55643e799d1613223c09a2f0b06f916dad1c1ed097b62cac191329cf1cbc3033c06d277b5cf2676f967596ace8a93e33e902944891f0da894b0f3116853871e9d34a3cfa5dd7586f6de3c7553e8bf4125647111e8f7ce126299551bc362aa854b3c1a53bcc9754e2635158a9aae09dbae325ddf3927aeb6bca4688caf7ddce7a2131bc77c55844f5f41101035b6844057d38dbfaa1b177b0eda5089f7ade8e35ead5f8c2aff69f4e4df5e815560cad9eb8e56ac37596d6a6d50be2e058c14c445b9c2b705d5da53c1519828836b5d5250e797628cd396726c4736fe742022e5181faf2c7a762b6dedf1c9f4b7b244237e6848b75e77f14df528a87bffcbc067dbf70759a9676f3aad9c33598ad2ca3ac7ca242ca642915a2f8a12350b21faca5152608f413df3bf6dad5c595baff66fcde341566e0f03cc83d3aae84547a668ef74c5fda415dcbe05ecd18fbd4d49ce7f584f65bbd98dfca5b452fee0fc6ecc336b111e25a6f19f2ab1a2250b337c763dfbb597ed0ecd60bffff0e3fc6c4bf39eb2271cac9f7cdc61b7fa624042f46d6e575756a28493ef0395e23fb8b718c6b23e8b60aa23b9ebf9011cbcb8c4d5bcfd767d56850805ea415b786847865d4605c2dac1bc8e9357b90904620bdd41530c787079ebd8e530312c7ca960592ee6d846b70db5186b01f20081ef580942f9ed9b593f0f59b29e43797910dd03c2b7b378b21d506bea79b273cb18d3459914c01620576c539288f8fbd9bed980c168402e33352e30ad0017e72d074f3e4ce68dbe72636a385719fa9200b0849ebef6c641ab784b47ef52b8404fe7224de06d8163ac7603e5fbc0a075fed0e66914b8e4c0e85b671506e676a25ef7de87137666ecf61a599645fffb8e3aff28ed0f1bac78fba069789c2b7178c1b244eca646da167cc2ce83eb2a961fa2e16e17f9fdd70a42b6f42034e0a53a12b43df871d499df9bcc81f5adc58429916fd2339c21edf14382d5629a0fa3b56c4ea0c9cec3134f8eaae3a63695f1333795b68fed353eab26cf0061fdbb43092f9d094058ae3499e67478b54e9ce4985d3d18688df43d373f032c3bcf27852de0d50ef25d0ae0357fb69010c6d20a7b29cc81b34e5bc446479223f397d232729e1e5ec7d368aea4a2f4d06367ac103bc6d4401623fcf9fcca753560c1c1e616b25fb149edfba962788763de778b1bd40c9e7590a55e7504d9603242f96be17d11e90adfa1dd5c9d361da6ed343d967478b3530fd79e5d0238d4a35063e7baca96cbecc510f557f17d6d8cdf027022d6ab405b3e27b600555a8413e0158146077d734c5efbc61621b62cb9dfe7641d84ade9c683ff912ffda49dd62183f4ecdb749fc5e7d13ba124302023da756ffb1e1cd5fd05997dd8923b1ee06cb2f184066ee755c110ef8d53af035ccd367a8cc7b4eea5bcf0971e9eae2b5397a9cd48dde34d8a7e6c4256e3da535812e852d9e116ff1064d99331471a7694d7a713161cd28a09d8a240db05e6b32acb2cb8dc9856fccfd65bb9565a1415e45b3d4ad67aaa1ef8303910970adc5f3c6b40a6fc005a5c8d138f83af38b7d40e89b234f67ba9ec89874500aa71ec871648eb43b39709dd8c3bcc50c364791f05e21b04457ba98e6d1cd69f0977e0624c58f09e7d97412ae84fb067bfbefda0359c5e5681891551fcdf7cf110dd1fa4c3775ce4ef70aca4eb1efa6ecfc52870a98d7d8de125c270efa98dcc3e79e47b7ba7fd91cb7738a1ee2e63cafa9336cd42b2b265bbcac2e8284113a3564ac233374062b330dc4a083362d798b1130d20d8766ee575b01eb3ad687a75a5d8fa4fd245584de6078137bb97ae8d83dd8b30dab85a764d322e0984f8d154de58a8d564c8fa593bfdab4cdaea57f24a132a38951af6af2a6e091bb9115d7fa31612f151144c495130d357e9186e19cb71dad874d64b55cbdceaa307feff4e0d79e2b811f43690d676270e0bea2b7341a9436cd8355f84e0510de24082c36872a42e28ad0977ec1a6c9005cd64705e037d7db6e0053b29b3e26cec2b9be44c4f2e030114a23361514574b23342e120f57dd06bcbcb2d6a2ac788e2f2362b4567e8b224bca67

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
eef31e45c30847661d8b25b4d4a44b371aed24ffa0489e38cc97d4cd3749d183ce8bd8b1cd6525d308b2e4aca8105a1cbc4309fefb58c7fbfdfb9f7300abee06e26f226de4bfe3acfce012c00b8a0bf2c599c8db3f5898b145d7de399b6b6db436b601f7cbc892d5cf18865b04e26721a43eed63234c4d5e135d1ea26da6cfe6469a0f5a2fc1c4445ecc0cd97ebd5ff63d2047bbe05bcc96cfcf2e5c8460e2dd486f8ce9ce3c362104f5b6c0d0f3ef5a5de1223537409bdb45fba4619272964823cbb9d3641edbcf20d8ffc0c17ac1886701eb9b0384e4cb8dffa9c418a7c06818573e89080309b188f170e4243805767a8b6015805c3e3c198cb7c6a4fd3cc4b6e840800543761bd0dabe04193f684d7359ada1aad6068a7a5308aca7a57aeecee21cc147233b03f4298ab5c51c37669404dd0e0b010dd929f960cd205c79b6e9829e776204249b1b451a8841fcb9896c8126b46f74852fac447a89e165e4e4e3d3126e2c6d4401d76764ee9879aee1437b9bced7343013e0c659f01f5080e1810da17c853babb88236df8caae51a2e4e326980f675bb93562cd41576201ffa7bcc63dd41d71df367e729e52fec7b387eaaf02b4ad93b8b5b1421a002fdc0459f2302b5aa64423a11219400d5e74a1ff7efa2f91a027a403685a448998e2afc6d7736e854868cc80c57a461697e6afd307a80a4679bee0e30bae3f65f757f50e659901f1444d5c130b9a8ead2ca9ea13796cc678ac107ef7c3149c0865ecf37ed385dd27bab2a60228b295003bca5b4940d956c70898ed2be4775d3cdd2fb62638f6ebd9d5180e54f186cf563f76d7573d39aff37578f313fd59e9801f80c599004e3f1c800409644166a187fdc26afbdbe5a6b9e1583ae4a605de4f48c03aa5d2159a8b3c9bdb2e0ed401ed84a2914a309c0641d4353d49fdcf4bd9c4fdaac6717f1cfc426b594c8bae8f0c9617a3ce13810bed6f0f8857a368faaa55436ec51e0eb02ab624853ea6c4a3d72a837dd93b486efb0d2f22b9d901dbbe65b14969d3934c39686bd8778bd29ec23bca37186d8999432c3d01a1c6fa000a6aacff211fd39d60197b080f08095dac2679258693702f2b2b8246a93e94b09207f4537387a5b9fe24441e1cd7d1b1076d7cc35c1506054126b2c991b420949da78ec8f751ccd0a19b81848a1527f04d4121790e8aed19063adc4d59970a93f9b6f9f2ea29b3ace6400617aa0280791421c5e4a419214424a4b98846ead75c63a6e31b7b4150902f3d28623853c0e60824e6695ac5450aa472887f1abb6d6ebd5eec089c18c2cfeef808417d13f4c41e9993a5d491ffde01d380b7855c12595574fa9dfad25e8400f0c9a257e442b12302fa0c5e152fe105209f8bf2552f397f33536f1e871668f49f1ec11138564997f204f76540275de226a94c9684e37cb462220a3e667c985e3ad982c1aed7f03c53ef6f8d03331bbfb3ef2f1f8240da9fc3619eacbf5f4d83961a3673804d9dd7c22933e4ec706f9a90c97ae958a27e7423f7ab48519f36e69178afc963e2f0fdacf29292f96ac9368b2ef3725b4fb928133c24f8c366ac83fceec98967dc9e802eb2fe3e4299ac54db2df17208269aafc30302e6d1d9c13fe5cac8185bb575c4ec68fff5ff11b24d9abed0f05afcb4917fc985e18b5b6e5eadfc31c35f63f52b40eebc1932e00feee9cf34547b44aff28aded96f696a036295bfbbe6556fc4b70bcbb6e0e81d2bc5b348dd6ccaf4aee7432c0b83f51af015fa997a7537e34958db07d394004b767d737a03ff846a8df1732921beec648f0d92d9479f25bc24eb01bad1ab0bf0e7fdfa13faaa7e0dc3d8c10e007247992ac6b880b0afc6e1bd019f4f64bf95a0af3b7254f9ebf64a5860a37f124c1d798e085c6028c119b034d1cbd68802419cdd9004d77ad09c016d6998558af223cacebd143a083d4ed003992ac7a40bfec9f7a0fa883be223f0192df949a1baf88ac273056a62c2afadd144068952b9620a353c19e3af6d2b8cd7b2bf1d2c4c03732ac940a674ed8903982ed2e2bc532967e8d12b3366af5100a4e6589ddab739a6fb1865d9a40d1bd58e8177a541d54c3f5c4406aa5828e7c6d57706c29d9ac6858b1ec7fe96fc287c502b1a4b7ad370bd4d671667403b645ab9a8e74c068c21ce71ac48386fbe7b72a1c206a32ef9dae43026bbcd57dbce93d0faf42afbe80a62f41661a8a9135d618ed319a497d8e931abd7b0dd600547e4ff8877fc23cbb4302ed500d5f81089021de27fa020ba95571d21f10f8e3826f556ff718283832008f8591db56d73c6382570cc2e70f

Post voting

Simple post voting buttons
View code
ec34fa0cf8b2bb7b26e5bc87203ff3bb2f4160a45a8c456113260e6521021431c0e80b912dbe879a463993556a1f87456f871d9d6aa47e701f13a264e65213d55cef0c830b5aaa1a2c6131d7bc0bc01119f2877855f6b8cff8b16153191d934c14cabffb825c9febf809208ad66e6d304dde5eb2229139107fa62faa2d5883b060f8cc959f999d85e6c1e8aa57979dec65820ca64a5ae28b1bc11e339fe619fb51de9b6b766998aafe17c1784c4583b78aad0d9890f19a8b98426682a4e3ec2a69c6b614b8dd7c5ac51d78384421ee72bc58876a266f47ed5108b19271438b3993aab0563d6e0dff6195e496bc3ae112a8a5d6c80792c6393b6b753ff752212cbc3e1b631e79699fde37561d86c38a09adae8fa509c2217fcb54fa030094aa2ba491fef04541f8e83a45f516d44ca1e83614645b7d94ed0f7b5c93a4fa3f72f9b6eb363671444190b770d2cdf564e66896f32232adeb26e8d65c690083c74974fd19295ce53d00069482b2163358ccd0dc21f6db2d63bfd343ecf4dcf75d1415a2a474447c47df6465adab5ba8ca284809403755e0a338f29ccfcb0edb26a98991e3882a4105ef98ec96832d7669b60456e4c4e8f7f587625c64e3ae84564f8e5128cf3aaa3579ca7c2d70526db1f00dbd3fdb7821a119233020ac71f7d63cf49491cb2d2d14f036e8648c6fb70d12e29073bd18a7657f067bade3ca6e9c9ecdd5bafda7fe12d2084f0e4c0a0d52daa94871b95a8f7a8ee997393de82749ad0ed0393e6a821f0a7c1d264cefdeca40198403129d76b30f1d49b7aafc129d7d976122c3f2b6d7b32b1f536bbe18522203dc38647c51ed644ceae986444ee8b63aca0a59d50b9547daf15c1c9750ed4205eff64964b83660d849c74da845c36b2eafc1b578a618122a4a9081615102ebc77823877cfbb53c6bd0ad25b9515e7a03f2826d5f394796f4b18b4b23621ac97c20c6e3358fe667b6bed904725cbd318a73caaa06a0981c1cb2a222492ff2c4646eaff3aee8756b99f9e8a5e22a50a41e427d049118f6f12f87c8b59a8e9050063d1b8118d309775d8bd59c0c761e1ce8d1138baa378c0f2e9fdcf109d1f2982a891a650b6a74a4f4e55eb90d72597d931f6f1eac9f14853415de0c6e70c82035f7374c20d8f64449ac507c5dad5b46689e6be8a730c37cb206eb8508217189d154542a69ea6c899a9c7a28cb02f0a2ea16f89852857531c8be6acfffe191974d6a5d93b358e4d06f6d59975f0588a7d78c0946e4d0a2c4aa2c2f4d358dd7ae2b70563039e2bc757db4bc7ac87585d8b116352d30341d56fa1fc0abf7fdf1c99efc1c690d6fd06ed4194f0390742be767dcb811739797b52bcaf65f501246ac1521d6385d8fdf9ed7f8363d0237275795dbaf2db921ed14d823288f88b5ec92bdb4b96c84dc8600e8d9b7bab10e3b47f1842a66b93baec7e85769819364d7abe0651f32022a9b5b4068968620cbd4b06517cf1e1c482d01eb60956ae399471151f0153fe86f888268fba98c26445b6d51243264ad230e7c65f3ae383b83686208ef7feb610bf711674bfd285770bb96b8a569ecff3f0339ff556d75e714adbcd04a883f218f9da6e6e9d69699631248e904d690569310c5781e260320b271c74af69ea06014058b2bcd30fd796ed53fa705a779616015d27df0c7bf11638acf739205d2ce18cbe2ca0c7dbabf77fb5c9dec80c24c27562dc8522b88805a03fb97cc7873624740ad467c011db2863cf3265db36c6138b03385a9718e1744619f5b5195f1d4edded5505be529e3b5cf39863a7715d54de178a7343e439db36a9123cbb4980a0f0e4febe001fddf1ba093982305e1d2483a2689c83e9a93233b6477a6613cdf3e41da68ff81caf6e4f7c7e98cfae5d80162661433217a20fc95c6516d817a127af258f2dec91e359c723a49064a4801be0307b3646ae97142b686f62708f08640f4f5a109846cf411ea9247d9418cb3711cf8593f638c93fc625ae9e36dd494477779c79706a53d7073290f148b1ee2c377bbc95175785b9ee4ff526dab2922eb81f6fc188dd3fed0b8809a5dcf69e1fe6c164001a0a27934161b07507e029aa27a14366200ca8842e60437fd7b9f214799209ad357f2d843eba802927335ea32fe4893eb6190d80e57e40d
Comment vote buttons with chevron icons
View code
efbfcf99ec548f289c5f782b715b448879d9f5894d2bed0db2d36bb6d52c3f0e5ca76b500181c549f75a43049d1fab4ec3569f4519a5b3e98493cbcdb4758e3f303954c2cd2086ecce6742696ce49bfafd1624024231ff9dd177f296a958ccf457120579045e1b878ed6ef6f9e9ac7d02d39761b187af5de0c1be7d841c8ab8a39a27b09dfd0867d84eb8c1c7f7e519818539e6f88f16348f94eb947849bff38e817d04c4ba65c2cced4538ad93dc8033ba9a6f9baef35fa5b6b0900782fdc30efc2cc656cb8650e903c117f8bf21162f89432b3579b5891f3b390b0568f06c930337511c7cc060a8987d0b3cb503c850a8b9713a1f46389869bf1e9f5631359bce745eaef0927ad5c21c11024cbcd21f91d2dc2cafc870bdaec113930be26c510e5d38b1e53350a14ac36db02a0545dc7cb5e01cb6412d91498cff2be72f462d40f59d8f9a0261bc3265a2676e5779573b34319792793b87e725009daff1cdd170faa7a30bff4d83651180aa168a1963e3974635ea2623831cf931c2c4f06086e1b361257e5c6cbfffbe305e66fb455296afd36c3ef68aac7f2aac57a7d95d98aff99f91865678e4c6ec9f3aed4c1aba576e4963ed939f2d2a10a164fdfdaee03bf3c2daefb3df5b57cd3afe8b4a64bd93109bf0259f0e2256a283160ee15c5e8aedf73c3f4b208daebd39a959bbdd65a948eb61bdc666c219030ba2c0b27befdbc2d54a38948fcd4b81ca2ace2c11d20c9b623f53d090522026a93c115b247c70251f2f21d640dcec5858c1d5db838c8d4b9ca22bb84468ee19f1fd5e15d672b12183c016a426d194756035617d3aa8dfd4b71db431a0ebfbbb6ac79e1db2a4411f6193640842da14abdd0819021a51d80bc97312fb1d6ff65b8e907ec5cb342dfd8e844de8295ab3999e3cca0ebf1ff228783f8365a989921270cd431a83b98c196f4b58f9af30883e8c28fcfbdca95f459441ccec57f02f0bd31a3ad77058cb212e2eef47183276cdfad8463a589698005d5722f264be97713998ee3c23e4d8de034b42fb761e25c2dd296e354ffd8cede546e742434bae1db2177ca8617

Comment voting

The following patterns are intended for use with comments on both Article and Post pages.

Simple comment voting buttons
View code
ae7ac39f5046e0d7226904fce843e23fa4059e395f7d0590dfe9b01d14f8aafc7347396c964760aba5361b3cdb9aaf1adc3d2b284272f0982615b00af268c4334d2388baf45644035a86f75b4aba73d469ec8d5bc31d4c862b6998c9235251f962ab62191eacdb9c92f33873d3e3367a31f9abe96ddd994e31bb0225e9548795ff4953cd94ae4411eb68ad974e9c2c43e50d8709312b07fa05f6f5ef442723b81432166a77f98dcf5f19c8f16d499a912f54129d111a95e07b2de35acfb5aafff1ea285731afb8f754f7b1b5aeb26208472d611bb097edbd8df176734a03f1f353e70222fd74760e7da557726f557ed4689c8775e7d97bbae5ad5b422aa876983f0af273fae525c54aa083a6856c7b7ba8a94b6e816e6290f9f7609bb312390f9af092d3becb0def1eaec322af6dafdfe1a6d9299f2005515e5b3260055141d222eabddd3dfb60fa3cb4799678542a3e8eb75d558e01129705e32d383460c3e6b874cb76c49ea020f4943ae4425b1c441c6a99ffbf5087a957af64c84ec7b7078057517c05ff75a6211b0fcab8a11b2ee2ebb3cdb01fe815d27139915a93bdab0b30ed22aa74f5f2839bdf22bdac7462e291b9b248bb27ee948e485d7ff96fa0410922a3b20063c3547f287847ea7fc1a6f533c1e66e4e1a944395f1b04c09f36c3f69512904a0c0fccfb7f027ba38a5107d60026074dc8d54ae5b22e74c2012a3c1709e41e83d3f8cb0c9384193587f07a24657858fb6f660da65dd3de06c3bf78dde17cf493e3bf0dbcb6eb81b8fe649562d8d817d9baa4f54370f69f852ca36094e9a070c3374ee5856907ba68058118f2775e0b4d6a32ccf5f25c8cffc21ac9de2e36bbb170abf0c572e4ba1d8c2c5d56d4b347a5dd8dc29e03378a81030643857fe072a4972d8a1dc0312332dde73260f951f3668fad4e054a808e0357d795316f5eb2ef3c5f5a1224ffa089de2d47494e7f1e8516682687eea28f488aadae3c21d19c018afb7faae90f0b9ac983d6dbc3d9d1af7de20a9cdecceea799841639852d64f44b5088d89937048d2f97c8a82a5a9d72ff09ef9da1c4e1ab36350c136ec1827c4b80d21d054537ecc27ee54eae32f9b89e4964c0fcd02adf3aa182594bb3c263a2a2b5b50a80f83ffc17fb0cd35b6c41ecfeb8847b85b4cae565062beb51dbaa5066f8bde1d1c29c192263ddb5e2f7392fc7179b53752aa8a1481935bb00bbfe6f5ec9affdc06d13d6ded50adb275980573f365242e98fb7a0dd0aa24e382bec8aa389da0ea8694a7dd33f394e0eee3c76c01f5aa73db07a6d2bfa50cb1fed88718c7d754f8f7f9e3fc63c656ff5e36b28181314323b5c2aafa851d73b442303f49991f4dccd6adac9c6eb41d44a075cc9c7d01cf49a06d181236e6247472418dd954e72107022e6b51a30c7fbc4cf533a09afd260d0a42676091b3c17d91d6a4c388c5d9ba5ebbf4b90296d2d5ef250380db1805aa23914baed8e05a77d23832285530826dab108aff4cbe999fddfe321ec1495feb18584d38c31a8748787286db1febdcfbfc9b971c882a589595c87bffce5ce641638d9e7cd111883876d4cdeb6f7ecd28d4f4a4f1775cdcf1b7774f6d6ea634f44d8df68710f13e7cf0c5351a0e949cf56790df298ab822487c7977f33cf8940d37fd917d646fd5f618af40292fdbf568c3a22a053eb3c199b5d6f7a4f2d2c9e35a3602943929b26c6389e7c79e394d12e84c297ece4f84ec4ad6bede7b65f1cb54a9718068bd524b037135c2d8f79dab5e891c63fee2c4d6ff359f67d6cccd9c8ce6759b8b3c2fdf9e9efb0292a758854c9adf347232ed844e2147eceb99726aa40eb08f11b59be1a89fc9b62972fc3f7abb36b1748a6d4ea96ce2af888e9f4c29d539ebfa1decb155ba3fd0a2980678ac89a925bd6ba27037eb501697d72cdd37fba8bd042ba8bfed8c2a553483629adf9e5c1414272f579680df0fb37c943a2ce20655
Comment vote buttons with thumbs up/down icons
View code
42e9b6e4a7ac1cedb0d3b1361e27530320bb9d64d9947b97a0a67b292a5cc7e3d4296c24ef458e8484ff457b6cc4635a9a30ab33919d391cf555ae95bb82a905601b1b070a123ef88c973db405e6f195321397c132853273be06edf88c405170e3aa907fdc13bbcddcdf6a1f29cb64ef4dc291164f8b10dd5cb78ebdf6c43b10158606c7e13d5f80149fdd709309c0ebd169f1a93aa60c75af848b15e7edaf4a926d3673ad87edc8560c29ddd45ec7632ec6ee8cc24ec30bcd2dd783f429ba9ca136bd8c3bf92f73927c44753f8da54dc194c2fafa6d2a67f5a92bcaaff4ab05d8f2ac168e2e75eb71c575efe88dd3ddd1dec885cff448c59247689be2b386688d09f9e7ade7f2fb593071f91e3f688a802666fb97fdcd5cbdbf077ad9bb4c4f0d7cb20faaff1e9b39b10dff479e8c01848b862d38cfedeeefe04de659801247ee8b9f0c2647c7b0453bbd7a954e1e2a325b73084fefb994c32f98b19386774d5f21eb492fbb53b949795bb6d70ca5e5d28cadb29570d85d501cd7e5a38c26d34df42f5f22ce42c463bd77704b4c6bd7752a2f9bb05fef42a84b7b235e62622033a86c3c33768c3bec719750dabadb60ccbe23c5a8a975843e0eccad40891e683758a67fe4c61491bc1eaa8da5052a69e87e74264f5b4033faaf2e816b048d0079f8c18d7c38b34a6a9ac1ea998cc76abcddd97e73147be7d80a71071ef7a3b8ad394a967543861b370767f0e06c73225d72ab0841382b9816685431ea1db9196b56b1bba614a6e25ea5829e51530f1e8d29423da48b60a0d45104539a65a99985d53c375d78af2afbea8771cf0f8a2fd230ccdf511b93589445245cb107a34844aef769d44686d5e5dee384487d37a0763871106cd4fc78f3915171a3ba2ba798cd646fa7da8e22606ac319492ee440dd24b4ab0128d85e2865197c552cdf2897cad9e2f71dd84e8e2e7e555e32697bbbcf77a42dc636fb52c87794eac3611f027752e9d234da260848322eea81b9b49ef297030f56f518ee0d6fef75e96966432cd6dc06f1842696d20a9583ca87f0bc8472cc779ff3e97bef81de85a4b4c074f61a3ce249835174c1c1a5a74358fd7af968470f1146e709f200d1108d3ebd65cdb3aa1ef6c771d37bd0a8f54ec1bb739d26ad5b5ac777e8bf0251e7227b9bae3f5f16b8aafe8a9bc362a59f0ea09e15cc91ab77d42debfdc0a43cc4d7db6c7d6acba0d87f52812f6775ae568748ef9313ad95982f4726118bcc3b1d1c670ce517098e215526af0f9e1490ef5edea57bd79d3643e42f1d75fe36098df0a0cd49ae8ceb3e13949af84e72df401349dfe7f40ed012c040b5b4b6c95394db0b5ef3812542e0839d45c65a20ae61fe52a98956cc2a9df27d1b6f4e9dbecd2d4c2d2e55a3162555face3614085deeaa379c5b41246197d9f81af6b3a70efb2d4870bd636cc65f5aa98e48b79fb946ea1e8b2644f88c17644914c3db9728b0627502f3b6e941e48db7f2e0df2f0e025aaf3dd650761cf9dbd23b520ca80372c5503f5fbae074b83a629e1e80b6674717d3ab1ba0f9a76d2c14e3e2cf860311201fe056de34ce657d9992f03568c7ed76cb03e44bafa0be9bdc3c840ab61fa36bb93761c18d80260b529b5b774a0fa9ccb4a44a825a7634b4303d815676be69dcc75faee9e29520bf1d2096bf3ce07e2f0852aad69a04132d3aaae33a8bd1e4cfd2d2e925327f290cbe8b86138138c5ca87dddcf8d83a599328ad1c46a73236dccba81fee31f4d8dfa06570fa3c12779a2a99a9058eecd5205310cb25099fd1160f516240ad830de4f156cf85b8df1bf7346e2b93ae703718a90e6061fbfb5c0fb3a694e72fc0cb2ba40b8ab47a6f01b6b6b804540faf9318be0d13c52531fd1b10bd1ddad68f5821517a366d3d1f1cee7407a305967af6f3980d31dedab266891d56a1c657ac1f9b919a7f6c384c0dd46075c7386ecae15a1fd6e9b0efeef794fc1ed1b5974900bf09144f2e66b554798c26238f7338b29dc424f3c2931ea4468da2c964f2e0940bc9a428bbdf2d3573edc8d98a0bb57f56e87a9fa85998b617131dc98abfccd0ee5efb37fe1414c17c061c172bfb96dfe2588cf9d8ccd983d163a080ccde4e9de4fcce51b1dfc20d41773b14b5164699ddd4eb5c9ada8825523c64cd0f32b9469808d2a08230a5898da09c48caf207cce346e921fdfb116c88e749f1bd3c0e74fc2f8bf0a25a11528dc274733be3e4282661d516cedf74e3ee66c11a9e4f22174b0b7ac77c0d47a889c6fca5bc70603855249c5a5ecf27286e40f5f85cd5d9c600ef178f3625f057989fd3b8eb3514cb010480acac45eac1760859b432ea7b8d5a459a7c21d9fc9a964ee89714b5db3b811528f640b164fe09dbbfb0e7226c0bfa0ce7b19df4c881ac5565ca0dc766229871367623349c0eb9f70691c0eec4fd2c731fef71174353ef1a117012bb1e3815b966d84ee2fe6e0d80b23dd00e164e0a5b699bf844ffa38ac96e8e82abf23e84e5cd31e23ab4eaa6c68d29a344b930bb03fdb5521eff442414e8d76777017c139bf116821af306afc527f4ff9a1405574f28bf71952d6762985455fab5bc0b5d51b03a4a4ee6728f11774f7a2900b125d272554d03c2ff8135127ed96939930579f0bf30891d47280e3fc1ef66e9b6469c3233e8c83607814d37e31c43dca3cf8d1ebc1f37ec6ae90964a52e6bce031b566872ac2d7c82eeb04b214b96879720aace6b9da9f336c3997c70180473782854f9bef10aaeab849f70a14cacad3ba37e74677918d8e1c7d229358b8cacdc34c6106841b9bf3b9e3fbbb0de2380c515d08baef8a53d561e03251b0c7a59da028aa79881d86a97966e846dbd14a103d66fd82ff8125d5e1bf99acd1ce1c8846beacd768d60791f544e93102ab3c2fef4cf7f9c7006cc0aed0eb787f344fad6a1b0763f44930572344ff00992d5401f13c1cc248a8a270b3d1388ca37e7128b2b375e13cfc8057cb46aa5fa89e6ec24b77197fece8b5275df9ddcfb31e991c44d0eb5d41c8b97c5cad355ed6509a93cad1457b82f64e46d4a71da85a6ecbdeb7268a5b6491551d63acae942237a724e1ae1b6f0ca6b35be2394fbc94f466eef95a6b7b7bfa77d784144357ba32fcdb5d71da11657d5e38cd08111c57b12898288fe3bce0da4b328c09db478f1f1a165de9b63cdafa2b2e5b22dfa372553a99751912d0996f3dc338d3fc4a5093621255e4022bd68f9b8cd8b4150b8cfcd5bd0b59009c947bb8107340e1b1859f0d7df5a4159edade7d5f78e63dbc8f1de7b083804f4a3a061807b890faf60549359a4b35e218b8fe332ec5ff1eba9558d0032b87787e6f6d966a4a9e8a339ba1854fbed6d7666789773710fb52cf23c357b00f928f4a2bdaa1b3b3a95aeaa669dbb8fb83cb94b3b0499ee1ac26862c12a469d43455cb8a8e137b979384716e3180db64c5208f4fca981c8f1157af9cd6133d577114a2642e81c0b30ede256f0ff89c5e93af19e316bb47eeb5225beb857e630ebdb5c19fb589cb99d65ddf07517837695b5f1c0751ad32fb6798e8d27d2798802df091a52a99fb927367888c775a0b89c83718a06c1b5b7579d0caeabc904dbc4fc03d2773bd727774b030e3c55bc67e4a8385006a4517b81bc5143859e7a4bc28f3dd81d2a4772d8747c854546373d8b11370938cbfd33c4ff20

Use .media to present vertical vote buttons beside the comment body.

Vertical comment vote buttons
View code
b2c0fa3cff76a8430d27ad4198a0e6c5d21460dcda2f3129cd20f5fb279d739a978fa13ea9a9dc23001c3472fab80e99264a4886d4f10fcf5c2dd5ddac78ed642c815640998f0e276bc23a9d54f6a569d4b2470b124beeceaf98882259c564ac76e40d52584535f06345262a8a50abe51bc1c104cb05e347d398ed509618bdaa0aec6ebb4d7c4092e5429750be21eca719cc086722a107a3cedd674c3e3210f45a973b7a82cb475fa47238c6115f215dc155a97e03225b555b5337469be89bd1f37891213e903c7c99da7a781a67a19f9b9b43d52c3961b06d8b30ae84bc7ec46c67f0999e75d2c4cc735b1d68cf246b3218b9214391478562bc3bffeefbd19d77a91eb2b0990577c9343f0c3474908650e72554f5df0fc214ccdfd04086ae73b00c27e2067f6b7f56a0d755bf82211e2994b1bc00159fe73ae14b05cdc0fb3f9e83d7e9ed56d056d32c750642cca1deae052694960cd6e09baf4b8005764d1e31f5375f48051e632884e3be784bd58dd53b8ab3c5b7d8394991b38a7ceb716ae298b8236f9bd80a9812fc43583b55c444fda3e2c52f06d031741fb8bf07b4e18f47ddfc4cfa2964081a7497e81ea8d9841224a014fc01eeece66b9b85d2e59eb86a04417c69be161eef669e3f80b950ec4654f3bdfdd2870eb7165f8d4cd06b7a9aea72aea935089b69e677bfa3a3cb4992f76857a53c690396d1d7b344189c1eae15759baf20607615362575faa6fe5d396ccd046e7f041e9b998bf1ac9f5666492e9cd747da18ab626cf34aa71c83b0e5043b193af168ed7c8482b9ae865310a09febab52188bc6d9c5ca5ed2979eaeb036a5b4d9d84e8c32aa1d0a8ee116754d60dd0089111f7fa2b43bd81a78030680da0b7e292127575e939346f3970eaf4b5e81dbc44b6f9a3ab4dbd7bce0323390d7c909681cebbd610527f8776d8cf7d970e1bae9d50199efd55d6236548ec06078d9b187b43f262ac0355744468de937ec1d95abb71e65d83d36cdccafc198e990ad748b6b05694f0cefef6fc0c63c957fe3b08ec4fb2d8f8515454de5fc73a9f40d883110d1bbf77680902dc28676f730f6f6b4de726c92235d4e2b7499a9b9ba2133828bc5972210b172928d596f2df12f1c472aa2123cec806e927e2ada885ffd7e868907279e07cb0c76f88ab53b41c8d7bb91b7bbe1c26d9eebcd85d3a8f664e4ab8573813c41eb84866bda3313d75612bbb1c5d82800baa96e4756c099d00da88e8c05e092bb2eb93407c641f674e78431016cffabc9f26e26b6ae24d3e0064e9da5f940702b9961cd5ea2bfc8834aadf333f35f054c9bf8c6628a781fdc1c86578569682d145a27dc95c1973b5d106f517ad80b8e61c5a9bb26f38cf1c607f02597047861fa22889fc0e38ae34bf27a6a677df5d7ca60b9cee10b8f33dd18fe10b3468f3e5733833c917d53d901ed3a11225572ed62f6cbaa00e8905f736701bd1b32da0d4a2e3ab7b0ed54bdd2fc3c14ad1265e94bcce46003ea3d1348b5e5a37f55e80a86d9a9135d8c175cf1f8052c065dae382aa6f9eccbd42caa6adda763f98e098e8a664200e310d11abb339acde062848d2d4b7fa105d4955093f061db4ef4fde22c33a4b977f2754fd9ceff06b0afc5a016f93ba1c633bb1d422d0d6d77e7c7c8a891170a863009110abcb5daa9cb5f8a89a7f55e31a4bfbcd2f12a98df1db845fa0e76bed7d13519d7145a86dd6ea40244a3762d1d3279c3fde20cec43fb6370b9a13d95b2ecc19669bd6bbba0e28dd6fc198f55a53fdbae302cd8a5d0fc82036f37fed4e2cf26cf2500947a4d6a9706ea9f17b6461d91644eba7298da146a077df8c3b6650d77e82bc427871b3f6f44b22bc7dbd23082d0aa56595ed36b005e7a7b832afab61d3a0df2c1e10963754bbafbe24b214b84fd9b71197fd0e008eea9486c86f46644eacedc420dd347550ddaf8c234bbb333a6a2ef4bd8b2d2984c2f03617cd3a6d8dda8644b5d3dbb1ee608ba10b5002011ab9081d1d6093d15285823bdfe8b271cae3167e819130bc3f021625d2f271d

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}}

Related patterns