Voting buttons

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

Article voting

Outline buttons in a group
View code
b5fc9dbfe204f8b615c7bd1fe1e1a4e386750b93490966fe76f8f5576472adaa9ca25a7dfd93334c4775c90fbb674cbd820202a1c34f687aea7f6d0b49285d1b96ee0b0145b12f966dfdf0e4a25e9bd8660f5d3f4a5d321baacf6e5f4a8ddc2b7c9edad6e5eb811e9e76e03e96f8b3d0827bb7ec713a5d9b1ae14d99d98e1c128b4fd800452f2c3c52c3236ae31b1a39b9fd0a942f66317381fafc96df20cdf5fee145002cd25eeebf726d384b15850fedda29c15a0bc7dadb33ca154ef4f4295913f647f79070f1a06f3c8a12ca747f417fec069b7c69b953c4001a2fdf4628248ecb313119a90f8df61f0c682b2f532e2ce53220edd1855f4295eff97ab9b8673a4bb19051ecb3fef050f8c8f218f8b0a874ffe72e304285b08c020b8b1aa88b9e9a1befc0091f0bbfe44dcdb683e0a2642a74cac7ae096ac63d239cae9f679c67f084fbe4fa8f7e7e45bfde94f34a047b4a1b4c69fa50e930b528d4f8c8c49a5b91ad322bf73459949b6def941ca6f8feb104b23dcd773ecb11d2d1498d942c39e38c4e23aa873314a5e8e4e0cce5987c670ef720b7111e715ffcb35968cd70f4a1b76afb2572cccd679803a77b7a6819cb68216f96fbecff6a6cc8afa68c2f1583284af5dc531879decc57c6da01a4c988908e84a5657ad9535ce57807df6d2e4ee45774366d83918511b6d19cf583d45d2e0049e2aea1edc34ccf4b1a7e1e8c7dcea8e2c640136bdb1b585a83b83b15d7ce4c4e10a208e9eb4395bfc45be6a2315f3462e559d00015fddef66bcbd44a2ba639eb21d31de490207707b58ff8c67cf69ad39da8342c8690530d9912f2a841c39e57652a57c9288043f9b230b153187036d116a516bb10ee779046c652634c2bd7a78505c23eeba88c2c68eeff3869228be1727117f08190f9e42270e01d8d0cc4e2c941a7d1ade50e516cd571fc75d033d693a0e8ece047b0f6092d7a1aa4b02611b597c19ec8544bc220e108934d4fc4512d9ed1d8b86b1fe7adcab2bd442baea995636fff5bb643a1545568c59d3ff9807aac93f479ee63f3a67252566045b906a72955eea877f186a8ce3d7a1f462e19f30a36f5d1658b5853889305b77d9dd375096bda17a01a9cbf388ac47fdae6e371d88dfb4109c3d1964b256e5299cd7f200114b14b3ee793dbb76d771a139aa520a5e976fe1b36942985c8651c12fcbdeb61acbde1c991da533e8abb40ffbf00802751996f5cdc65e773291acd440ad2763bf3e7c7c4837ab9cb9afcf9c19ace72b9a26159ff30fd77715516340e1bb9105aec9295861945a8863bad2fc9a5553748214bc538042c8aa8bc520a43356c1a28d20d2907be69b62c22cc1796f1c9631ca287ea34922cebfdd2bf037b64066568d52e1ae2c958bb0e
0768e52904cf668c22d4efaafc14e2e32605582ff555f6225ef1d5562eb93f3db115ddaeac4838b8a80efad063ac4274ffa64de8997f23882e5a1122a53c82e525728c04531a92feeda7f10ca12d1d7cd1da86720498f5e2cd2b67a94cfc23fc20abdadea2ecebb3e2e82f7db633bf150a606c69bebea9334f7dd56c8dabb65cba727cc7ea77e89d4adbdf10d702f5092924ed2cad90f1257faa63c0fa41eb2a4d332816d200f176b21891251c416941f3d5da3b1a6043551f02a83597bfa6adcf11bebec584100d85c2dee0502fc5dca13a845960a63e0739d69cafb7bdd3b0e2e701429a9f4b5cf5839822c4910c8298c88c779643b63874bdc859f6faeb2fbc0c37f1ee326b3b224f705a2a4cc3f8cd740541c4540a20665fd819df89e91a7984c6a6dbae74c47ebdcb13b68168d37b322a0f8cd339102bd08d714e7b3ffbdfc3a9b94382dc5b2b87dca53d08415620bc8904b8a4b1617dbd4c7aed93d220b23adbe2b026d920e3019f937076814ba1e0a983654a6e42c41a4e9136abdf16febb5bbcb2b198ad05f0336e4e4b41cb61b3ebd6cf396aea67827d7b6f37ab4c4a06efac9635c84558a6f6bb4ce4e2be0ba31d34beada7cd6e4f75c3588ed0e7143924eaef3db5551d02b2cc1a11bce74671d960638d6d2a4bbc6e0f861ac415a487879ea42fe83529a959396288395b24f5aaedc8fd3fc8aa69c8a400c5b2c1261e4d48f07ed465d71ee9e0a8db9dc1c8ff8a0a4cc09d292e91665fc34c7ca887f6f358d37fc9c751651cf84fd7ae53eff56d6ccb081601713ef75597126376c933c153ac5c73bdb8f70daae8a31aa78989e9e5a400ca55be03c2c48549b6db5c19bbd4bd6139b0b6eef02edb4c9c1f8e5bf45ae29e67cbb5ce24668fce79e42aa958dc0b66902382cd27fea50cebb35f88d5dc05fd290cf4d9163ac52f7c01f9a389d9c17536cc5e10fc3e4f31a0bb85771e9506c1f5687a5e2903a0b11b2cd65f4ac081431effa621686305f86288ebbde5edf7b1a9b57044070e1a48c11db5fd99ef266c30051bb10d1a18cb397a6dedcee660b646c2b50768e272ac1f1f333f67d0c985a76410423ba908121d0891158b19a1b2b528e64d502995ab8626478d8d40cafa6109ad45b50c05ad268df5974415b6d8b076649b05761fc7e01231409e3098a1f38919b7a296615a0b9e4ceb8769451e1006bd0d387e3e19485ba20222c95b934c551dfd32bb69638abd757ebecf0e56102ad63aa5b23a3a3a55748413048d2daddf211923bcd05a374ca8efa56c560684f0a70505aa475a788e0050aea1787f50173ff89c65d8108f0b38537211e05c7c5df71b35e62843b62003ef26ce48bc8ba790bb9417232df739884d0c1a5364ade37d0e95b096262ba5
Outline buttons beside the title
View code
274c8251a0dbdf8e40f2973fed752ea6c140174bf595376a397dfee9a81f39ff4e97f9f944db6da034b924b9bf99c278b9859f5303f12da41d39d3c3fc887e3a412f5950988c478afd67479521ab9ebcd6176431338eed0b4b95176b6f82cc4de004bcd06812080fb896816bec968e5c731424d4bc4e7c058a893084f7fca90b572d641e6a3027d1913ff7677ad546ad84a553e010a60cbcefc416964b5ab1520d4a88bea7657b35d022ea0b06dfa6bfbf6946077b2ee6612d014183b5bd1ca17d1ee6d2ebd334998fcfb7592231824549ad99912bf5aeaaa76ecf4a198e199e3a8da93b24ffafbbfcedadeeb97463e21fa1ef649f8db052fba1914bf5c3411d794dc5df430cd2ac69d59f179fcfd23910f3acbdfcd79401d7da53604b24ebefb0b66e33e6c122e5eaae2615b1781cbd29b760225983fbfe0101fead72671305dd4d79bfc5ba11fc8f9004ff4d816f40e22d3e72b62fff57d8c8f8d124352fbe2377c2f5fef428c1b2f4dd8da1b467064a088a6172ce488494baf57f9e87d9262468d5eb084a23e06765cec99b25a99546c53afa0ab696e2559405cdaab8c87422ab5c4abada05156426f573ece85150c5f6f6203f105137d51766d1694ecae4db7a36206b0094ba0311d7a511626bdc0d4aa06c29fdbe5f0db4acc9a157dec2525aa8f546e4d1e045307a88b5453221b627795bb6856855ad6b1f5124fd74cf33490a9afa68b6cdda3568fc17241942e44d93fee7f7f9405f2e497ecd976d0c9bd73ef3ad0b04cbc9f48a4fc8467a9da64e5cca88ee87a5ec24efde3d6b16b69a059bb90701f27ea0aba8fa99f030acae32802431b7b84ae80a44eb2f7e2f53c7a28932f5c492d9365213288b93880cf48e1e6b0d619f9de8957b4e6b5c370d2e2331db6f050d4f6ca72d21a5770a6bf4f70e23bf959cd3465d63b37d4cebd3c4de8992a1b6c1a64379d75a76becc9e968bed5de8c010e8299a3bdd7e1a9e03a27d0cc3a81002aae58c7633122ac22bb19541f5433abfe82c33984885a05620b23b9907e155e3ce8090f229cdfd4567fdb9286ef9a16ed341318b8080fc1b664838e3428d834c1aa727f020efc59e0fdb935ecac42585719e682838d8efb48cbb97a605244f2a69945550e555a34d7eb87b79a425a21d6bede75ce6a6182b1c70157f89980b2ca152c336e5d952db195ee7627db273f4242580faed425c4c3758d9f82175553051b6a6a8a4a2f1710a8c0c40ce7f4605f688d24a061829af4cea0dd5d8e4d8c5396143fdeec33ae582fa96654eba28c8ea86fd23d9f25f617fb50fb6c64eab6c37e3f95f80f0def55a44c663fccc4d0b8d4358474b30f515ebb8b834acbfded17643339eea9181745c9a8252b1a33d25d4e7dfb344d7c45ddd38846b25174a1314cbe03244315174f1
Buttons within a card
View code
5f3ecf4d6f996106d61882f88ed45bf365fadb8eacae619e794993ffb18e7430ffe55ca92526f118e220949ecbb8a4b9a5549def717396ae1a871773afb8763abfab595322d8a51535a2820f79ed89aa309c41740cb5aca504a1c68ddf7eefaf8637f52f5abc624818a3c222790a4313e9a0805426e2e01fd4d8c28a3a201a13bba59f4b76ecd7697aa8ad804a2c0d1f95ec96ce53e4cfde87e5b0b615f41a007312eb5f88190c3c0ae98c96cbb3cf61bf9f75ae0c0dd1e87f05ce540554c3fb1a96ffe51969f1e3a0a1d3b09e8d07c808390334c6559f55e18c755090ef7ba149985961c758e8669ab17e6879e0e1a481eec09e699250f482b696b90cc941a3ccfd19e64b4fa23f8004fd313fe500af06ceffcc4532d8ff9d79cd48520e2162bb6f1ab6e5e0ef65874d45e84c62b3d4dace2f73a4db2541fa7d4a40342ac4bf19724c937c066673c2b36bbdea9291f8b30526970566f7c1f33c986624baaef5a6b4e488f708b4369ef0a778586f2eb691d1c80e0378d550ba939c200103e222adf0572e6b4202cf51b99936f68477d5c19a5bb4c341ee250d2602a14523ab95e0a50d4c2cea22a5d49690b86bba17ff06a028b8f49c6dddc5f2d82dcd799a28b9e964f3b9eec2f42805c436d5f3e087436ffa9806d5df3840997cb8b5473a303540ebb8b9bf9983d7088f380447901d2a7f42328759d928fd017957c33698433d51fb0d14357257eebb25e732d0e6eb3d10606b54e722b2d11ffd74416f72db29b6b0aadff3a0d613018dd9ed87f954ddb47fc2b9a5846c5db660477e60ac4de25b2a53958cfca52f111297f100f29b3c71767a480e100d8acd818c922dc65fd20502a3eca5d1e03347774eeb8c58815917ab390bada02101f427af8bc16ddb0fcfb7b4d081c333692f2a57d1569a9377c9655d3494cddcfe6f4572846ec62bd225474375096891b1c2899d7f26195c2f93bebe702473aec52d0a18c393ceb0675baa6561c1aea9c5fdb954027af86749f50cc1a1706c0f951da1bcc4deafb153043dc1dbbc61f652c529b70eb63a07d7fcbc7cdcd1bae31d4bc0d9c448c06fb79f41cc486faa6c8dc2fb58e2ecb2f883cf897aa95eb18cb5eb11db60296f74423f7735ad8e8bcaccd2e83a36be7de6b4b73442457f83b7487ea0e95e2a35036e18e9a8d74fc743f62405cd7d6ce9603e17e193e7610393fa504c269e49d9253db811940adfa8aab046bb581eb446e74652e0ce3284afe079fe02bf6f2de061c172a93a960bfd06a2b510be3103f882ece8f432139a274066fe71fd96a6050e9c0f3d610274105231e8b6c2383ff7b3c2cb87e1c07c959dcdb4637c537d981d107352478ab3b8e53cc0e587f0856e177f6144fcb31fab3a2261da23b90f75d09a78987932d0dac3456e69517108f8c2f1c1635b8bb91df23fd7ebe9bd894ad4be33cbcc8cacaaf565edd74e9cf5e8d170c42576c6b9c40475c70e4592b8ea0bda54f2a2c32abf4fe843dc343624858649d542da9f6754faac2edc9b58d8712ad4ec80df858ef7e3198596b0de9c3c390fc91e32bc3669e9963ef935ff63bae8e5224e5c105f97c68e88821cac2583dbc0d368f209bad996bc4848bbdd6eea651beed1c6dfc5d566ad24d6eb51f5c5ee6738a633921db438744c9d3f66768b3a093145cb4f44478304874011ded04f52e3fc4233a05cffaa27642115487f567e28a1002e24ae8edd10b9cf3a5c94b8ba33f544c795d834d0d098a121d711412494de9f7d0c0bd377d018b27062ad0b202bacfd414e6d8e7d2ee54b05360d7687f32289b4e11b4edff3f1bf9e3fa8f8c8726c72befc33827df6b835a53b17ac8972e206dfbf97865a3a103dd1461468d314f22935dc0f56a1d89335fae329eff782b0cf52798380c726a784053273e951372b4d49bd23fbe91b57d51c4b924f3c62dbb2fc84d9f9830dec47d4b305c7230f4ce783b4d08b9d09c5bb069fa6a006219fdb6f8a3bd93342467ac1f38ae03cbe5251ef9194d3496149b5a35279d52b09ed84868f5ed345353678563ed0417b8cc1780ab4137837f7d7b58ad8379a667e6926fa7b950fa5e2445df95f948345187b1ba1795e63cfda8135b17f95a5f67300ee46a826f6db70d783a7e68d6a141f7b15ad55459943c16b942eb88117d0036f94185956a6d76897710ce8ee56e1f4eaff993bee7787b8b551f124039122396f1e5f7dbc5177c7cf96a95a78d2f9c139e0089c4a981b1a78d1d27675741b2eca6a03c5b89314563b9194c9e9b5fa765a555d370dd0ca7052e9f1f25027fe763b1f0b949fe3e96522d5a074d8dfc2892ba5e46e26e0722891161936f7dcba889f652a5ca4828fbe11323e4c71326f8bab38e7884b9f40045a513c0b8ed7a23a30b4ad6ed9e541b8b6cafcf929fee7ac29673043c3ea23e8bc1782450da133244146d53eefdfb83555e240f62b006bdc823e75b9596e0ff0e720a9ae646ccc

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
38ae48252507fa1551f421ad1977f73035bd50c5431f079fabd19d5cacd8b646f7a146e228e059c71c152c298cd71b443516bba883d4e8dd41029bdb81914b349ed6ec201d5a96ce99938a3b35c5ce8e1898abe421026b8e160fcacf48f1843969110cdd56d5564c9a486a5fbe6cbbc56f1815bd02627349295acbbf3b62a8acb2a3b5195e84d409bcda7322f4f53a3a84f52edad32911f1efff071059830259c6be090f73ccb16ce8d0415db82cf89d825231fae7739d493167f3fe5e5f4ba56477c27eabebf4c44e3a2bcf9671b0473990c3ab8f0caa6478e7f39f033165e5b162a6e66e1627ae605c8e4370eca530cc8a8fa9b4fabb9b46262ea059c546eb3652027f934c01d8a4bac08492846631c4c7fc376c2e44843d7a4b80ac55375890cfa7c54dedc80e02e34e3a2c68443723b8d4e70f8f2894fb1f501ca96daae289a9046736ad7a33411622fe01dedaed805dec2cdc0a03f26c0c8a29ecd297b288adecd946ce16c5f6d9993031c00773a1155bae8df8b2500e554019e739b7deda49af4661deeab3d8312384f0f2a2d73b69ceae75a5cd428ed43a568efde9c6ae02fd84f33dfadd75369757eed6f38009e95d8ab8363300ceb2a74e2743555e5ecb01b6352a742e342e4e0be5a3451a914f8e40ac141c067276dba9ed411233a06f56f88ce110ee5abe024c4159f1d7ce1e6790cb20607f6ea54074868d230964cd852f52ebda5ebe3b444e9891785f5eca05006252bd1dec095783e4e31ca8f93ad86f6e9a26eba0138e8551faeab5e555c5d9f102c35d21858a952b004d5e3b4e94fcf518950a136c6d5a53c1061a14737da7ca394374e4f18f4f36437f00dcb9ce260eab7460e5a919c479efe0af815440c02fae5434d389012f1d81bcb56dcfdef2fb3b646a1d6de047e4e673720b35def18fb3ebdb3a0d41e02ca88a28a0e80952ff43abd158d6d14b6035381ccc80675f8cf291e7b399a532c43366e69c6340e13de9e1568523683fb93b34e307d5e036016f1a43a179bbc1a2248ce953235ed7ce391517b5496b908e9a5131af0c4a72691c1740cb77e3c30ddd0370b2afcb9fd1bc9affdbe12e925ca761af8a09681949a4a7760b2fe187c102a3dc860abb319f9318275d9c41b9d503556bd1c5c735afe1370ac9268de1d6078dddf94c61ae65dbb3cd493a5659f1c139d8faa327008ec5365966b3cff6cd2c7547c9dcee4fc11cda8f03cd935056fe888c9b1cd00b77de386c75b341d148e311a89ebefa35a7b5c8a0ae83d420d3bb516b11ca13da85e062c95b80beb90064cc7d07fbf9835b4c84853399725adaac67a0be9be37fcda7d8a07cb08ae44b159c2285964ecc115f2043ff026669d1749c349098f7bb2746ad57f1909e5cb307eecf62468859d2f3769df36c94fc73da14489be862dc5b4d85ab2398e3cfa3a73b60fa4c86295e3a8706f0453a1307eeabc20a937f2de5d34cac6fedc02fce576dc2363706d04167144eb2ed860a17901da0c10d8bff16b8fa547ac70d008241570dd7ce42275b70e27d3dea11f6de612c61eb9605a329a92d47a224ebcc460e9941826f1ae5c36ce66021c6a531940d07c8bf0d8c58a1097e37442d392ae4fc75c43c8bc71ba3db8dea1eb8903213666dceece0041d34e58d2b9f0403ada90c714e30012584fe30481e452351617f5f0ae1bf6f3778b5a3545e70cfa0f260c02aa109bfe5a38e98145942b1e1ce3a1ca5881b074e6348aa2334d9ed8ffe499b0e4311c8706719c67db4a74a6c9b581919ff504e5aa4d0686ad7256303dc36c300de60ed7237b4abac4ffc90da64620ead7e67c6558244331bd11d0bfc6761fdb13a59cebd296d69333a88568f30902b88cc243fe594e1c68d40d8db39bd74c12880366bd2fd7ef78212b39be864de89a34863fd8f857e7ef59e72144d5b5f61e1cfbe28fbc31b25431c2a8a6e7ef5dacdb1e8f7c2224b5ff72a100d7e07dfd5dc9355c4f7a369f47138954c680fc46c7c867b2969719b18a336976bcd701796bd9562ff5afe28fce5cc3f50f6ec763ba82bbddce225e0f2be22a85ab11d72cbe312ab52f184f73e49855cec416cea228aa25b3c0dea4d655bba6b52c2dd6cf4fdb1d892c13c88538acb27556aef683c0c1af898d2843628112bd896bce9bdbb85066e0705d334f764b41aaa89fe23548d91f151ac6a9c187e645fb7365ba03d7eb3c507e53dfc82edefe0c8267c376b88e62a1d000bc16e57c388873dd430ee614c4a01991c133c0784732f0fa71d223060b68f59c6455cfd7f6ddc43adb0e9029fe01d6a3c16906d0bcd87ccbede872df51c90c6153ed85255418584c356ec44065824f2b0ceee541392f1e1596084e219ae1c36ae83db039e4af5c27d16f488ad0605632da62e1109fb85b2199c84728d0e0eacad6e21affe5924d4eb8ba93d0056d07a9b77721a7654d041fdc04353356ec2e00f53994576dacb9f3b9245072a4cebf21d6597ad0136353321c2209c580dcbac4f80fb89be2be25a55e70f4264707f1e280cc67a81b5c45bf5f8ccb22a14ce8f2edcdecc362fb0d07097b8a1127c5ac01bf1d5398d0adda03de9401113b07f884f31f803898e164207bad0c9516029bd8acef22e128031484fc97d9dadd5c707fd9d3c9e4ecd76d1789f095f9afc70cad45ad9942657dcb36fd8cb378db8d725ef4c19beee9660045ae24faf136d03aa8c7501b1b0e4000a254efa2a000b7e5bdf2c0c8a1811eb8088acdb1728ef9da58260f69c3fdde420791ff0f143c681ad439c54974db4cc176d4e23f30f57e4f956a83e67f4c2ce4fc4ef0d4f541a6694adf90d1b30f661d4f33e2d0ab97e2fd9e44283ccc7f03b1a863b10618ea90a7685fb42481957e78ee50802399c622e8d74668f69a4c57df71d54f9bbece440d3fe82428c0a7ef4e1fc6f388ecbc00350249153532390417b7134e74c7c0b5abba0cd0520beb80b740c090e7256c89b28a3e0f8937a11fcd7b5bb38123ab0400e75959179dfcacc9ddd0cd602828d445d1a84bb8bf047e4e468ded91d0ab12e5722d51767ff929d0d527319bdd8e5dd0fce1e3148214cb2d63bb94fa0ae988d4302712509f15eb937becca6e0fb3b4e550e43ef3badcd6922cfae6534b9c8ce1cde431cd7ac1e6b91e4f4f33da121c41adb30d8aa8f9d1500464322d33f51b4087055b8f67986c877a6d28fef5745c95eccb184d31e0dc6905cc35cb48e4d8618d6950f7464643edfd3633454c4bafdaf198c348978791678cc9c8ff78e3f425a3dc07ee6df213867340aa0601d0c8370676a8c94dd9a7866def34ac3a7dfd214e3b27e89c4294b9dbf15138f00d21a1f46fb531ed7730bfa1464988b803e9a7430203cd2bc381db9a63c62e538ef82fa15744f1aab81dd7839814fc47cd873b63431b861ab26ee0d4cf1a4411d9f6c677d7329a046246c8014441a66e14d14112e4dc50cfc45ac75ddcb69a34b9406e129220c25da60593f0016d1689f6cae085b440bf71e5ad1e930085d9f21ca1b391be7ff0473ffaa5bd4bb275cc094596f28b74fd3974741c7b7452e06cd8f4c0fb7a1f26e52460293a86693dc452ecb65a8adf610ca02d936e2c76209b32cbaad00e06bd33ed113bd7b2386c8e3b56d6c940b2909fb18b18c9a05689e70dd1f92ce6d95af4d2875fde384b49b6cf26ddc5b849d479bc1c8be8ea5f2d826910287bc3d90c961ccd3b2646c91eb7456934d0c91643648334a9e343ad6ec0bb5c90b7d684d1fd519611bfcd8e1b57b6ed2faa87906def968027f98f35b32d09e897fe1a46f6f024ce02705f746587ca01fe2c618931b3052e3be65b51f9a0374c2921739d6dda32326e922f041950ae7046d88ebe26eae681a92ae750736421ec50fb4c133196715063b3fe94710c337a08bcb87898c3a388306595d0331fa82a9085726ec495c26db0b6fc4a3e185c0aa9376ce23df5aa0233e8974ac68b706ddf90f1e16ca85fecd2419c966500e2257906b296ed25bce63ecdf8ed4de37c755b91b7d3fd651a1a530a2856b6b8a6c806b90ef131d02daf1efc2e0d222542015229d0cbdfa72d743de02523923d1745562965d178c4522e78a31a4d455168950de77bda5867f1383c1a68325f721ba4162d82cec74befec1242d088e383078669d7cdb51a00e7c59eb60187009fc506697ff348a85459697e67722f96ebd10558dbb04369e3ad10b92682c6714a663e21014d4640d6f086c630853a40064bf2229ebf0363f4b04425ce150e78efb1eb1458645dde4681c79633bf3f11d8d0f521a192c45899016e6742c7cb0a35b
Outline buttons with colored icons
View code
2188c0dd49f577df94715d2105061d1adc8ea9b8b8c7ed407b74cf0d04f001ee998ae8609624919c676db93190b521af51732160e0efe9e641de08bf0172dbe6f525f811770547104d7eb9b1e91e5f13d6d9be091eda5f575d89c220037e736645ee989f0e36b4e96be5fcc07b450b48282c9fdf563f983b7e43490420a1ca4a1f93f423c5a10ad9c005df18fa44ed85bd6afc0626c23582f36a84d63da1d83518d706f7c6a347167531d7dbbc0e900266fca4c22115c694b5f8f588dd9a875a0614878de52241abe89a9ee2653525e6049ee614c46cb064f352d13e0a2ef07d458712266d7178b12ffa355a11bfa25aa806bee62123a04e4c192abee7350d9f56a4a5bf10247c5d876526decaadfceaa92a94f77bea9f1b930d6e932411dd9857789660e7437dbb05df8eb99df1dc7440b68ebc58d4054910d7a2c10a8bf9b9487071f76402bdaabc3b078126bbf9c163e91236ad94999f7a07f8297fde99b29c5a0c5901ef84ca6bb3049c2bfce30ade4ac1156437aeeea1679a07ebf28cc28262237ef9429a8064d1dcf0e0c03ac3679df2e5d7753ca08f63ef92f9073ccd4e1e4a671f1cd40fc44523530ff8d10469b4763a2b0967d6134e72ced46acd423514233ae56124259882ab35576b7e3896e82b28c0514e318f382158f11bb6b39780641f887c008b346f2632e4a696d5e07b9a19795bbc261f5f7a74f1f4673e49f49400942885dc58057a130ad2fb8ab09f2dca57ad6ed31fdc3fc5b15ebdece6367dc4998deaea9329120530d5d42925297d17032f79fce068189409fe9ebe73d3abb82599fa9607b060de5666032e979651f11fc371e7d7c3366757e4a3a88ebb3c89381293973c8d00236154bdd6bcca96e05b461a363b40fe6c0a4c5ca0caf880eadf86a6735b4fd935e2a83eac89a387291475c561f37917ed914e6bf7b44b1769102a3b332f5b30835cce072fca131f46185327d3267b57c6ac536bd65efc89ef8d3e7bb7921497f1c0edd1d1e144032c5d37f6ca43f676c5992b82c34a4ff3c6b13aec61307cb06045c813aecefa7237491973d830f602573d06bbf9d6dfd6e2e122d0ab199bf47562107590a80bc1d6ee1703750bc4b620b90a9e30b5fc54879e819b4128918d3f22ca7e2f341c96c51c524051b70fa40f2467b52501f7252a30e4043052be3ba886a52e30c74dcb4695ea10335849b7b7006234e23a339153c026072056870a72186964a3a9973a286a4596479ed39c2b3ecd70203cd55cfe270f0f9f33f435ca111c59fcb0f72b47d63576d445775063d4b8344d11bf8d36f8955ab8b90878c69f120155724dfcc3e85cbdd7e3bd2bbd37b990b842b9787d3bf430f8dab48d0a93a88880aab185049d6b58428b20a1a57d4df11a6ef4a442c46ffc44e543fe14fbf53a5591d61ab4de5a047c0e26a95f3c093e933bfafc9826866f6a99c1a4b7b885297ba9d611ff44498160c802d25c63258c5f26a43e753e42a8dc9bb29546b6a89f253cd94b1bd5f498bdc3519d0ce07a43fb20fab5e9c70b424bbbad9a418609e9cb77c2eaa090d6108e3eb06dbd1ead85272c1aaf80d0c3d82648907fa9ad61b7c71b13396e19fe38d4b2036cc902ca69f34863888df94291e1eb01b091ac1b876ed499ea8020137ca6f80bad23322017926bb46bcef9c88f930f4dd7504ba2a74b2d6290cd4fa1c2faba3c20d988bbc5f7ae298ebf0e811101f8d9671efa72de4a2892ecbef301a852406b00ef7c81e46b6a0b6eb09c068e207a7a4f59d026a6fe5cdba267c40365025047a93b5d613b65898c2192c7c18f0e855a1b202dfa3961c93544d597532032134d85ac7a9f732f9d434e0d038bf1375c61819c9bb935f70313543fee2f61bf28193a661de3a5afed33a02e9a6db9bb4bc480d2f3e1c32f688422c82a9576373e0cad91d8cdbcb5dbd47b63f6a60aacdb9d2d63006c8768159a4ca12d25b06d39bc292e335f6077d75fb88d1af54d73f7e38b67a59a0d8092e9d054e989abe7f1b909aa16df9a4c915f8b928689a3372c2f0ee6170649633a271153841562125c676f5bd9761c868a244ef4b5cb56c65b441a1d5d995558236ca7c1bfd0b0b64bed092304bceabc4a38ba5442c8a3d74c7772aeff4fed2a8c82e5b9f48bf747fad50d53ec93b7b4850eb1fb97828a38fe395c7ec1424c88ae2f84b201e7b237137a5ee4ff3b1682f1f391092bf47e76225bb1de2454441e85bdaf75fc7293685056be5e47a3d831795cfbc46c290d1faabb81c79670e80cbc14d06c4dd2abc6adbc6e1e04cd97edd08a922733540e93cbba5bda5fd315542851bf6a65840ac88fb9b7f7294bb37d9ffc37092414ecd695c08d19dd50c8e1984cb63d4a3a9e05b61ab7726fc9d1b2e5496f13a49717f12deea22e45f4fe602c5544b644da4458c2440545b02fc8efde74a1c09f941b12df529937ea4a1aade14b223a8014a55d61206ff8c8e902297bd4d54cba6dd18e1e29f902ea69dad912ca10a012a957d308767dea31c2fea7c8573a1d1ea0e951c78fa3827fa6e5ea4a12c59b5b0d065d941702ab234c804f33834209cc7911fb462fa907aca25c6c480c8ba9c0be83afbb0306c8b4a44bda4667dd6c2addc0764aed69f856af23e7f8fdfef1d60746679a6802b5c8be63df577f23532a86d98c33003a9fb1c0d86b
Article buttons with emojis
View code
ebfe46fb4c67e35cdf077f33497f41d644061979e077a69aa3d02bd3d673722d91af8e5aabfdb8ea948db7273134ecbd6c1bdb553c76270d72184fe7efb293f2ea79616839408b6fa3940f67b4b6a0ee4b1da04c813851dd3f7a4508f6ae4cf8e3b2615c8fa05d3135ffe59c6bd5fdb86cf0b9e3b97ff34f2f63b8b5a9a0d8cdfa79d4b23305d27672744d6b1350dc2b116d8079780ba75045a37d1307be7b3ceafff2381360d07ead3f3aa77f515aa8fff77337d58efd229d86aaaf341002ba7e6ce8be1f5bb1681704403a92da45c5b8e254712243cfc5d2dd9512952757f9330ebdd50d9b7ed89d9f84fb42dd7d5c10a70f586b7a1c86b28a266988dc9cd86548484f416db166d0bc0aa107b7a9802ae19f1000204f7bec56f584fc2279a9595e089c003b48ed1fff29a42173e7907e622445a8ca199b4f21e6f846ba978fdf940ce3d1b55432bf45279e3e43ca0dc822a2cf7bdadc3a39547fed6ccad72d17155c03b6dcbf211d422cc76102f1525aa2f13781197ae5e84f85e1de81636875e267347e14fee6b433bb5efcde564873195c836a9327285a1798df9503bdd3ad51ffd538524210c4f090498563a86d0cd5eb40ae8b1870e3f3f9b1fe88e60306000c0d757a2197dcab9abf601a0ef40c70ce7fb8cc2b80e5595a2502e5c518877ac92c1701a50bf787e10a28f14912b0c4475487d51b1f562d8c32a07409c811cb33622f21be79859675cdd5713595a6c25f7db8fac4658c21498d2d5260cd945fdcd5bc4d5b3fed036de2fdf50e849d47da2f266a9757a4f30981d52be13bb5c73017110bf4522b82817f22b5b086d360dad37e729cf545a322cf3a4b4a8108ebfad2572b357f30c296df4eabc1f7baea833319c9a424c00a2b96011f0c7ae6a1892bbb8edb46f652ba80bffc27b8ff7bc28dcc544957c3f00dfa8a45993791d58025291e6bd33888249baf6dfe433ffa6edb8991e2d112129249d9d07b19eb694677187e5a20caf19bacc335fde3cc44fae2b75cc2669da009f48f0d447405a4950f6bc9a5450747b535af0f6d04060c50c147ab490fcb912472769fdc9e63d94dc7c7734f93483cc914dad781eed594bb3577b8f3a1dd3105d03890d4f4079dfa95b67fca53edfdf957de34d6622c53134f6115c5d0b51b4e49d83e0d735bab3ae0835b8cb3f922731c7a45063e91b91f6c09536c3dc2ba85a828611e990ad7ea006d230bfe008bc2359ca87eb940a5d581b002cf86c774a59fffe88f40b72cab0187f8bd8e709251a899226002c0eb945180c8724e0869b90e1e86a15322f0d5b549e4af9ed7531764d1a0fd31fac4c885dd0baf3b13b8691c8759ce79c21ed0de32ece6d4a3c07a3260a3e7b61b7c3a43a609c46eabac5daf403a4c5a327738fe8ab2ab8a93d947f52d607b18dab2fd73e25825edb37fd2fb17afdcdb61bc51c76da078f3ccb2c1f2ade4758473b06c565ac167c5ff2c04ad33b7fd28f6a245ee236a7ea82354f344ff74f9a545e02ad02d1fae6b480b62ac0b2e6f1ce78125ad1f6dd195cd9a890eac0ad97d48b44282faced093d975e59f9378230994379e5b4e2aa160a41950e2684a8e70eae48f367af71f9016c20f740c4c0e5d1b59a588f3f1350d0dbb3301c2b0d892b2f107b75c4303ba92af6819729fcecc4d7a0fcdb20fa97978cab3c87c7c6e40cfb5753ebbf61032cac6ed0b1352ddbd2701f27d1e61a244958a576692e49fbae3f939d0b7973bc42ca99859478df121c22981203ac672c22f71fb4821cdba635bb0974ca66e4604535e29dd6421176f4f9e6f634e130eca3e10b6949786709db14e961cb8060ab7da9127f770f36d2f44fe14957eb00baa0612e637e01dbae0a7ab2dee8d5ed3d43c7443cf8e219211a1bed1f21326d64a576105e38c644d948a96f10278bfe77aa7e87d954882473c167c099fa30e8e32d3957fa3f262af4f4cbd7d0d4b3b38b52da1ce655e25e105a1406f8ce8da09d5d7feaa24652af6c4c7fcca2bb52502c9329696baa4bd491a253305daf7315bcda78455c2d19749ca5f572f7c89a93397d5e6ba4e28847ce0dc8a6a37ca12c1f660e9c65f41bca6973f94d248417350bf961c5fa0c16f351fc7b3a436f347837d30021221cca65f1ccb883e4247b937b18b8410fbb6a7b6c954672fe4fd8ecee198506782412b41109ece32f0d2a6b598f2276cbcbae86fb1a6fe52e15dd12416e84262efd0acaa5635597e14789a582fa095573a1c6d8201f0c2ec99f2124235c6ef6509c131bd74899590e937a83b71b4b46a982cc8215a8d079e033c1f3a26f0b3c16a6360e494f1a564fc0be124c97489fec89d8e279ced96846d4b1011542328b3b05448c8c074feb600feb7c1c040db82fe581b9f35524a92669c66311dc0d7fe6ea97b97148a635d8c2b6ab8a941ed684b0e046111c66e80ad635c5ef1939cfedba02856f1cbffe96bc15be68a87bf7572a65a73563aeeb54eef4b9ca809f1b95b5f95cc00ccb9d15e6a3a2e7fe65125a0cefdcb9f5b33a16b4d25b26332835ade96d0b113806ddfd5209d734b450c42b633cb1b450364af497b7f2630dc9c1cb9066a18b537cfd9fb7b90931a11dc3b0e6fbcb2270e332f0157bc63e04741d159b77b5a3064d53df8458f0478eeeeb07456423757415d8665afc6f0b33aac878da898a6baefe3b31dd06c57867260cf251c614f8a27870a7d229bd058cf9cbadad41956e840a7b20b837c50de8d5d94bc4a7567f20a62a38fbe54280130f9b44555156740ae8c132345c9a4953110c960d000cc8713008763c740e3e87fefd9f5bdda790f651673dceb9d29a461bc4c067cfd2e0373b4315d447b5154d0cca628856a263905db82a00a44d10d8bd4bd3aea9756e715b87d798cbac15283d66f9ffab44d00e5fc07457538cbd46a2c9e857a9a5bc06503c26a90e2a78765ff975ef4a66e9d76aa7cf59a23e73fba9f3c4a788b1879c942f1727b480c3c082503669384e5158225f5bf1d95377d09177f479e987c72ab0a85b69bf63dd5df2136ba7779600ba73c37425565d48571be773718a4c0213c2b1eec231ff4386bba991dce88faa77f9d4351159dc70ee659d6494c6b7dd13e59cbdf6b3fdae88023abcdacfb9a45fa6f4471556d2fbaa47ffdb2696cff9011fc14ec4ed8430a48626adcd4cbe1afe649060b96794c40e75d8ecc04241bd7124e55399037524fa61e8ea629d84a426f213d0f3812411051b0d97cc8372d48b301ac6256b8d672b9e9e6ae4148f55298c73ce113405e043a4505ad4a8f9999d015e77ddc55870ff6c61c028ece94986099f5b994f3b8a5ca01aeb4b8fbe58123cb5ba3f4f643dc14aa5193069dcd820628da6f16617e7df335d48d558a3acece102769e1524aba8cd8cc9e1f82dbe591137945db061b1eff815f458f076589a345e82fd4a358b1addccda602447f31843cd2836bd67057563e3937539ae0cbe80e96dd210338278a2d968a628a89ff7fb8208c0012fdaa8d2be8587eaacede0efcdf47970d76233ac40e82db241962919be0af64ade999be3e566fcf8d1765eb7ecf1692509dbc5d546b9574a2be0eea5d505f8ef125d2bb73c7ace9b8cbf7f0f06938954dbf412b7bac90141f26fd8ec03d3636a783722b19f01102caf96ad76eb87fc3ec366acbce8d06db80c0201026a2ed16f6fd33c098724431b367bf102c2d8644094f8166b066f619b7f6bf68475bd014592be55ea7161b9cc475ca122fcba517425e29c60f1996f8b9bebcc03e49ce4018333b3648dba6ce9f419a1a782131038d131399ff8e211a7bd0b2861e8f238cd072c9d95a160e17d4006b6e58ed6f03e4cc68c94ccfb3d7c3ea3b657203b8926bf260fe748bff68b3e68dc37f4401efbb7264b5fe89c1b39ff50faf2830371e76e87c58dad8c7c51067b79daf898dfc090d2829c19c476ac2c6b1261cc96f60dfb088699b243b4ba4c771b73b973199985e67281be1af5dcc515c99941acfe7e44deb1b8612c63973da949f9de8a4ebf05607a9d233ea348e5d70682c5387564f1c7e7ecec24c96b43769fb2be3f30893fbbf6e42f8cb0a63fe7e17cc0109d6c74889e606dad79ccf9bd14902bec70053d5f7867bc696c244feb9baa502c6ad60a22ad06e67d29879cce5df31cfbd94b5c2830b4fe378df15eadfb3045076e46c699527f49d13cd4f99b89c62c7f522c6ed4e43be985d94e8c210bd923d1ad3e4f060c1d989ff69d1e5b543a43c5a781729d76fbd85f137e126cc1fe71635669122ffc53a3ba2620890177b4b719f069173f935c66a0de46e96576647b8e3976e890cac39dee34f5124f06a9aff8c4f75c673f7b073a52a51a193017292b4ecfd51e211e41d0b4bec7f277fba2296fb7eeb732102db18d21ef690790d15fefe1206099359d4bec5221d3b3fccf79d9b343ee078e99a9811b915230bec09f1e721d1d2c91d1058c5802dec7986daf5f39a031532fca2948adbcf6c5f4ba801b8a28029c9f446e104f5cc453f02869c012b8259aec37c6c83543ee01a493d8b2bd51d481991b7a3cf255cb6d7facc23ce13a954b7d58ac88302c1da96a2a78e8642d9a184b13082b80b07a8b483846301877cc848a7aafbf2e3984c22f7704439a1b5c3830f8485662db63988f6fd76c2bdd78caa7f3b623c3df598128e99e0da659be8cc34a72dbbf476b219cb437a1ca90b065a08046144911f6e98a18f652bd49ec9a6f678ab5b29a550766e4dd52249fdfc1908c6fef6223b2753c19bd48741715a9cbf3a13a8d02e916c49c3bdf4325901bc19e0a946868d5e82d868b49db5b7653650362f9879e02b20a388106ff26ed048d9e3e63201b7d9606308b4e28b58af123e5931589f9ec34d4218945b2951c0852861a1434d4b0357094f835fc794db732f87338b2cf41753395bf2dd552084658d89305fd16bd4916cd770e4d5d42093ec26502ebc8af14ce0f550708e40cbb8c305191e3935aae37f48eb1c7d6275c3dc405f3881879d185633f85845e42164c653927d678def8889cc3c168cd01f774408364233e8e59b91740be6af52030cab4a07f6984d9c38ae837bde2bfe873adc3694796637ccf8a2675d49334093261a9c8c1a661bb2fbc4b1b6a52e290cfb0b54021e85b48f34250daa4ff2280cf4ea85a3a279e68105b5ce83ef9b546d5456f5740a4eb182e4c080c699919c748d59c383e54cb29cca0cadf81d2abd3af5abe51addac975d1571669697a87cf0baffd9735db7ffabaf49642662d394b7425101a69b501292bbb8b2fcf1d44237952aeee61ad7ee488e00f0ed087a4e286d3eeac570f0e3b855ad25477b91287b5b5c055f6bcd21419063f726e62d75477b647153109fe8743f7b3c609d966d63ef0719a1278c6c75ade30ce487f76c4f54b1c3d6030c888163d5ca494cdc6fd7685c0f6d5f70c7005b228e1eba4a7abb4627890133f49baccebc587a16323f5c8bc833ab4a111cc4c2d8e11916bac87bf21e8abb763be3e81e5e023740b9ddb8290412750a631aeefb2ad4d9783e422aec7b68fe14f99b2bb6ede69a1d55d26d4f1ccbed5de9464056394a6d5dfbc8ad1a346a215f7adaf44c41896e65de9ecc0938c41f6281a39bf8c28950518c2e06ae948691e01c8d2cf0f13be806a0efdaf05676e86986ee14f931d443aa8b18fa136b9f861eb120abf45ebb5e8b8c099883319e868e13b7a19fc8cdf3b889d90dca40fff4c2e270df6d181b1a32631b54b0567622464873aa52d06b9b5fa64c1b4b16e3282bf7babfce714dea71342dfb945f432d9728568898efd2a69ef34764603823f9506c393063edbfb08d33939c6fb3919e8cf65a561eb323303f1e2d499898faa1d771149124048d0b4489b57c58cddfcccbc1f471d54c8926291a7231ad9438bf055cd78b564a98d4e743febfae5b20c3bf114bc2bb0569095902a5b28c51a35d0e272ca38da4c70815a21c2e59f9aa5574264805b4b4629080f7c8b63fc0cc5bb7113092bba0ea1cb57f1c14ddbda8d529a1791c16e6b39b1f5ffe73a927cb244f1d707767adf63959cd0a319768e9daea41457df0ef668ec05e7d4037738f3306f184a89df4c9321dd6f12cab1bc7dea98650ff339345328ff5c994367dd352aeba151dc04e85a9485f7c7a0b4967f7ffd4fffc84cf7614838f611e7b13ca24022adf6d4e9928a15d86fb27b15e566a71578b72f9fcacda58b1a4c7226d00e11875e06f7fe43b890f222edee10a45f96ce74213d30aa0509e0696c7c447dcea14f9185a87175704d3651b47a2027cf94a15017fe09697a88c30c19263fb9f701fdf9f141e8404def86e411653aab06bdb62a39dce40418a203f533f9f4c73a16a0e46597286f129a6575056807f2d144883f172e48e462ca6203d5ccbb2df656441df15d45efc676a4ef91877ff775a584e43e19af47356bb44de0d219f558fe094004a21a03417ad5d4874a6e54224c81e77239bcacbc03db693e8be761265a48786702398bce56d1e678ca3e49f81f6924b62a36963dc61792010ad0478729e2189ca6f53ffd0dfe36b97ae64cf5d69eef859ddf51ecf745fe236a38f34694dc37220c22e9e681dedec73ba884abaa3e381bc6e53b75f793c664c1b487c539dcbab42083b5377b8da8aade8bac50b1fcd2847270abbd5463d290a3e49078567683f206f5e50e5bd469177703aa3f57fdfd7bfa1e86a35f1e54b07c361ce4cad9ca7a35ace0a622555e9f87ffbef742048114533c0c5687b235d64f1bf774177a06202c5267d5b6429232810f7ce49a340ff2479477a417885edb08287a491cbb39bbb504f5ac1bddf917b8e8464324a3c8f11c4c5fac10b68df119182035a1d7dc3ccba1fee5aea968f18b7024d5c07587c85e6277623e8edfe42418657c1efc061762f9014a9c1a35841571fccd7df3c10f73d18aa28affa2a262dba1e5bb09cc2144ad8df50dbd453ec18e080e172fcdbe2d6f1da7362658dc1721a36cf1698c4aa95c2b91dc285ada389df19e78ccb89fff0804d8d5849a69be39887ce25e21d8365d9ba69a2dfe307022dd3e476b4e21ce6db3a07be03770798a1de54ee2c3ffefdfdc19fdf54a65268cb446d2ca44c1236d81d801d3800a04fab43e354f77ad6cfffa9a0eecd12ccbcc70cd24a53305aa86aec398d7c903afb447b6baedc6386f462100f24fb91c58646bda24a7aca316945d6190046efb094e504e251325cc2b8c0f1cfd68f7b11535c5cfa0a9d5690925cbe5efa540d0d876c6e5b629bf74859d5b7a7b66f25c450f1ff345fe4a6f8471b53f21cfd47b049881592f93018049fa5c43890d02b5bdae79d832156b8474bc49b62ef5291093a326855c8a2844230e420f37578a6d7b657f645ae3f8152bf1350802a045f81b3aaa5b1015085a7c7e5bfa7bb57902fb9d83e9cfd5f9bd857e83aaa946b7482c244b8c860b26180c09209e65417f106e4acf21686fdadff3fff5ba630f5c5f780e3d66007d6742787d122a623394931b53a4b4ba1d00b02cd3375b0cfbb2ed35a3fc2cd52164d7d038e94bf893cc89fe4cbc2b4ab96b582e27ce7de5ab5d9042a464fd8b09aaae4e5a6b5c90c517a147f2d39e1df3816dca166cf6e3195bc6945353625b858ee370dda8001cc9d89dc9acf4caa5f8f6f9eb3d6165959581881ff5481e4b36558bab34c7a262ac361a7222c64cb690ae686d7ee771179d9039dd2654b567b7e1dee2f3997d0eb57fcbd96a7d66258a2961c982a2a8e3426d0d2df87d4224d03f700e5745ba05ab2f98fc5a85e710624783b05fbc5f6acf06875dbfde641801a8262a5ecd21e3eb331bc6c46d32bd88a2a48b84f2b6f5643fd7c8ced2f396c151d51a13d51c499dbde7eee656308603d56486f3f23ae0a04c4d68260d6d7d7158e9d99e2ce807dd7c59ed33779c019c0afd3ab0027e92da3fd81049ad413e15c4456de1ed84af3a3a527d8fad3289693b5abe3ca69882252faa4a720cd9bc1eae6b04933341c84a3f919bfe093f3a3aeba22ddb4fd328df31ed97df72d4e9dfc66d9ca8b0c6beec89171a62b50e7b7ef70a918733ff6970cea7fcad55e4b130e4a71fc3ddb230b87048a210b3da8fa27eae2598161021803b05e33a866580b7014775cfac30679d8e603614f9d68884fb1408660c3757b68cccf1a583bd54af42dc7f27c7b760f14f4c7a4e608113d58f3a541739d804c6e04bc2f452e0d87d7f8d730eef91634f7a4f6acb5f44a2867a6cefc20e36132355b87fd00417062058d19a8bbea2b6558f37891c5a3c2b1d3723e5b38fa97fd1d08279ff3ebd732a558f447e42b85bab1beb78a95fe7cf5d2348cf1e9f90f91d59378619b9293e7c9d78e9e7a959b98e55be96c832c954f5b8365ed02fb4a139ae2463700332be0af90ab182baa646bbe17cff4359ab7c3afd04e76c52ae10bead7ee9d53375074d91dc4ac4c4c13923eade45a332238a37d3ae955a37fd2f3573b3d3475c30fe9a23eacd571f6aad7845023305b99cc67160e48308be13604bf88ad613f7e85a95e8f8a71cfc13dcd32b68c35793b4183478a32be1afb33feaf13ca17b273f730a84a03ff8dfd67fb8de99c7ec3297914b7561400273e7b8406d43c5d3fb15d71439f50ad5a8dd4d253baa9d975bf491c24f4c2be09831347547ce8559e327bc66aeae6225aa9112175ea8267552847312e2fb7efc56ecf181958d7a02d46d2e8c100c4cfbe90fd885f653fa1e8bfdb784126c75ccdb041b7e93307131e6bef2068dc38780f5921adb13a94fb70def6c9c053452ef0896605a139f13e352cbc88d524df20fd5c7c0adb3f92a358ff9bb5aaf1286fffa06194ae59b4d2f738b2ce606ed2698a675730876cda7e9b92432f277f1bf6687e7bde212ad239044cfbc8b776e4c012bd883ce1d69bea32ccc15bf09025a3f58e0e4fd8b61d34a08e22ee8d7fa8376074864c779730cee706abf3224e4b7304cdb44ac73003a145085ecf37c826c134f22bed896f07b7eb4857cc0f1d848de3635e425cbc3cdaa08d9cd3d77eed171a9d176f375afeccc6ba8ef1a67c9b46d9af260e5cc025b448edc46b01107940ba19f1cad2443cd670115bacd3c370f3ffe268361d82b1e57dd55c3d62e1ded5a8a88f2b07d1e5d8c61fce92c6474ac7b2bc65c0b0fd66d1e7aa90b99dd0120023dc51a94020765766ef72cab23e764f0f612ef215d6727dbe516f359aa1427a72131c45816d49c5a06c2cc1f4840a240ef62a030e92d75d6c6fcc6134484ca7d812ef3938ba8de68fdc4c327a67af239ad6af43c9bbf2b45af79345acb65e5925d0b8a327a1a1e768c24497c5132a408b8ab4293dc82048b1fe39d753fe2afc233d0f6c947d1c98b7b496d9efb9463d227c0ddebe76cc0a02e725d26a594428efc41f704922f571a35fe60f3e3865a93d676f0cd6ad46149b2210540d9a0fdbc7bf59363462389bf6dbb5b9ec1148c601ede3fbfb97a1e8427c4b7aa5c45aef8837b7a45817ba3be22d131824377f164d37226d4334b2fff7245c9f52265736e7764ee81ad647a383b2f86510e4c31ef3d221f527796ee2ce98d9ac38aba4fd6614516137a5149bb1a8ca93bdecc07035b151653a38c5ccc1e9836abf5472ea576768503d912671fa4ef4f5e4c899a906748b192ae5a639b475d44092518ef06af498d480a4036e9e1013f045cb25403f69fcfc329a3d4ab415065ff3681f13c797cddad8fa2097a4862d75b7b0a497d10c822394655acaedba7342a331537d56c945c7a2754d1b30a61cb67a0e383203ed40b86d893227cda72af4a2e10058219eff02ee85f2c11ae71bca74e26daea2705194b0f80b2ccf3a0cd2a039b62b2afcc278096ab1d35126508bbe6e86c365684037d70edaa2b766b39bbbb6f96344b6b3441f8fc9bc5c463cf7f9672a250ebe8584cfd4498288c1a4356b55a94d533b97802f0f43f4d3007953555fab419864d441bbf755bff54d5400b1bb6de60b65f20eb07f7b687f0233aaa9354892f369a9139cffe26782c53255d7f84e9ea4ed4ff0030ef087cc3477eaf25c92664d8a3fd7e8353072cfc28ad6a8aea7f2a2d5aad3c06e83a88bec0547dc42bf267d4df9a2b84dac4ceddc9b75d422ec7dbb782c14881e96384d2ddc2153408f299b9ade07e408ce9138f37f4818cd522ed9d6647d8adf58c0f40dadf4a633081b14e2f6dcb32d44e7069c27eacb5f488b173f9db5d5848358d78da4b5fa2c0d350b4fca50cd3bc5d09b4d5a2f042d656fca0f8d114409265bf85bd81ca11def3c83b8d9385d6b6141ce5ac02d741c9f48a804008430a968e6ad21cd7f2e1b5111d8cb5111452032ad5e270aec676ce16b9f832267b31955019c8e36d840c5fd4c8d0fe5a818b0b1ea8c12720d1b4d63154f81bedbba7c8fd7243457cb9c04c6ed7a8fabea151ae2ee514b7e7fff8a391bc098679aa64c538574c9fc4155f88dd8dfe231cca244a8322f87d4f9e67020ba87eaf38537c0a0939a6d4da3015b0e38bc3b82988307e4d201b686b53506795ef6f8b61aaf33640e69578f90148c721a43b2727f200106f7c4c0ca6606b010ab6dc0ccccc11b86c60691227049f3eccd4f247ebf1cb9a514edd98c5ada8eefbd8fd6077a7e6d042aa274a7729ccd6cb3eff048892513bfcd8ba3c58b10a9ed3b02a6725bbab54e07f64ab425d9b30c3ab70d04f5076037ff7fa657654bf5bc7be99db35b771d807c977eb98516e9568941025f218c76c0483626c35b1ee0e5cb4cbb7de213a9db9f8cf2858f0663003b0e78a2ca60c0c3aabbdf3afc2de917370d360b370ab2491df0b00f0266f5176e682e4bb80f886b5d0594d20f921e95e8fb6123cb6f0108d9a26d173868eb9eba23e15ca6bdbb1ee966748b3778ebeeb2ae994f7707bf605f44506bf8d5db11407f6bb53001f4c5b0cb2bbfe885b054fbf335728c46ddc44caadd181ab84bbf11b3d5d523511c7eed0462d5748d5854a022f0afa9a240aa8bec5d78233199093584cd118e6f72e52bf1a6db11da20335781cf093f884fd87d0fba37325589d2e70fc212eef4e6171a03e18433c0a1f30ba9b17d041f79b1cba7307d38a074333193ab5135e2924073c1d3a7cfeed622b69c71636c1c54a12898a962f035cb890e67594a5cac3b86dc991aa74ef1ca5c19cdef15362a79cdebbd3417d3f68bb1e2512c5e59d1e6ce90af0e916e5477ae6aad3528e9e20a7ff516683d24494acde6d633deca611ec0b60c3b992849ebac0a77c49b06247341b989140d2ce162709a5ac75efeb2fb96f925d78783d8a4de56719d5918456f1cba19a2d065aa3a6dc344ec68376b343a08a121edfbd237d072749807d066e7e453c5a2e6d1e04f6cfcd3368f8812469e9faea950fa7eca483c15d9d7b496f9b770a0206dff57a07fe784a507b3c8da094943f237e2ad5a1b87dc0a5ca64b392730683e3c169695ecfa4404785ad842cec5335e989fbdc594bf69cf9b2f971975eee6ec05a11fec548d2a42e417783533fd2ef44cf0cea45ec0949e3b36249beeeeb63b0abd8314a2

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
46bcfc17831bb1ffcc38a731466e3003af9dfa9c040e97959ce19d22109337de3db0df2536e24fa881643e8f8b09efb5e591f70d459332fd89300b90650ecc26f50b3ab912907ac23bdc232b01c8ce449ce8ff0b54e7806947ed0769674d1c8a8fc53dd1c9ea4aa0417ada6f397519d96eb44135cc1664eac0752f4b9a480ff2a9b1485339c5ae10db4781ee662301bb1fc8fa7495b989f79bd9c2933d1347b7632cc31dc630868029a84a6a21c0503e2ed4ebeb5d6cf4b6fb3d20e53e37ac264cb70b6dec7d1fba0457389588d22f25bdfba16d7cf4b2c917752eac169eabf98896a75c74bb9a84c6038ed866171e691be7970344021754b1e3f918e6a41478dff0e2c51e8ddf90ace144f575720ec827388664be59992ae07d8ee09e54084e3c82b958391b52973628f2b8cf15408ec040f1ebdc673199be257b8281c704b6d532fd0fb216e0e1db4856c972fea2c634ba902677644aedce7eefe7feb4df78af18a5748f588614f537ca1527da2e28b391b2a4e7067716d3c852c163e382bdcc0405bc94975e9e889e0924db5ed111919558687451e3035463fd39de63d5fc69a3eb18309bd44f0b6aabb5f83780ce1b9ec085482e015bb33db6ec0123f9f3216e0fada0b5a72567e611d5e33c080607d028ff45757ec8eb57a834624e7bc4ac488cc97acd4be2d13fb61bb41cfad289e338fb00f6d5ef7af6dea5c117bbd5bd4183bbf238026150829a668586d071311562b399bf83eaaf434bd845877be86dc7477d851d6e13c6c7d44cad989e11014be3600247c620fd126fd4b953fa7aab2df699e0ce2017074bb6119ba8d5c0427b7ab0870d6dec40334c22e5687701790a4a6511ea3986d0d84bfbfd74a7f20a036bf6323caa60fcbf9922f0ff5f7ed5bebb7ad43e465c346986af8b7fc3e589206b618401fc9ea6c6e78bcf7b1b1aea469884bd6ebeabfd9fc61d90f4db4fccdfdb57761fae783d425d43a033d64c16ab3966253a93f33cabacc8fddabd17bb347ec0ea046718157b2af01b8774e3a65d8bef3304c7c08a7eb617240ef65bb6db94f8f97522584a5a4bedd5cd02402625636a635d7b76b01996ccd02c2b1735e20040fefa497bf14c09625d2038cf807e592d79782277e814f5f0572a490e5893d4398d3df7321b6d5e5d8198b6071f8fec325e1bc92e8f99489f262bf8e393b8bd93c8fb8a3fc3b69e0346b83d4737bf37615968f8997dc8c76e3b37f717280e2b6245c25648cd341f375f0c3022082075408bf8fa8bf72db73bf5fe4174f2c0d1a53661a788f940961eeacaafb34b1f3be26f412d0a22c18fb5b0b1c78da7d16924008315ac14227995d66d750cec895e22e5f8031f66a2892a2e37b0ff17930042b8e4852dea8e612351c054d4b53403b1384dc1a9dd2cf0be7228e94e109f11d9b3766e18325f672ac677bbf852c71eaeef1c6cde7cdcdf763396faad7ba41f3bd37660751f126a40ce15dd79067e88fc5a5dcc4d14f5bafea9138709c0caafaed8440c55718855bd1d5887c25db3cf19a6f170f2cc2487130f7601308dae0aeedcd0817e8e7bd036a0543e21ecc3c487114d6f12d6784d124447816561d6a8af907b7b610a9da6584a46d2ecb482ef60926318e90832d614648fdcd0b88abbc97175a7ceb7e537b84929e496a3b1646198fb81b5ebf270d3ff3a0915597fa63ffa82c422f132fdd4c78744bb3b8b56dba69875fb9e46f748ddfe81324bac475dc46d9eb39b5fc405126e449294fd6882bf0ef35fb934e0627029da2336ab5131c5eafb1f213e35cb0f3c25f6bcfd5469751ae98c53d2d5bd3069bf466fa201c4dc3f51f05616e06b89d9f5b3a088c92de250531f2e9c9c20d04919e7e4a5bf9a33ac5fe4474b43c950b5f14e953a135125f5ef43560d02c07ec258ad569876b05ee7d8f2cc75da36acbe326535313c6b2b9bfc53464304195ea924b62209335670de28f31cc754c6c76c4dd0e61595885f751b3d020b243920bc190d719d2ca9a95a2c1a1bb26ccd607df46dcc14c0fdfcc3ea566c24c8f732d4bab31c1bc6abda347fdbf2c9c1ae62d2838dd6185ea861ffa0e64191c2bef121625b6ce0369969211b20487a1f2ddd23e7ba206b7ba42314eb94a633a4aabcd4a1678512b066600efa2d892c88a9ff30f0a11b6c99cbc2663d27d532225001439e6b4517104edf47f767ee49309235fdfa537d864f6822392875936ec6ec54373d9940fe97c6901b469022bbd10baec4e0aa3fe40678c81d40bc58e63f929984b47dc48443bb52405211f781afca03d9ccfb22fae0e6332b9b557791cabf4a305cdf

Post voting

Simple post voting buttons
View code
3835f10f1e48a895d14ea8d894444d7938fe5a1c85608ab8dd3a50053941d2d4d24fb4e2bc7fadc18ede9028e0521489f195c6d98598926f79c904b4aaaec46298211f8556bca0ba0edfa3b31a4e2e247ddc418bad412c912ae63a6a22e4f443dd398c2227888e567ff87a6d34c8e4a3315d920a3884cc35446c7cc18b89cbb0830d9e25ddcce5ddfca08a4fc82ca9c204517c2308db2402af52942fb681471cdc1dded7bd480c68c0995faf50eab7549fe56cf251bab5068e99c90b03adc6133792b3d2781ae399709e999c18caf92ad1147e2a329d684a0c5a77e9df5bb055a0e1063f9b32294b43c11fa34d42c2e34023441e21692061a02763c4a991fed59196d5413fd3eb19e2496602b1b94e846b94c8630b0c5521aaced165d7f6097ed48105e602dfeeeace00d983f4b9828d7186bf4d86c315c06d79397a0f79d857528bb28da4f05089277d238ba0ab34523e46ac32b2a37834c997c50ff2dd75c9c81964533815e69b575510222514fa85bc61078ac963663218e8ebd93914b2060d901974efdbba1103853048f80c0e4a3fcb91f764d52b6626c5f636f7d8cedc8056a9c67529819584eb5d2a6041ee5856ba842ff2f5021c0d5f1913f3e0307a757dfcd074d365c5237ff5ac86a7356b54da309f7c9b20b68160d2dd322847cda79d8eda3deeb4e37b0c81c1bc682c54b61a9c3202e14995b61f16437d55a7559ad2e2cc4ff6fdfbe265597365839e2cf27f653b9d575120aa471ed801b562e59b903041aa6137e6e8551d73d541ba8454998f98ce99af67ac5b33a849ec200865045fa9d242ad65cf395f1887f8206531118e4ddb36f67ee4bfcf628569cf24ae5b2661ad2822f052f195cf44adc3acd9d206ececfeb7cb5a1af7bea2c6089f7609db214d359f82891b24e53056a4b91ec5312691a32e6df57e1acf90f1befb73e30270aefb5ba76e5243df4f4b2cf233fcec44c459376a40bb61b873652e8f6ca3f2169b68c1da49f07656bff0c3ddf115ae352cc6c8891c24c1e294daf5b9232d229f824fb8c788ca5e3e2c30bfcddcc7a0e15ec0513d750e7c9b1cd23d048eda4f66e6e8fd2ba1521491b0b16ecf0d98d0c8eff943abbaca94e47b1e8462ccee67a93ffb1a86eb14662726392127ec0915de7b1415710fe0611be5ab0c8d6e19958b555005b8c2e12f62b4e733a8a38726de40683520c68303878c87156d65e63f31f72a2e417e1271212cb4507995130a9902d775a5d31d242155c3b4a0f46065f968d5d7e951f0ae7e620e78441f9398b0a3f8fca2df5903965a1306d4418bc848bc55dc18334b232d293968a8eb6901a506693a5184dd7aae19465737e0d79acceed193f2634fddb0b79f90b1e4c8561c9dd8cfc9fc79f2e0ff4a46d57cfdc289d8c6a135f46b0c1560fbdd5fbe50e3b5542a4a4664d4d8d503109fe273145d86d35a6505b60907004a836baf10e262c7f95c75867ce3893601048b93ee53ac77ad5905bc8f1b31682218e6cee96096d5658f5ccb29758cd06a05657f50d404d5b40d6ade2878fb8d04fbe80a06d3649b84b5c1f92da99f2d000f5b6d1736e5ca94240a8f386aa0d93e2591a0b32dcf33bc5d18e394d34c1b37abe8f5d187a621c046a1a9a64137cbf98e3325d6b8c8d75571dbf0894f6475a46bf35f23104c7e26c9f22a0e6c23c8c6926f1b3cf8704f04a075c3c76626ad6cb658f97553268d7a612e6f7eb5a40aa9cd8fed743ce100ff60f6e9be97629378267f62772c855c269fc5f932c1f08274561aaf6742fd7651da238c1796dc7c8e6c3e55eaf8d00bdc24f4978e063616682f28b9dc27bc849f8c0c58ab8ecaddcc72b530beb874b81d843a4203cefeb391f32e5565b125b1be2d094aee168663e4f09474136ce5bedcfa18fa9c4351d5dda94fb545f01f93ecdd1a8c46b1be114b2354c37c4ebbbdbacc19f22c691399e7e0784f90b6bdaf681508e44dcb570bf1805bdb457bc2e92357b22a01d6841cab9f0ff000c1523f037bed257e6bb64eb71061b93c875364a9a7f8409a32b880da5c1fa2ca7364103e5833bd8bbedc463cdac4252134772f891e7b87bd970f1cfcb25b352c564dce741f91ac576c56e7fd1cca306b6d9c068f83989d44924b5ef2f158058a50c0d9c2e02ba8dccf8859e4b5e8d0
Comment vote buttons with chevron icons
View code
bd0aa004b8c10131fed74ef28f3c8991509f65fc84b6fbe785554a1ed10e54088569d5b3e86743fee39b7f97ec27b894c6c3ff52b02e2ce3ccc4daf90b5676bc4b0b542bebef7127f71de212b980309220abce5d9aa1030eacb63a578ebb66545b64592f762d872dd4a79c7bac2b87a619b09cb1a1999be1e55701cd8f114b03432500ce61d120407956417ca9ad45f05066738c755646545b15b32511f4682c31d74e255cc1e604b4378dd2a6b5de63c89261ec1b3d65474ba544dcf3719fde41280ba3483628b5c97c6c961fc1999139cd09831af6f279bb28e082fdc4acdef622a273269b057406a04675602daa517634196e211e105a0e122f75fd45852a46dbb3d039db16a74dd695017a4a25a1d72a3f0daea52b6e1df7ab4653f6ec3d69a7b67d60d533add241bcaffa16c4cd107a22f1239298b508e3457252905bd23d333b58c23653b3765fe4a820ef9df41dec2691941b045ff8266a5a969b2ffc3124c2cc97051f779be7168dd4aaa0ad3c65cf7ca8e56f2f8c342b6af3f23b2e08f16b6f81ceff5b38022533e39ab4646788a9de5f922641b765ee5d8099a769ade7ec41e9d48f2f077ddc813ef15f1c15e95ac35930f9033d75ddb237a1deb94bbb16002297a89c24b735b357b89e014c9808d6da69a386daa274ed29314a77a61adf544834f7a7b2293b221674fce0903e642119114fe9532b1f0969598b773385ca04ba5272e3bf6c02a61e358b09e58cea45c4f07e267da033c624b49f5e96b1abe662477740bc832469cebd402c10f946085413ae02fa2e96ae0f94d5f1cda5561ad0753dc9b1f34796a55cb8863e5e9e2a5a5b2e90d62373e6fe763a7e5a8d9eab3c436e2bdd8a9593327f904021218dd175456a90988fe973560c6b83e70855e762cdc1e6f268ca08a05aca104e1429518665d084bfc269a1b52c8e79cb2fc6ea29fb77434bbd4e1734a371586aad52a8a224e996facdc3506d77b71bf419715266497dbbd6fb7c3128dd35c2613e57a763f8e18405e3cfe6871c35c86e3e544ef87c6fbe2005c60b5157b36b06a4e4f5633de42f3e4d12f27421f158

Comment voting

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

Simple comment voting buttons
View code
e88f38ee96a9170c69f6fe4a0b5edcd83c44e9ef23ea15d436cd91879c2ec86f5681614f2e76390fced34aba7a48ada77343c9b3f8889f9c49b1951007a6d70b101084bf5becde736e43c448a96d0ebdc3a657a37a735548a6a562a5fe81da26c22b1ea5134193bf99226a86b8e5bb87c5444bbadbe2a085ea0b66896139bb0ab064a7a9fe8c6364e64152b58fb89943d7157ceb75d4291d0370d5709c1d8bc0508401c1145482d9bc11fcb0ca5ae0148d0226316c97d99a7cbe04cd6072f325eb649c3ef43f1bb7d69f3d2c84fe0fb64402d43214ec896c5c5d167d0c245846c7e6913a92c6ca8e816c13a5ccd3d6a5cbb6ff671c9ff3769a92204f9dcbf6db955860025cbdff9e6e5c17ad1a8c5a51a96888913de35c6b6e50e55d577160fcc43deadd366aaa0bd1ca53728a20cf94135d2bbc07ac25a00e778af66d85360cfbcbba49bf0f8a51e3c87fb64b45e66bcb355d4f4e71d8124b5cd1ece17fa495c4fec0681d43485547c5ebc466143a43336f8ed90f9d315e3d2246b9409f66e3a891b5aa3f91bb57d4da5900aacc6450c00bbe38246ca163112df87b8bdaf4e1dc7215fe2d0a85da16aae71f89c8df316b376a1108f6585543560b150f1673517c19467d9a0a0de9a0c02c52f9ab747cefdf97dece6aba9e96e77f828de460b52d75466a5e404495a557686a99996193eac3598e00294f4e1b8a6024f14109e6ddfc06f8611b6e9836af59acf2cffad2e300d1bae1f7e884d532b3479e43bde0168d7347337ae29486691cb6a26dc1d51c8edfe94bd040115eaae37ea81c68d15775610d1db989ab874f4970c47b771566eb1c882bbee0513885eff442a4c9b714d268b4a5b658b4a6e8e8da1afb1b4a43b618a2ea0fdca0eaeed4d412f2bd2d8b79ef84e5a5d77e64fda0949abf20dd59dcd84db07ff044985411e71652b29a40c1fb4428d838220fe92fe7f9614834d61cb833d3da32b726843a8f5b3eb0e206d5c2b2ed87e29fe317babe5218c42334e011abca58f5527206fe2a783ac1d8781145fdd7f93919d192e34f8e9ba33d7f63ce4416c22532219b839cffde95c7ae376fb136e6b10a3ed6894698c6bed1f73881bf250212d1a7984c29c9ce0f7ba75e8e526fa159437f655f2d20549433062ef96cb0a4f84b856e0a514279dec9e1039aff0e45dec8f8c618e97eaa4a6e4a41b13c4ad9638978538d865e76e898c01ad4ad32792a09c30e5492c504f3a8f9dccf6193b9d8b7d388edd384cdb8972e26d9caf8e7e76050832d3dda3c40f3e71c2c04c7caadc06f90e4371b7115431a34f7d9d27fb4552748f0b9d17d7b220a6e1b2a434f2d0e19956c6152f6fd736b6ec1eef562a84f3c6420466bdccc897795a169d82441b304ca319ea6b4a05435a0190d14d37faf6ccd558d8aa82306c99da7d7631339a7347fa8d4781c52e882e6865a7224e8aabefdf9d26ae5961ed31ab5dd498e54f76717fa1755b88f93ce8a36ef206da8a42c484f878eacd4309f1b3a00a6971c9843145e984072b3f2f46d5e9545815a330d3c11379d7e6d3ab18311f3de345da03817d0f4abea1bad4cd01be0427bb9bdf6a2ff5644b0036a843b4525ba1036b3209beb336f3a43b7dbd3dd544c7dd72f7959be839753ac1114886be9b8f8b715f5ef0e4532a950f4d40e719e22568013167414d21327078bf07a2b03016fe51b3db27eab733012930bb2443fd03077db56ee9d1bdfbfa98d088b4158d65125b176c316308bd026f8f1ca7e300c84a74ca5125e8e01fffb35ad6a9e9b9493e8db1f3b5c200fb30bdd6f3b4c36bcb7e1bb897aa159d84068f05000396fa70753699c0384bdcc7fe280e4bb92899c10014539276649263dd0795e65bb319c5b34c02f59984eda5dbf2ca47870178722e7843e9dc6e1e3aa63fc02a9492a6be9f13606c2e539d9a69cac81cd4a011beacd39ac951d4c7bf2fb95f336462216dc58c6a1679a76520b96d3
Comment vote buttons with thumbs up/down icons
View code
9f5f8066ebbb1fcf9fecb43a94261b7abce8576d9f014bebc4e76f93b11a4d8876aacd86b3ca7c2d1ea8e2c4dba01bf2f71afe68e90374bd157ee3e80822d8ffd2971e68339a3402efd97b77896cc0bb9e4d0ba4748cf0f1b82c3214abc7cd05e28cdc1432067303a4f251eb99b200707781bab631c2f988eff42782f31b40a6a29f4a64497ad1d558347eb2d12d119fe6320a3d87534926b57a27227fe5c2f69cba961ab5bebf60bcf6f14448a6d0d142fbe1432ae02ed92c702bf6a5a98b0105dd6a542419ad489ec0841d7ff9bcc53ddb4cf7b1e0255efbf4fae8f36bfb2a7819c6d47c899a28accf1145358e8e669f156c6aa57a52ec23a9c7301420b63da6aefbbf06fb50fc05396e8f98387e10633e8132f42684a03d511a6bf135fe3eeeadea635692f5096dd010fd3580c802ae583a7e712baf6c3f7228c264749b1879d3690c8c79733ef9c01fdb90e97bab68ec9bdfe9c1cad7577f01b34a06faa80fa107c66a07241ba7520ab96ac98187fc9cee633b4767e3367f7baa74247d15c0fbd5916910cc44e92b7f458788b78480c91bf05e12b839d7f52333a76d2f02535d93a422b9cb3c398e26e791dd79a0361b5cedc0308e3d5cf0a59d884e5bc1677981190ff534ceae9d1a69eb70ba4d82358f77abe52474ae496bf5e47ad250764b32f42b04a7c89895c1ce472f954487d25ffc013cd443e2ebea1f597d539f7a9912b5d0d70308330be151394748fed91a74baf65a0d8203ba39624566d6952b5b6f5e95bd441d8813f0bf7765b1445394e805d106826a0bfebbe1dc4a31def3aa4d65e0be5152959cb4357dd9abe95a320d7dc6bf2c3be2cb0e5d89b9696e834d38d35682f4d831d5a68e9d5199d1e54fd6dc076d4396cd677830f7f39ce002f4975d2d9e431b0f8c680112491a23caf5e3a24794b42dee08bd59b0a7fe1318232d8bd907da561e78fc73d7ff156f210c065713b3b53f7724c757ac07c7d897dc5d9cee6ab977adcbc5056bb5860ef4d54aea2a7e1aa21f8bee497bd55df591340e42ff507bcc0add7c2e8174a1e72a6fab4f1f0074dc37b447a0f6b1e7a687af34d9141fc7271e85b9c2f0dfbc19103a8b3e19ac6776ef0bb12b7e6e7e9c687e6794ba606ca997114b41de807b5be555119184399061c0cda6da5e15683113392774ee60ee6cbeb0052d302b1bffde03ef83519097ed3984e284159e9f1148b160ce2dd23d7b134c584bc24f7a23ccbb9304946a76b0ac34efd9748878a58477408b00d1237dadb9e2cf173b0c94d0f6b1df174b4c8937e4e46fef897a34d9665c376415c68a3e6054c2b4410ae73e4a6235e8b79467675722af98ef54b51aad315697b280dba5b31da8af826c8c16bb2ccd04dae0aa71db617598f18a816a0101167cdd327eed92d54a844b8e0b4a7a7306281985520cc78ec9c57367c0ea3b4c54ea2976b180135725fd9f7998e89dfd27c752e6e0bac4073205bc35897f8d729dc69874d6714e5aee33810103425c79b5a6419c640453042bbbb1d8da59e4c66b2eb9c0f84c7fdc670abd1e382b3e0fbc185b9e437f7110082a1a36187b91cb6a32511c801b0f0b0a8f539bda0c1a59b8170a39c71809e1c08cf445152a064b28aa62b43926c4e657f658d44c9266972b31fd13b4997b1bac3df7f1c08e035a06946855ddbf90dc9bd8039667005a5da4df7ae1ea718e1b9df36723a3d369593a5f1076e683187eff33117abef558f157a558591190c36297f1db8fe726ce52f576eb2b67ca280f0860cb76ebb91db79a55bd0fdbb4717e08c899ec338591828fa0daae8ca36ed784649a94002bd22945e38e60783ab0b8af0c6f67b25b350a1469a9eb403551a2b2c5f18fd8fcce84f38e8468fd789b56971ef10f811751ad8baae8c9dec56b6f1a54d312fc4adcc6f076c4fd792bd38a454e080ca770f6b51d44c32e785379328fe6520079fa29d68280ad684204c58f6e3c7068962ef7c996621d727111e5ebfe71b48f2b0a1ab79df47227b031bf33eb2500d6bd4dcc25ae0cdd03162b002bc78b5bbcbb5fb926f3c375a4df7a65c91c69968a5ba9713736bbfc08b1893f6618c71025425526f57eb7ad6add7fa09154830b23e4aff6f65c73eca9d8b76cb7fb99d28e7a7bb13bad4a5fb77a12f55f46cd6189dc727accaaeb0640040d287a08ff56a83024c0f86610c928ead2eb46643d04c4c04a10a2b26e2706e9eb0b7b56cd725c315c736792b8b4367998f2193479b00a343069f7a12cf509ee0b1bcc3a7552546a12ddfb375309afd07f9c23819654f219bcaa8f473a54baeeebcc7fa575518b1759b248c3070fca0e3a491c9c729b210e37c05f6e3c4df899334b48d2293abad754dd43d3e93919efa34c83926815c685955f0a1c324ef0e2a9c8655667a953ab0f5a4fd39204b5f97b871abda78fd0c06e3250470c8cbb706c7287cc8c7a6c6553ee8bb7a679d89d05f3a2f061e8cacba81dec112910bcc454bd35dac6f47c8a79420977fd271414ed1995a506e77adce94553f06a149bf6caebe836c6c656742b235083290d41a08e405df3dc4563e079fcb9a8506c16bb08992bc60e92d010fcedc636f8a9e8357c1d8dc79b33828798b3ebd9edad7f460f3cb8a9c4e226a2a10e26a619ea58e32f32cf0252ed65e2aac2194ab499c5e22f5e03a2dbd8bf39ed46262cef0d381618d18de7d27f79bf9513b76ab24ea0d89debc4088d0beffe88b22e00da0ca57efff8062e84bc4be7cc5465cfb7f915ad697a608496ffb58795339acf0f424a2f80ce2348659254128b14204dfc3292586afcf466b605dd9f2b4885a46c8d3b0aa761474459761513e8d588c5d69972190a3df8cdaa270bda4196241180637f5043e21e7458165ce690c23ba4aa0de2c5f20b0bdedbf28a9dc887c75db3fc84238c5e9442f512dd1451516e83680132bf674d33f1d0b9bdd859e8fc250da8537798da9ae3f768667f1f99f5e6fbd92eb2c43eb06bef7cfeea1effa5f2e7df45f8c542046e29d6d5ddc871bc6c24b3ba43924d04b690b904fa483e5162dc1718d2355fc0c2fce4db7fc1280724e563735d936b18f3b0b5f2d468a87029ca5f57123b836419be5b43c4d1d207f926a9eff3418ce3de7a9391317f9bcffc87370f49d22ce772d8e4b23fb841b3fd0a5b8b83c90fe4b530ee1022bb1942f026f30d62ca031d44c029ef5dcad6d91ec65308ef86e6c9db95c251850a15945c557e92ec87d8ef74a290969073b5a2370256d9a1050ea7d6c9b5272f4150b1e7a0aa57775a5ad75980c1ed6635dbf1860a94da3fad5d8f1a50bfa3766df1585620a852547c3f60c25d97e7def8db4c87eadeb929f6d6f4659f3d48a177f9f8063d7dcd7bd663ca6766e056727ffd78044b628a73db01aa638fe7b7789ae1e87fdbfdf36b571f326566a73b2f587db96de80bf532baae854aa6d57dc5e926cfcdea07f5573fecb775ecd507366fa92ee130b1cdc0cb6e8726dc7c68e6ca6e1c0f5a5bae19bc33779278d21468c62985bf08178a286e7008e7a26d9bb8807abeedc0093d8d4a8cac54e48a0eac798daa0c53ce099cd3db196153c5a6a5ac86c54b9489e86697dde84c0ef28c2654c8ecce3e5cda64b3e6feb00fa966e2d68d309c5e2f2a27fdba2881cb29a1ccfe47337e77004488d69476d39dc6a4fb7e2272d9e533adb594c3bcdfefa16884

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

Vertical comment vote buttons
View code
c82375d3e10f05bc0463f935b6e7e47018709f1f7a0faaedbe244b3a8bcb399ef69fd7e9e9294aff23289afb88111bc5eddadccb54ea9f920f849bdbb8349ceb147e55874425fa4dda2def839b78892846e7dd1075a9deaf5a6df68f1d9cadeb1881a7cd4edeb3e72a7de403d388e49a89daa6b460c4a4c191fb7d672d0f5a8e793cd30a477fb9fa2dee69489526addc254c749ce47bf64a20326bcd5a944dffad5c09f98b724b769d8bcb16248cf2215a21fbd5ae2d692da3f1fd7e7e266fb02f6643e0ab1328ac08af5dee8d6d8e8ef9309992ea0fcf97e14a4d4ec4841c018cd8559b5af7cd9634f1da4b32f7d23b23fdb42bc87273406084bbbb130326e434ab6de1a05f72a5df3699c737bbf133a9ece25643406f476591d05df8fc309e192c56f32500ca4c21e8dd6a84ee63832fc146bd9fb734abd466889951e820968616a9ae9eb776485ff46fd14c0679b530f83f3d006aa756c96652fb09901f2d04e89540ce71f8a6023a54069fa9b7caa0c994a0c42c27fcfc3399503c6215366a2710340a14c529368f3b7c90d7ba1be2eec83c43835a7f4ef099a817c5b12fc478b235afd59f65a3a6e89ae7551a2890e879b407643b25e71ec48f5f72e2595477b27b32fe3aeb56eae96ee5d9dba73eda743cbcac42cdb5a5fa3c2fb2d1fe941ea0344d3a7e722fa858d62bd034ed5ca4a06c694d7f162dfd2aee4f1570080459d220d6c37363e337b7de31c98470d96749b69e8f74b5e1bc4f44081f304c01de50f8bcb737040ccde0ae70244156ac64f99c1d5cbb6c654b0a3b9bc1ef85da03161c8fc838348ffcc86f4bd383179da60bfbc402cbd899a43f3c641250449df850d2b325627e2d79ee755d23e2061836f629d379ec32df4c5c130e9473654598078878ead8ee0a540f577645dd003357327ed7279e31f4de32bb4589538cabcdcfedaad71e160f1ebae47b910b601ba5ebbefde0177062e90f82262b6f8cea1f0746758d45c5f16ec972651308d3efe225963eaa386ca138b82052e8d7aafdcb9289c8354cc67265c17a2d82eaac114f09ffcc3bde98a4c7bae8d4cf3a47027240c5cd222388c1490e5c336f7d8e20b8e88b07580b5eadda9d4a1288de35e1ebe0e3eb70083104d3f5b7d17d0a3a9fb445cbff0905380d5b395987e71717810e335ddee59082edd65460c840134e8089723af1c820cb46a571ba78f573794c74beb837bcf094c858b5552b4271f976ababd3111e8464cade0dc039413f948b910f21e4a2cf43c67876eff4c975a0cbd935ae13386807538110bfa369cde0ffed945672d48eded5483d535bec7185278bbc2aaea9dc5efc191b841dc7d9781db3ea177d6592c86d5bdc67e4d18c7a9a1610265c4369f6bc0908d72f7da3e193fd6f0cff9dfb2498d9cf8fc15282dcc718016398e7052076518ec4b615ac80e405d9c3720cfba93afb94add5bb257fd803eeee4ee7b0980e238ae60b178fdf95f68f3a27dfd3358caa1167d5df022419430db7d80c86fa24f2ac1e43d9e51804474d3f2016636c8e46ceb34f9c7dea152aada3e67f11d8e3c0887699682ba61b44544e42e2d511f64622285060921855ac2f57c59539bed9d599a3fa19c509f97b829a2000b69623b699cc3c73aa147695001fa17ffb489e712b912c22d44c5fe0f94a2884bdfa891f4dfb16909702e03b6f4acc961e216f2b78731d7d0b6d9594dbffad6f0446c58c6f6e4daad8bb8a24dce2fdbdfbb65d8c2b9d5c59733f04726b27b9aa32ac440c19610442a82207d85363abeb5b8ad753477b05eed5bfd71abc2259f42f12eec2a3c48711952d87a8f900c609225b0575d8c0a27490dbafe734129f87a33595ef70324085d1330009e8f670ae02f29de8f108cbfeb12b763d6ac160befce0c3825e6a516dc950d035601d7a86a498f39aa166e12d9472fec17c0431cea5d856b91d6911624295b9623bc7559475ae5ee2c7208dd42abafd25e15bb0de01f9ec0309cbed32b6f30b1b822e1b80beef9865cc0b40370d6fac8cc698d11dbde667039e1212be01f4

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