Article voting
Outline buttons in a group
View code 85293ab482a0c9af84d963c2747383d614b13aae8dc01700dc4b5d5c7a1faed00c020bf850b7438ad19a5031014a55aac64710578fe528c21263287c7a9fe9c790a54cfe71ac08b7b3a1743111f5ac3618e02e612d2e7cf9e5167ffd06241ab98ca67fc72e98c3942ce60335f607d45fe331841065fd36bfcff4063e6c747cf47ca54401f5998b86afa029aa82a578a00b0bf7b38859313c4e96065905816f89802ee512ce6bef7aaae7e6aeb7046b714374b04009b8b31128728ce8c68bdcab3c9368a88ec52a0ff35b1ccb0afe549e014ec1a33b5ac814a56f7c4430c0c553ff5832efe1e5e5b6d7ae00b0923c2c3801fa0ef9d10458ce47d23957749f49489022733fadf4044d9996ea45769fb12ed5277b7917017744120e2dc4478ca1c6413ae573bb25c6628c91ba11f1fa24595207ab4c8c9771e9215e8a9e47c16f8f7d029445e2e5856b3ced93a54ae154f5823498bd56ca72b3fc72f10a92e2728ce2a169183e21a7564b65d959b776fec0e3bfb7de5f21b114c1ebf3768aca7d3eb79d7f9a38051eab7f8ef27cf5d7c1f04ca147610663b02dfd1189ff4947f681eec41aad88fe49691392f5f08b9fff4fe27e7bb6543c8d3ab5f49b843a3cc9dffeb70daa5766f7febbb8f1103a64d1fe3f339a9e8350be9a7615fc5ac40b3668b75c5b5dc8252921322c7856ff6630011459db8a9616219f27623b64bbb260e1e70e547b2e4948bd1b75aa3159c9b790b4e1f5191e4f6834355e3a105c22a75f3e3c600551b947ec312208181e06658b8910141cc6f3fc85c210db0c0bc1a4e9f6e10c2489cc7bee7c39642177d2d436da8f477e10b80e08ab2f5070713afe47df5120ac92cbc5d36181fefcf90826977ceb75093a93d9fbbd98c84c79d56e59e3de58b78bfd094475502bdc3e8e31f9feb1bf5b5fc6fd71372b7f31ef8ad5a9b85f56e6ec4c2b8e66d35c38fb0d13dca877ac24bc71cd51424966e3da9df5ec8ef34c7f8e454bf06444051eb5199986290619c15d06a4205e1c0ce7ea2756941d5f7165a1820d95e1ffc553b23ea52bbec6d451577b6eb68a9f05ce06854f16c546a02290e41f0079d564415fbe6484844570e7208ffbf6a766a15af5d45fdee66508720c35314f9ff409c131455acc63133317a085b5b2b7f9597bc31e136bd59e2a5012e525cbef39e26a7bf2f5bcc2e4d0b7124ade1b2fb1a1dc35570545a0493a975a2ddb4e4e1ff6003332809eef3f331833ee94d6b24e9fb0f7e44ae12f73304c9980823dcae072911a9b3cb0f05beae82973301771e33d11ef5a94105843ff172831705ad00b465976094ccd9fdbf8a7298b6308b7057dd89a9483cace59c4bb56952c787cb39d6d80d0f29fbb5c50c7cbb862c2167f45ecaf6cfc00
Primary buttons
View code 0b0066eb4194fd97a568af68e98e639e2334052c3fb7299de734f22296668a4f466fe6e3f1fd58054a4f1fb495ee90a79352727d3bd976ff850c405b273433fb9ad59aa4511f69040523f4aa7ddfdf4904e7c9730d0e99785b25b975773411f28433e191023e059ef0060e844d7436455865259bae072cef7f309fabe74f4a2f8d8a4278b03fd061b2c6a63178587568a3ab223cdc4464a1a13e7f64dc181ad8d1910cb8019874ce505ee8d87a64fa1e90e08a55b840e95e1ee0734522bd9a436aefd23266a58a480d84529f7c3564a0e2f531fd4ce6b276c4a55c7ddb2b27a969ea364e410f23577f9d9725ecb5e96ac18c9ab78c8dd89fae427cd67d632412e58aea24c07b81805d844e535cfb9186280d2a2df13743ef2d2fb09ca30f65719c1b0bece0b09681a9b96545124cfb56fd902e4998730c99271cdc3cde506a11cbacfe1230cd113a32cc3a60dd35afbb1f6abddc07c572bb84953db2aa106121f8d8a05c02f7d4db844b4328dce6a0757f23c01aeb957233f10e5d1d160d6b1a34466b317975a7b245fde360bc58c3fa295aac103cdf7a10ca08b08701940cff4907dc49c57718fc78eb532d7dc60fb728678d42cbe0b689c085f4b7402491b11429588771e9ba34ebe97dba30eb5d58cb700493ec7fbdf276b43a04faf38c70a63038138863c97209c67f455402acce021b47254524493665520888adf8b39b9f69f87c826eb923bf49cdcfce4b3b30b88147009cddc07ae65a1ceea8e80bca916422b30f866a2b6890746c39b8ef2127ade8f98df59d5090831ca26c355f56694e7327c4b35141b7aa84f0749bcd55a05a2640afe19427f16e79dc665e686e7d1b7f599d88dbe0cba3e68e56e2252efede49e04f7064b31762aecb6d51458e58298958a0b59d16d8906adbd320ab88c3aad0a8f0b61d2d97be148d4b636b5bda2df471f15cb193e3e9e896b3bf463f2184d2ce4f82a330607d21c8c2fa22ecd397ad039fc33e6704fee36b5326481fae00546196dc18cf1799ddcdd2e048d38c50a4d733fd439a533d2c3eb3f4f6bbe7a9ecababf33d842ed140c0c969a26131f38ef093be86db1187e1cc5d6539a158aff9d29309cbfb4e1c60e7fcb74074264de99eb0741c35673a9fbae273a1b20d6efe85fcd2bff000bd930615b36bcce6a05882c276accf28a230203f67e6ced5e3fc7467971b1e0ad97a924ae326983fd748ab51b0249c3180fd63b354c8ec72184cbaa9964acb755f15f993fe075ec132a97a4e609c0a361ec127eab79fa9da531cc6b243dccc96e358619d946910b6ffb0e88fcee4d413835fa47d9eab869fa6ece0778006f89db7d890c6a70b56e7ccb657990afbefb39c08779da45d9b1b5141a109613724cfaf8faa825cf912
Outline buttons beside the title
View code 8dec064034e8759d84cdfb8bce7c17f07a0a324b9ce196493f8f7e1cf0e817ea25e054bd6ce4ee5b29571675b01dd354531f6f4b92c200fa2dbd1796159dca4721322006059971ea041a83987a1126a05ed8c092c14c6ec0b0086ac65d272b5b64c726c92f2d10236fa4802dd3534d5f5b817d087bef16997cbdfee9406b8a02562da7fb283710ed6d807b09acc8bdf13ce859b831bcb8002e134c590c24dbd6a1019e098b97e6f47f83635e8f63a8f34b509e8245ec274e5d86cea4a7e2db600bd94709aca8d82ce1f6f1261fe379f5adc69a569855232830bdb449bff77d11e727dfa32aaaccf7d44427a85c300b0b80fa3b3139aa4fe464ac61e9a2634c8d32e82eb37ba3ccbf874ea184164f7c305fe805ce9608e037619b6e0882eebc0214698270b29ecc9480aaf57cd5867c413933481615d5efc9c995b41410a9bdd6d73a8d38a5cc1097163f59075a590cf4b7c3728d2edeb0c938657fc2a7ba816db9c05d59327b2eaa8374ab117ccb74446966a2457ca3996247ffa57a8daafd1c8d04bab3bc213a394368f68eb8888b271852ade55dc47dc0c886cf064ff11b4be498883c4aec1059fe1e708746cd74cf6b94b6cc4f20fe82f0187c14faf1759ea6b7359a7e34c51ad1725a53323cb093ae1f1b2361d3eedf86d82d69aff9c1d2c6a72298df7f6bcf4a73119a0c0593905a1fa9ecd191a383c0ed51f384e3ec79d8e744d0952cd5a58fb91636030843971699eef6cd216ff7f5efcfa83a4b2a5b0ab1f354498be49c1835c1985e39a04bcf5933a626ce17cc0580988cf0e47172d0c9e784c8c955c64e5bf2344c4e18826e94de6d00aa4b6eb2dc74eeba5dd1b7369b22e0b67dc75db3dc40208e468f6184ced22ecdd2c2c305c1ec8606e7a22e803a2efc0126012f7f094553787ff652e9669457b6294f3d08261240db94f6f3c06a724658e31e72edb32435e98ff3c1555f6854450d79972ed23f4240f871692aec9acac2300b8fbb1d8dea283ebda46071325dde7c40c530656d792052691cfc2b95409cb43f4e7a861d39b00ca3ce63cd4900c9de9ab3bc6e82fe802c5b7be537fdab87b91ece183735bbb70b9c365b2b554ad805f9bc3c3f61dbf3e60fb7f7811d438d54104c71e2b971a4637eb3be525363b7c30604a0fb80ec49215f56b37559c56cf829669bb6c33bf031f9ff6eb6eed3ebf2078676d034923fafe675c1b6b114667714e0853a94df641e43b7360a7620d145fae3852bbc0c5a5da35832611ab873e374e7f2ec2ef6221e9fba382ce704b3e204287645f2d4c693f9625df61e28e0c5119575a8ddc0616e4306637ad03be720f45b89904167240475d4f2ac071bab4b451d04a04630f678d7ab0062d98c2d02a6b2b3216a82f1abbee0a5ce604ad87d447ff64cb5b9734f1b2c
Buttons within a card
View code c6915f4d3d00285c2c7cf545059a62f901f27c27fd920af39ebedd0bbbacdffff5b8e0fbfb5d6f57ea5f404608ba79563fb065352274898ed7e4d4668750cc8b9fc743c01836ba03aba02ec51eb80a2dea02c4abdebd4b43fc520ef437156565aa0d6c00161537758f5693d338fb9eb2097ace959398a05fd971c4444ba18c38ef1cffe7cc54add74b756804431a00840bc636918c2e6e9c89a5f714ee04e2279d2e7715bc8ec2d8ac612551fde380e233ac7d4387e1ff49a4ae9b8d0cf1f44a91d9960793fb7504011ae6b99e958eb6d49ef3bd3dbdc07c8cd395351911dac05e6c874fe1ca9e8e647c7ae3057006dfcb92f33e2e19fa5f648e62068e83c013588010f059186dc22c6faa51332c23f1be68548b15f9b742c4e6def8e55e93883288936e2bc1e0b6fdc56935fba1b1f0e61e654ab5d2100bd6541f6fd9429e8ccf2962e6928062f0f195c65b2eb4924ab196c2aa8ca3878fce2983e4ec2ab72150cad52c8f00beddab2da2113b798858dd1a4df33a3d013f885ee13e8f599e0e199b2b95c7af0dcbd6d46a14ae9dfc68edacde6e41fbec4c2bf1471b4e90ca92151af34973465b4f8fb3ecf35fccefe0f14f923598dd41884efbe57625217f7033c3c3b91a30f7c1dc6f3c5b08750db02ee6e93af164a8915262da8b1f80f344588cf4ba2594cca5381a0cfa3f6dbf92c86c2fb4d06383556a7d3191a9f79027226445beb0013138431b0f1092885838f55a50eebc64b321aaaaf365d864f0ee198d889b99ea06d6b6efe91decafd5df3e08fa28dcc9413ab335f79bdc46201142ab75571813b1dc0374bf3a981c894fcd3a1452bf26ca5daaa0e24ecc29525fb41d7d29041cf9e346f30007578b7934942fc000c3f462d998d2e9a925358b38fcd8f9b2ded6c4bac4010fe517ebef443a22901241006e9d325ac119834c8e0116f34cdf6a60ecf7462826efee67e1457fdd8653efc472dbc248d72e24ae0fafb704d57450ce416a83163162eaa9fd6a766d7e241e315099c94c59c684b2d81409a253dd3c3eacc3c43f45ae4b4b01ccf447373efabb0bd43818c89b0e4e323ede697a188339ef5b2b7de97b108a553177982f32d1802227fe0dd979903d5471662b1075eedf8fe747a118770ed276f419a1dd5dcca4d76f3c617fe82403b9ccac91b0576ca9722917db8dab7891567636a6061f10c72c68b6ed5240f491aa2e2de748129bcd7d3dd358246844445fcff976c941444eb1d8a32b48994827c8e1cafbb3c8ec0ff6c967fa7dbd78fbb646f3ecb965380cebdde194241604c96cf645115585beb719e670a118453afee5f3295c5970881ef36dfed578f4e1bab4edd960aa4c2daf74808a9c0d51440d14a0831af787ca1d91bf0e652094bbb14615c40652c6993c3e74412bb7b5e0a2c2fb5f97173e69e9e489e8086576633cc6bc33ad1c65bf4e4c60f68069294f7246066a1f5f4bee5d5cd3086f05acc8a0f605204d05d32e9e1ffdb4f66d1b9a3f2b6e3bac78b55a900b5930d5bb5e5b3ff848a630ded939d5dd649942400fbe0fbca81bb22a48a95623b31e03a7dad8782aa3c21cc08d9297e5387e85f775044dd6e5568919dcaf4fe0f31e7361f3b20f5d4925cc9800879ebc7e7857a3ba884d74d853dce9abd782a64b6e2b98fa6c44a25f92ddd294bdcae9811c0d08ee1e3b27ae64382501e1d19bf60bcca0f34b18e026dec7cbebcb49aba39fa953f9fc0fe13de9b47837d23a8cdc4b0545efcdda804855fdc0ac2d6151b35b0702f0ce69bb51bc6589989be5f9f6ba8270f7fd5532d69f1672dffbbe43c83e753fc114d30f4fc1e2d8a686e55b4e7cd8dea225b1712ca18dff8a651ec8cc986367caa87cfbcfb35da96ab8fe2075bbfcbd587674c256c1be7106e3ea03514eb38ae15b8a3bd22cd195c0a58043491d7a10e35b9eac61ba31667fc0847d8833602902d8e0a1bebd8306a7d0a074d8350077143c8a0e51c5058a15ff9d40025d8ca724c44becb414dabf72f96244061cf42891f55adcd3f7f9e213e087e6cf1b79422cbf43a7a3292a5b56c607bfeb659118c3195fa8adea946dae3e3ae0851075621c931c3e6635ec8c0037d797d1399202d99bacf8cfa0fcf16ae5dc598929dbca0bc41e5ad6a07b3ea982d00d72eca6bdaa07f1c7bde845da9e93ce5ea21530ae200a3135e4d87d9894d90b576728944fa293dadaa6d1f705ab10375e71c6eaecf8a2dd1edaa4ef5f778284167b8c73efe0a3f935eaf20a02802a58b3d830484da978c1e7c600ff3d404812dfec935a8ab021c1f1425c890c57ff9a5bb980105b99af0e47c85478c5dcd26ab87816efb825a98a9c06458267357d1d510406b26e273e93437c7e460ee81a8998fd8d9088a13e9d8286c7c9ca6d5fce3303580be15b445fdcc3b103c59ed662014e474bde93c98a4a312082d29348ed59b59678314d032c38701a241393fd03fe7e652cfe6c79a84f70
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 577cb975b6393003ed731148785764269d4198d3651c4db036f53a0ac86fcac45e70326df83f1c93a7e652f85d7fa5d4aa619fe274929c4ca2c14ac7edfbf2c562d4ea267867b8f075d8cb83164e68473ab834e101d86ba32ad2d8c571c3971a160cd738354e62d82518cb5af320dcb71a0d6337a16ded3200faf2994023e358d0dd450dd70dd2230fa1bc0404891055bb9d65693f5a1a8dc132f20f8e5065563fbef7e31f1fd317761401862f4fc385b997beda42d8d29e33f4893c37383ee432be07a1b869dd28ec0cd82a5de63a7420aceea1ed65b0b8c775da805680607425270bb77283e66442e5d1eb0328c2260788654ab2c7f92e119b188a35ff0872225e7774920e0f9e8000c505a45f3191c25c7a520b9f013fdc7fec0bd4d83bf3cc0e27ff96813db87346d5ff7cf043738fea5e0d98ec1a337510c16aef43660bad3bf11447c03e6c7e9df245427f13532c5c4645d5ff6bda7727bd1d794048c732d548056ff119dbfe72ef448d0858772b58425a3f32c2ddb23192315f6acfc821fe08fc23ed7f7be501d5a608d05e7f8bb7e17138a1bc01f8b50d2ef036363c603d649b3a6767f760992ab46ee5327756c549b4fb7a4ed313cd89721e9d783dc9caf0faf87edfd1a919158f80aea2bee1558d10734075d1026b43640f7cf9c8a20b63f815c56b0326038e82a1810ab733582964b62a4232ef0cbb613750a2628f2eb3a4d4f0f9980d309e95284aed0922b08b486fb0f6c83afdb80c5589267eb05352e8f2cf528002d8bfabbb35685ef208d22c25a3c0eea9ea8a07c3b26b0c2978640d0351ae9140bf55596ed8e94c5067af1b4960d00f122d1070e5b825362e1da5421b107cba98e832c16e314d174f70b3682430de39b80bf351854ef01e51708965517873d1e4b8c0b5c099039d03beddc2acd576db229b76ce487ccfc0558fe46acd76891b6dff5ae7b1bf1f24921fb450b84cab1786725b9ee3a1f386f4464358cc80ef8d7610ac351847195579e4a638db00e03eb548e7072b60ca161d774ea9b5feb42090849ad9a79980b02b399046e0bd8ce7db6af15a370a70ec4fb33695bd9cecc743ccd8b072fbc9692ba06080365ac5d020d76bdb5032da9a9a4869e952428cebd8b717140538ca78d8839a576b1ddc2488cc24a79d738dbe9ba7ad3e0cf4b4b2b28d12f6faa6941d09d8d8ee8f3e969fba68a12a161a56610541ec674894087f03b12ff11a059f5b1d921c202c7000fda182276c3dd5b2520f0f902f1a1bede335dedb7e253d303df43da9baa11872a6e297d2810054aaf579b02cb3c37a964ef7feaf15d383fee616b2323418ac1c7c5970477385d95340da0c79bc28d9d85b18f819ab2ee0abb210ee6dfb27f14e613fd1ca9b49b9dce545f904c98000f8aa8f8f99140eff802a3effa9005ddbef2f4557da515a8a820dc8038e642279623308ea9954ad2e51bda8ff8de50d568c92e997194cd39becddc75644448be833f88835e2dfb436261ff2d65cad623de364f7993f8b8399d68da270984eb383af1157dc616e2743d893b8733420a314f7236fdc04c49238b1ee6efbdb81ca17e8b705158575d087795f5723f6a29219e86cd4d576594da01d4f5de59c16370b69a2fcaea78fcc94c9b47eed93c754d6195655d2d6bfdd5ac0fe36950a1def052ce4513a68751880772d9c14c9958bd0e7babca2a6702b5851ae11a56104cbf53364668cfe2f0160b01d3b050fb330d8422e5232bdf15741cb017c900803d17a24769b528a9166a36adfb8cb612a8477f88964cf4cec6b9b7ca2745d8fd137f2a5ba4275ecad2e542d8eb445d59c3393866f92574898d67a1a96de9a5363b9350daf60df1829024c7b7c8ff28d76670e33e00c15de1b144c885506c4facdb64d99b8bb639ea172c032d28bb79c978b5f277ae2705e037cb6f22d1fc5a33a969a19bf5b88c54923c38093d081173d63645e3728bfa464dd2c106d3ca5e3a2a0ce4b111ebfb5e4a836b673bdaeb776dc03270609ee0b4c3d56954c405187c80c8f4817766c4c194815f95ddc08b28e284811f2e9529538f38609a6d924fde2246c35781490913e30fdfc58e02de629601a218d02464539531601dacbb318621e9f47e721b3167e9664b6489da19f3e8476b17e6413570612426eb4c07ad1aebca1d4675784614df75f6ecdccde51eb1685e7e25fce281724c4cbbb5b37e925ea25a1e0fcedef33d0f50afcf650a4ee9e8e9eb2abb44298bfa69a48abd7f800f07db7c69f719e3bb584cd5a9e23cc4251dc5f9246a7475900f9dc5f92acba7ba5dbdc0b3024a3e841f098422d9f5b3a8c08ebd90c1c138ae6f1b7c3da22574ad4745688fba6756afb8e7b466a7b14253b13d9ada82e9622638bb48ee4e6e9c7b23950967c26a333856c37d6fc4324762fe5775507d3e6c2cac7853875be46a8988ddfe95573b414a9810fd6b8156b91a467ecbeaa82cdfe8e97a8e99693547848ba2745c939438be1db788c01ddab793bd27d27d99cb0d1934cb40bc105f7f40cad38db5c90a7fffc10ec2ec884c3ccb71b88e2ec30e75321eaf2930202ad4ec111b65bfc182cce29acfc1232a499e9ccbb2f7cee56ce4b019c3a0039f5f6a3926c548d6918a3b33adfa0090e44cc9cd9b9ae3d2301c49a4df4645a403e27d2494d42c2a76dd03ae22b0549278342e5554368b4ccb72a6af9116292e3faa404bd3139df8b42a51113db51b1f084477fd1ebe13e1a58561841ed8e72ff7d62cb0f579e21ac5f7e007a3f87c9d5d7ba6379b2397b3641f35631acc77c5e83373e17d2bba371d3b9276638d429f88084dbfaeeb27f3aebe071df442e68a37d156ffad0fafb989287c7398633e70a7b6151e67ed103cb3a3df0b618d0cb0f262ecd63c93327ab78b24470391818cb95b730f19360597fe714e63da18d10cef3ca9cfb013e44f60886053c7771034feb3fc377027d22d16f42f643decc6b4554d9fd248f5785e9676b006f4643c03e9bca8fc400b18a621b710e4662cc3bb3ca38e7719a1e1bff1f0ee6782a0d1982229d6c41413e205e8051780e6a055d50386c6f528919772fe1f8b14fd6f5ca6d8495f5e1c9182f7c8618b06615f9ba2034c5b69b4a4d69322b9609c63d89e64e2722fe8cfdc655f6c0916d18d7c9df5d5f643459d0fcd4b33e938553308c0d2432e384e6dbd6ff7801cc981282ed29f22ae1cb09d6e5c8bcbd4f89ec95b640cc31f12a895851c36495068152e8f73475c6fc7be56e7d260da816559a5c121de0b060e95df74f8617dff2f8e17fd08fd96aa090dc6880239f4c4938c652bca2188597d7cc97a35ed12272c2f7373563d3eb5990f34dbb40995796e748e3b98d9837cc7c09a57bbd97f28e00f358bed7d69518f70d4521ea517272365fa188aae78bfae003a774ec0e0e206328f6ca13f3d82114d1bc6e352b5022e841f08e15c104dd0166bafc373840b488b119ee75836677779d8d4eab9a4d4eaa81f789d9a6edb5e728d9173ddea6e02e1b6143ca6369d495997fa1ba7c11a1da945aacf139faabf5d8c356f82d051bd4d7759be04d2962da403f027d434453a30f9e24f09c9d1323010523a95232386aad62fa9a5c7ca429aa62d30c175aabebe9743cc25bd3b5496b428d17fdb329c51d6ee1cdd5eebf64790e3beb582d24c74dce7bd0a7fa0bae1f81c995434891bd30fb1ebf4a35b195acd1e6116b57346fd4a97e30f327123245b725b46855c38d2f46989c67d8b0c11504c0fdc0109a0c1a46fddee43bcee9a013f634d65ed003f1de7619ac47eb6fe9f80b4a3d1c25254fec37c9d576714751381534998541e2102d954c52c20aa1d7b7e89f589eb0474a8441469338b474da915acbd9d3e4e5401eaad5df1a3ec2ffaf8b3d172b4e7fc9b345e743df7702b66bfc8e69216b24ec7c7fd0c0bb1999f4f0023170ab12d0cbd31ddfaf7380a45ead650842d694d0310fd0ec8774175b69ced1d0ae445490f25faf0609a7b6a504e49fe1c53b3dca31a079fd1cc19138ea7d2b21844d718254ad1b49005461ebc4257001f749fb3fc39ba762046a13042fc2eff8b3b1b9f434138f5219090e050203dfc912ccb5491f7812ea2070c3aa52ccf1095d77b2425cbea9b43fb1ce29be93e35cbe444aa136e0648e70fe6e395d716bea9af195296f188113503dbef3d9da874ac2d1326d7b1c44149f273dc270b3803fc6f376728cea6def7af3e8b5c68c6a4daf9f8c2a4d1ba0583be4e64056551d8c0879f43fc949239d97298659a88a9109b76f3cd53a2649132725f4c878ac779da8a3d723503b9314
Outline buttons with colored icons
View code 6a8d7b24004707c299ffe17c7dad3b8e70227f6f864f78f34988dcace94149f002d9eb892d34a6bc67e5835b1dff8b31a9808167a26917429fb2aec9e0d556866e7026e6c4928b41c7a916e1dec980b1c126cf29c5f92f667b02f0ff1d3d758942c158b0e02dd9128f6b7c085221440476bb3b43c7e70e3f5e54ebc7bda7339a4c1041cc5bdc9069f879d6dacf70aa11cd1c9b4aeccf02d6323000746afbf57d34d4535e6e2243e5695f4c91e908c3f1a820d8163e7ff6934b44dd8b254310e85453d370fc1ed9f8cb28188fc625e6701e56a61df5d104540b16d8502da712ad1463855474a8334b84242e0c0578b715b9ffdecffc1c458c27ec4de2594ba3ac0b075d8402b4d23c50b06f5bce488d156601c5004d5f91f5efaa91bf0dd1922f33040049ac48ed21f53d2433482dfab7be24b2606c660e5c668b4d683ef7e1d80af02a28033745394b2a383a0cb8b788d23eec0aab49c3061db2fc0bff3a31bb105b3526fdea5a07f0c7502adca7dc071a72fa90c65340492d20e95f85b8b229d9293516187c538935d6a30cb3b282c1ff53d2b5f4126e0f2730264a7270a0a1c83b5c0a72edde83659f20359292b1aa6f68f67d7f08e34e9cdc0ca09d2fd7128f2b77dda8c5e9237faaf0818a5ada8f125eeb283e4bff0f2f400b2a58ac541602b0906dca756c24f1de5adae5ae0ccbc35dad89caf66908cbd68609f1a6f0dcf0941c84e2dfbf11dba99389c870248dc07f2c5716710cf2bd7087e2418230d5ae95206dd07a1ae4889c866b4852dda866f31e5b1fd45bd9a040763039efdd66efb77dbed3c5b4595fe63423814a3acf34dd0ab11e245129433be1b3b0860c0b75b5ef81d12f5620dc9a5bc39985e51121fd8249f702ecf47fe02b4a8290b7606972c3ac3430d7c6a9b7d51de5891faba735765fd6aec4595554f3caddf99728acc0f225289617c59018926f7f37be2ff3e0312457abb1290ad7347a50a621bb98b4256255820eacdc77728e1a2582e1c0f8a70a4ec1146416d1588f214ecb757502bad35c44f5090786d90be351ccc41641895a19fe39b3cfeaa0697770fb976416cf37e767e2d740cd7054dbee77165572fa91194b3b062bb48795332d3108a999755de784c13ab3a9a6291341b62f7fdcd6e625fd27fa83d72976fd8744d44ed084b9b8ef6f28a7c30a544d793a1da8b52738064b44d44dc6f0061d22ebe98c4af33f9d566770221fd1025e05c3f654bd45c70640065d9755f9bd5246887debf8341c2a6e19159f42466d3f23a054c5519ec021864e7ddef7f4e873134cab8d9b0a6fbc5517335bf71aaa79b6dd770be347346c41803853da814cb538edd62cfe991cf1420c8889cd6a4740850da6f46e5b2c996467c84f1727757e9513001ae7af2de54a1afbb6e80a9f78f19df2f303112d9e71936bd3f42942cbac1a4c98a10f3e0e4cb6e3aeef7bc2a5936639d2f5889094917c8301eca2de1810e17cbc19a515263c6a9e65e8e21e0d67d89b69b3a4d37c2d24c2d27cdf5d2f10671f2e52e45f6b5b109f863df7def922c08a842d18ee905942d665448f87244d23c86bf588bef6588bb789c3f6422a00508d902e4981be67f0fb4c2eb1ea1540807a3ee48bff9ffe2ffd22db931c6df8ee5db6366a0d82c4856595ac9a70bd9290e1d719dfce9c9161aea4ab105a2f81ecc7bb7c36b9912670bfa67f9c63d59567d847e57efdb3da3de2366a02af354901af22a0b9decb1adf40a34690ef4cb49e88b102ef11a6c0213ee129587b3efb576cd9b74c27ebf13bd48bd85cb713819fc2b1ffd2c8e5ac221867b459b3ed43dbb3eba8954e477581fd1cc2b3a03014720449fdcf7ce49f43603738008029e54a13c92960a0e088f49ee84d62b59826f7c247d1e1a0767e4358d851bff37a6af68db62af86c8e381138ca3d89ba56c7431e98b229d244c307e88afaedcdeec48ed0ec49613c0b4e49ba9b0835b92b007c6b6c7f77b30f2e6efdf9071b413a4cd336f52407db1a80cbab00d579fc8ae5fbb8473e7bc2ad00ca8f5540c8fc4165d1b122f4db0305a5cd68b8111f96e993a7b14d9c6935c38c8c7c73288ddb659dee40b6da80b8adbea00ea39cd3bfaea971a90b16088132d42f2c841b17e1de7829a0134d042ef763dd462d6939b862be3e19df3eb00708b67fa2a00bd0de135daa2216dcd8c7b798c6d42ab66f417c0b159257ff82bc6930dde3d0419bd848bef05ca9594094d191b92842213570a4f86ad2ddc75642cd5ac7732e621c54dccc60d4e8852080ce732b3360426fea8c360d44be154ec915c780f09a6c3e6e1ca55a49f144b9c9c6cc2f7cdea21443cb4ba1ec589832fcdb89e63b01fec63afd315caa0bb1a0543c24102f012c720e35d2e066bf9e64877f7e6e628e56e663348ec616ecc63fd326615bd513b44f0cb5f7f7d3a04771d59d62092b7386b5454997cad166d856ce15ccf645ac043a7eb2cea0ad43dc9cf745e492b7e05e9de1511ac08b39fdc1a158cdc1b4a251805b0259a776aeadefa00944f8705a2c01b287a3c8e4aee6204d64d123a6580474b2aebcb52699683f3d97894beb10bef0c0b638708c79b46bd628f06b96419d57d78f797ad8606b1affa1dc386a32b878d1b99c5d1295e475e8704205436e4604af95971503745b61ef5f851e531750296690ff07a3
Article buttons with emojis
View code 05c34ea38f9a951084684e9d77d64f6946bd09132df5dc04de40270222a8e4a8c0acd30c2d6280e697f3253b8dcba0ef99834e55e40decdfb3d979324b9bbb32530e5126c03664b8c4f2588d88cd63d5fb2b41a4ab821d3eb45e7bda0d9fbfff486436b1f891cbb4496a27fda86728a344a7e8abab2e699323d85e022ef173b874407079ce0a54622a45e9357a71ebda0be98764b2e83edb78b5faa811adf95611c051cc2bf7087f0d35fd2bdfd126a6ac7dbf2ae766c9c425b92e5b07bd53ab87dbb295e64718fa0b60157aff266075b4ec9b8fe745ec7833822a2e2e5698fcda5a3b9187ce1ab24398eb729f657232e7a1f99dd182dfe75b5b27e878ea04bab5970a33221f475916a18a6f02ff1db121b54e29893bb1408f28e14c1f55ab72b7b737f7dd3fde8cc6a27ecfac3b3d94ce45086d64f6cd3239defafac2c6b00f0c2ffc7017ce25d8cc4663ee0bfcf764a1fee2c865a93f07b634d9c14e12243f26f34b8ea301469ee5451ffd166d74a448e2d9610f3ab71988aa9c128c3c30d508eacd454eeaad6f56f05af8a240bcba0498869c6531e656c101e803640390624c478ebc5f05a9bf79f4f37a378a2f54e99b64d8c3dbb971555580f8be88a818c44ef75c8509f6707f6a482597bddda10c88d7c11d07c1aa6e5b47f770e318e38882e87b176ac1303139e8ab9a89a9f4c4ff5ba24f165a969c0ed104298f93248c023d407bf326cd2006139288751ab549943d80200deee9fe73810e166cd5b9bca06a5b8bf43c686f105c771eaf476b99f2a88574ea3ec49aefc4be995396d4686ec532beb6f8ff6a6ead3e8f6619d1cf6de56b7e75b1de2f09e5927527ad309512aa93cf2e42d962124afba6342da7068b0f9d96b02cbc1c78e6389809904d9b1285b15152233c3ccca08f20506e81765d029e9e04269b54f7047d1dc12e059aee9b17846fa66712fce3e092c319f7711b3551b1c20ac041b9a29170c8c354a6932adb8cd4edbb20241ed95f4528f8691f727fb143205b81c680694e9e531183fad262385625af51ffa17050e8d5fa7c320d2f4a6c9b5bac8de3380738447878c29d20c96876cf0f319dad120cc408c636214d64737da10f055a949f9fc43ce9198af752a1f942b3a72bcf4ed6b88017355b8c71659372b1840f4f519e2a38af88f0f6b67809ecb4cc0bf685f0e53f9fe71a98e66e49a6a1987e39a27d43d2760265cef55069f865666ce7e0a52875430196b54336024c33a435e620ce2aa24156792101880af2b17dd5e8cb924f677b0c582bc6f09ab4dfb977f278b77a4f4811d7a78f046033cfb8395aaec7a6a632c534e95bc1e3357f84da647452d8cd9d17a84eb32c2132e02a7215507142c09a866bf3d473d710213696d047f1b94d0ed87203f8ff476526e5fb745dde239c05c43fc56f6cbbfb417ecb7def6d4c6362531ec1aad0e714d555a05a8842bd54427d95896fef8453693a3c34c8ba0f9eb5b7787b48c63261946d5eb991411f1d138f0ffe0a123faf15f1d59697596db8ccdb77a4d1041249e7741051719f1fb09cd28284b069756d9b5a2d32fcdd634f1adc2929ca30549f86e7ac109a3ef815f1478f69e7c7dc3c0f4b638630bd9bfd9125272fc983569234cb707ddf2a3efb1286dc06695fd99ba4ded4d25c651e282d9e635204c7234eadfc4815bccca8b3c8540f8824a1e4314754837e331b2ef352db3d5dceb37a7f5c6d1350578b85c1cda997ce20d854cabf451b91b8220a3f6cbcaea01090eccc05fc79835ad5ee7e75412bc562c7d6060c93b0161eca90dcfbbef15816197fa15ee8bf72345736e02813fa966e7cf842cd7668ffe16ff36ea2a04c2e0c931e2698358eac0e18bcf13c7291053f5de59d018bed08ee1e75462c79f0485867a59656960b5cc3caaa7bf395fec847371ffabc83ff3df6d698bb8eccb5238dfb5d63d4115013bff589959ff48a81bd1539883ab2d0f7c61b6cccc8e4a5b8166045c3188c7e6c395b809c6d69a730a1511a1831ad5ec19d4bbec1b6e2af90867fc7bbd0fe998b1e699e23a83fc13df8a2ae8faf86956533440b817a1c4f145ed1b25b112c96babd2e8bdb8471a8a533028ef55833d14871e743b7adbb02c0c96bcd450bc1548338e282fc8d77470bff1bfa75c964e3eab59b4c2d307728e36e36d27a99dc2a8d499889af6a59520d7393bcfe331a72183dd1dab1e9f25d84a9749d6f1b468cf4499316d8e123c484cbf545b648f6857dd183eb12fbd19c3c8aea5f29a1387a339ae1b53ce0dda0c6b698af0a44c665d0529cdcb14ada8bd33cfc901f8b9acd2a22d81961ae67eac683eeb43e1b3a73dc50b62d654086257274a711950f254ccc00074415348b7d4034c35fbbd138304c31a44da36ffd7b56527457d5aae01da05e6eff3807665c0b70b3cbcbd043e01218a2d230486d12debedf59774c91a15a2af7d9c2ade1fd4238c9222c37b3559461ca85f2ba730ec4423628bb9de2d06375ce791e569fcea0cdccb7dab90a13713e1fe2d9a2a6b8f61054cb0895c5236cb96365d765e5b4c4323545a5cdf7e02517a408f0ffc47ab643aba228c66754a2996d538be742490f52cc071f8a3e352ab38ca94100c53851764d43804a9decb8fcc4e325b3dc458843d1f76b8b623d7d63490b2faeccd55b65664a6de7ebe3bf5b363abc76d5aecc7a9d783f5e570d2d5b754058d2ef7e17f5370df5c41adf1f7808f8b5e4310814d1e00e794aeb8dcd890d31b817fa6853befe4c197e9e3f2f4061ee21f363021ae57ff217cd57203308cb1f5ad7f4128c9cfcb7386de6bac9ec5d827bbebf6f523ba3d00a3f99bae823a44ae20f44f9801ac120d461d5a3b22177c3e3a767882f91a0b0e856b6b03d66c33c7049d21b913be4b722fa8e7193fd7f9728c67514d23db0bc9bbe6bff687f8c221e8bc53c01415d93276258e43c3be04003471d5759c535745704ab6e3e330a166b469847e116daae9c53d649577f0ec2da7c73ebd8a45c66ff48dc7276f8689b8ca383d1f9429d91378d361c4261070ce2a86abdff531bec20f1e0c8812ac3f8546184ccf6c872d78cb96630eaf85964902e25fd85ecc75b59ca3c7986e40fef15b1ad9f0c6fc385005be4c9f374d539167a16e4236df973b94f0b6a8da4045fef1889098a118d7f9a2d9c961dd42af2f9f9626826c10b97fb5fb24a6eba1f534fd449526f6150aa86bf1a40bf3a91a27a3b9e38798c5fd78f037c39b00a37e5807b9ebd6fdd920ce925fb8aaec624f4d7a9c382485fd2b74908b393c591ec325a3b982681d74f6079bf1f46ea6783ebadcbc4389da38ef512e2716c1e2b34c0832c5711b09991cf67624112f0b4892bf490e012d51de3026628f912b59103e89f011684ead361a3d87ca09b11ec94ad975202914e559dc1311c12f576d4fc54e31548894edfc9ed09e485572133f3b9b1fec75ba64f7e1d75cd4bfa6b2d4dda352f005c6e33bc643505308ffa65b17a1e4a35870dd5955b76bf89d786d6c513470c0db0d1a8f6d87d93faab15f2b03d02e63125fc122c017120d03ed66c0706b0ebfb26ac3f2ce94b5a8d203bf9dfcab251ffcd07dfc05312ef6ad0ce58abab6a4717aa3dcb1d0eefec0f83245908fcfc4de3f386be2300a62dda264eb3e59840dff2446f2842217ef2e976af104bb2555a5f916181227da5d3be7d8445a59928c1e2197efdb7616b38711aa61122eace936648bb616aca78f2983f06f9dd54b2d09cb857549ad36169ad13f1dc73c33434e9441458617620dd3923d1c7b6cf525892b251a40f61697890a9951d754dee81d4cf74bd8005a3fb75a3606fd9ef1036cea5868abe270ba32e710b210dad5ffc32a09d16c02fa0cb5d3658496fb91f00fc763b1456a1b0c90cca7db8d7df4f88768e7a2bc0fbb382e5ad510239d84d4b406b5f7c69694211351672fa72fefd495ef55ffb6f34656f9093177b62444ec7897a3d4f05e6291223df76e3b4d05aa710460eaf9bf2da912647cb6c3a4915e85958e3337c8585cc212f52e226567cc5e218679b4dfa700682d84c332c14a5618d614f8f1c3c01a70739d0b52fe21066646d7e325353b4e6036dcf6dda098a6f3f04da283612973b90e3c92dbf14f36052f2dfe24c46cbde6434afd87912cac4e4c61278e86f59ccf3f6e0a13df3ed566e5db81bb10f7a669b1e171a135f38f91cef3b38977cad9255fdc58aacc975af4dd6fa33b4ecd864016140b1492354e50f3f27e8b60773a38175fa74dd256f351c0795ad8d016c50db56f9581ec7d788494dedf762f0f8415220cb50e28855b6412dff8dea69107fbef818445db3aaad280e65523deccc958039e6cf478ad24cb83de7c058dbadcf1aaf1d73a7b3da7197e37bb4a9c678b31fdded3bc07aede53a6276359b0483ce19cf1f963c3ef948c81625fbb7b8ed6ad61778f352b2d098f3db3da51f64db091b04653daace1aa307fc30644e95eee8f357446fd9f92dc3746f13c0804c837e53dd851c696b183660f4bd6aae4db96062e20fbbf607d2bc3f099f9d0fc7dd591c20cc661c18b6eb5e147c86b32e299ec17d837282670be3bc911a997b545a3c667fe2d00d1c7487143ad1c9ae8438fff41bf60f376a4e3001ff4b80a02aabbdeed1b33763ae26efb857bce2709084564c5bcac7cbe08631e3568db9674e213ed82fe64cd2adc8e826e3c3508d766a00a8536bc22a1d8a2f231a13e1e4026426213fcd9e567afd346ea3705828bac1bd7d25b64338a52c88f1cf466fa78c7d0a88bb4c8ac34e336c7691181a37bc14c4f9e652c2cc44a3ecf59135d8faeefee6887e20aad831423a196c77abd7d8308093a647a4433848cc903bb25bc601ac7f191efd3f340ceac44e4feaaf5391749764316c39fea267f95028f621c54ce70a924a7743763424a7a182e5216bb94b98cbea5643681325813adf716a34784a187718a9bdad02d1783435fca79c7fa424e3ec674c475ebc88afdaae0cf3ccc1a602920921288a9451a2c64f4247c1780c6bf43db7d98ee96614117d72d66dd3661ca8970b795b6c458ecfdefc8cb14e11207782befa4d0392b08675b6c9210a8b6b0ea9d5ebdf8840e8d8a303116ee1696e444e379f88b54388545a54b62b9d71158f9ac78b1de46ebc608b28cdcc18db326234d2e3d1e49648c4f57e5b144bf253f65e32bd964fc585d3fee75bd4ef33a2fb012d3a62bd9b640d0701b283e9f53edf9253a627597f33d1ff50ee0404d6cfb2fe1ec4e5c30d1b44e2d542be4cefce6199f4b33ff5f2252f429cd21eda7bb9e7fac71021c6dae9d3146044b0b6ba3facd480f886b8a103fc8cad8f65f194dc59d36c9c9fecdc94151647431bd0097a7999268a5220aedd90d9eb063e84fb8abb67b26e10968c89f9bcfec3d427e062f2ff594c5bc3aa8ecdba91be51db1618d17938a3ca2badee73b96f419a3f5bf2c908b09b92965149b7ef57d6bd1e49beb6afaff434fb0fa40cf369bb5110c2d86ca8a2e6a5194de21b9522d288b1d928a736cf3d48c3368daceca60483a373a2714777e1e83ac1e16eeb156f14caf32a5b3ca3c3ff136c37e2327e63e52ad5d93082115c668633df317d33844be20c15acd33573e7eb9785c24d2090112630810a4472fe7b62ed6a3cf0f74cd98bd7dcd9b88b3ed15899e6031821e02177759e58b98c0d8a346770ec8921466ee0c7a4516b6f25a5994997c5201f32c8c53bf932c9b4df021d373ac250c2e3ea9a0d226f56889d70ac7dd4194701f46e838ee9122fec346a9e50ba6e08f222fc260ea3013942da68c32eac9b523cc479649d85f92a7b1e37e1ef419b8d7f3ed535e945ce35e4fe32224a0d61d4e75a05e3d0f88ddf455e454c8245941641f89480241f007d183abb4b7c8860caecb61051090a1229a1e17f29bd8b85ff95565a56d414ca436bd29f3206ca5bebc80d26c4f2ade2d3377080a289d929c0e77068b4eeea3a68d4df095317cf3e8dfb90d1eda3b46e4db2b3611ff4a1df076fe511f5b9b22243462a739619b721cacef5e2f9a5043e83f36cddda7d1c65d2a9989ba07357ef657e1b9f04f60e82eeccbec7e53e199ddd6ac6f91de5df3d5fa7eaefa416b685ff80fe150b71e1ccbae8365f5942e3fc1d243c7db3ca8a33107fc641b9c42795389942a6bd1f41a7d0406ed030339fe4d6810a8fd2f76ba56b6a1703a7b56cf7632ef76c74522f8de77868d10bbe0318e630bde5146c0bd8a8a51202879bcafb43b62da1646bdf3ac1d1057557b2ed9248cf9f03a566d5d24c9e7a1d827ad8825decf89935a3d71f3a709d87240efa5639029112d73f0a12ae5778768c164da967a00b3394002a26e1535168ec9c5bd591b2cbdfd951f382d185c16f572fe7bfc1278022d6ff2659c57f0ed34ada901f7cad646b7ee456f88f810f5e848b37559ba4df201dc50174e82b946a10f170ebca9e2e7d4231454bdf9ec97d2aeebf32310f9288731e19a2c8b42f68c620ad81df09d909ef9d8c6795fa0a982c53b51cf7273c394463ac03727f1d5117c6ed7f2ab2c8a9762a1f10ec7d0bc750601a6ea8ddf6b9de6fdfca59d55547d272e9152d34e86f4e5cf0ee8e5f09055ebb54ce6589c3bbbc4f428052bff3991540031a2b3149ddbda349d35344bb9964c503f7f704215cad37ce89d6426038e34c07aa916a1ed18500eeb88d4f48ae3828597e52cda91d857d0102dbbac057827655cefa5aec86c3556a74117a05eb985cb17a0c5bf7940671fad76e4dcc21c8ae18aa556bb95263fe8917b4e7d56f7828f5015c221b684d81d06a3f9aa78a8c2cf5cad36f52b94799e38f4c3aa7f4600631612ac3ede13d80da761114c290163fd2c305317b9563064341d82bd5fb5e2df937a0c1bb5d46eb047adfc7692ff3044146c627cb0b24770070dbc18b89e2d94df0176ca9051487cb1016b6b3785eb63e9d385576f05af0bf07825a3332bfbf9acc5a6e3c380404f32077fc41fe1e320cfb7f6308388bbbe735743c1f1cf3c1cf54ccde1b25b0b29a8053e56864cdca27c81912c07fe2e612f36c658879a3b90a1a183eb30bd26afd3db3be87d39e1b8d926bc16d7570b42a5d03b655f7ad65468697edbdb80002cc698e0e7a4b90e44ced355803b6f24d3829b33a516f6f2f906fc693f17dd0fe554d4d54bd3249eb5fd6a3febce3bc5baab49f6384c0078b3e7a2726803f3e1a99e19cfa0bc267af2a5ce8be321ca9f4392c196f9911c608d30ec3bfc96bddfac5e50621710c1ee3d98a864ad48b614d96c6224bcfcb0e9e58c48a73f371f938872f776044c5f14b2e2a8c3c2e6282f87009b30b69a0a96ec73e12c9135d8aa78cb938cd1d0d49cb04b2b2b897a26319e326d07d20c8139957afbb5df6f100562447151f4a1eae55adf0fc93c92264b8091ce62cf055b45e37123d7149bbc0eec2e7e82b484e5057defa3cf0174c432d02c8d6ae72bd3b48ce8731de54bb56cce51429d1a4c48f14d13abfbc18d9c23239b3e0a979c0346efa8fb94a66c6d9744e0134d40495ce355f77538bf2f8db7de11ca32852bcefc407f6ad9ad8f19b438a483c83825bcdecc9315c49e22dd0efa4fd5100253f82bf2ab3189e98fffc8adf024cc1171a0c4423314e74472a583c5b85cd70e25fc881f6d0079952d77cb206d24888a278f1c4289753af8789539620328a83535ab990c4a2642b5bd91877c7c448be27b3795236057aabf073c9d69e4ab654b010f9268edde63acc3c881dde7d6e9a6288783ef6a8c8318021ed4e2e8cd9ed45e635bebef0b201a085e370ad7350b4fa0d8286c15c793a694f2413498377ff48932145ccd5f5b431cccedcce3fb1bb00a29ebfbaac1cad0a7ac46671f83e631605b16fb71b489a53f07125ff5f0ab178d5624ceeff72ca9c96bbf29f796a92a4052f69d8a864000f2260e0c676d4d9c1aee2824e82f435b9d74a85d65e9b7499a65dbe790bf9bddf8ae997075b8425898c8de2045c97b085f917ef4fe9b5fa1c7ac9d6c5fa9d5c58fa095f314e5ed1581d75b6a37a512186ec18481b270ca1629db53ce95381872ae8e3f7666a6044d3357b24f5dc34e1363824a1f98c7c57d1b5bf5378899a965e7a556394d72deac257bff8e68c9fd0a4c0dedcd4b76e4fdb031ce404e5a3c46fb8da7d7258620398a454a7a938d3298ae546cbe4e8ef9c8b0beef4a4c6180c72a646254ef617c7aa5439df3386b8a03b152c6784665244fde5dab0382736c3c86e49a47f069674cdbe73ffb6efb9db31ae854de155b938270c07448921269a742e35dd41cd9e98a8aeca1bca5e9004209177af71fa1cfae1fd037523dc22d9e25a8e7eeda6d77c8f006864a54cebfbfb803358edf65f35275fe97d31a450cf6bfdab672219aa12aeb7171a22c1a682124bbe64b787ef5f8f959685c23e951a8d918ddd3bdce77ce43b6656ff0b60fd55487aeccf6ce61cb6ca94c85848ed8bf87585e594c6534f644c8f4629a59e472dd1b9e1b4a9ce39e6ce8f6bd8508b1d7c185bb74cd97c4efddad014a5a0bdf77c54da7375855a6c625a8a410c53beec781238a4a85402c227da59a7817020d69dd213ff455fbee4e0db3852d5825e938de81e0fdf1871d54a850f636d3cffd131b7550b78bf8cba596b09fe5a21643398d9fcd799590e119f99241b0171f48cec610de9cce4d91d25c38f50d22d28a19559c2c8850e9b9a536d799f4bc67d5c91c5b28be0525af03e0a8c1f1f04c2101fc893f7dc3f541e6657a019dbae352c899c94e0004c2252a7c73e1ce5b1d3a4511fa887132f0a96b28d8ae5089c8a9950cef0aef3f5d23f259d982eedd925270a15a124b985445899e813c3ebe7929621a5c368f75b2180a1c449ba0ca02fb6f6424e6289969ae0522ede3f51f8f0924c4f6bea088ab0011c8b6921ff6a6b677d7c67ea4e03664c62ec8ecbaea60e3a48e68d34bff2cb0477b93ace6cdc161c42bf10f59b824155e6ae97ecae31e06da92fd878a413291351853241b8a1412737cc531b0211fe3d127a5d38f43053972b5dd37a06df03cd00241fb33da990a4b8e0da32f00f894c977c9b0161cd3bad28404993a853e4b20281d3ab1d12db6bf7311c5f97f963cc996ac90902fade2073eaad0092bbaf28ca1d812b7096f6a2a12c40d8c5bcecfdafb538085f2d29458746f96bae51adb16eec15bd698a706e830979af71089dec894e8868041bae9b23a45324d12b33035f19aeb5de5aeda674ca1f0c6a854b1dab271b04aa80f6eb95adc3a4667e84dc3aa1ee759d42541bc3f06fed70b8dc738aab223cea67346b71dc9f5a46bfec67d37d2b803fe260f433f1fa6736c1855bf19fa6a75d8a846bdbf09ce9736cdd517a79a6bfd3a1930a375c2ff73bd56ed9ce26f8c08baa2c8b46462487cde89a2d7de4cfcf4fc571db78d99cd32b3cd7a3f56c9d7c4a658b052a373dd281d7464a9c364082023c2c002792034d4f3a2f6b61cdcea9f1d9cfeb1ea0d312a3a6add8eb239f4f54701c588cd456f4f3979aa64591f7627e9b4b47ebf492525a631bdbdf2565f9286f93e3dffc4b9442e7d752172c055a1346abc9023c0fcff65fee24763efebb23794317466101bcc49bedbcdedb23c93781e842894deb6fecafc3e80fa5f21ad044b002c5da51a3dad5ee6fa5f0fae2c69bd72bbdc1df26f45910b351e460d231b12810f62efc10c2eb3b39597f04f3f35b886b1a69b56aad492a8de9dcaf61fc5318a4edfe64ccea17b4c758f14a7fb6294a1b891ef356778534eb9639f4747078898d31825a7bec59d72dda5fd58c727e33faab61b7eafe66059357496fd5423c0adbac0edd153b7223956eab913b82e3d0576b66559014be1161396285f3e1ce22778c720be00e1be8c16dfa7e5163957ce909bf566aa466fe8f725ee79f80a9f6644c2f134af844492013edd99c1b22a14bee3854174adcf2e209103707396c4f2ad510302369006a118d9316a36be08d649ef21edd07de590f3f9a8bae90fcc5abb1981b653dd15d4c89b1ceecac16f93cac74e6e6beaa02cfb36ebf3d4a0a6a9b599bd1bd626eb0134fa9907e93dd2fb2bbc4c4423597e15a71d80406b0f3561b189d2d1f0ba6d15f8d820577d761d93f1b31f07191bbc4a151b0e70dae50f6b154c4a90ee048e5436418b63eb35b0724f8c93f7a9f97cda2e0c291b5e4ffc0d02b0b5395cced6373b0254fe8c9f83e8c34dce6e83569728d5c0f9f391d1967275bad5381d15670b81e76fcb00dfe2e2f891a058ca06e72c9a2cc1dbcebcba038bd806a2707e2ed72b164e58df7439feb10b2cafdb890222065d1ede07b7d1ea738e648eca04a61d609021e612816f5146e7d7c92eb93531402a2712b7813bdfd4357474d2219713567b543d453346a7d6b8a685ae6ef071851765ab02b2bda09cf044d7003554168b6ec7caeb74eb39efcb0c1c72a790d6031bec0674f39c984aaa04bc34b87d90ccb47e553dfc5ed12c5b1f7ddfa69d7312339f71c432cffc0ce81b5edafc099e94a50c474f6fb255417c0c44cc8317ebc56b05bd7cd2b8cb4df0836cade1e37df802d04a355afb253f21fe88c4f15bbfa3f8ebe0b5ca944b5e97e0c9167515acfc7129afbf6cf3468c4ba8318689259acd4d0a642b8106d5d9a64ec61b25bafd35f66dcd3193ea8f1f78365ceace0231a292cfe02a97c7dfb86953fa9a921602dff3b3c1500cc2dbcfc5f863de7e9a2711b2da073decfe6a29b0d880cb20cff524afb4cc1d45b2c6c0f8e779012f6af76f288ea62ac339f4b7ddfa6566c8f4df39355d7b6bd521ddbf58ba70c37c41c4cf815a5483475c041989b7d27beeaa2afbdf380f4c3ea5b24d20a2d4a11dd87bc3d2cc082a28b0445021ee8c49d3eb77a170bb46d9b390b17b79a0f7e4317a3faf9e578efa251890090629611ff4c10db0ab270ae93b769deef6736c69da531c739281c79b879d21422c5020c62b3faccfa0e05195e25c652da2655c1701d4d50f6af0daf3edbc09d0fe92b0117d4165056225401cecdc1259ab8e1dd9fb6640ec53e0c637532f3d3af07c6b981d267f9c327aa3704ef53c74b5a1fefc4bf9e7a3de3d38b58ff6b110494770840bf74eac5a0f375113de57a4bb7b6e0753fef997791902fd31844dad22e15a536032571a342725ff9bcbfddd13997b1afbc877c7aaea9368da7d8106785625f70f0823fd232c7317864a08d6f08b3a682dd8f6a1e063d1c131f9a9b935e1921fc915b352721760278ac81b4c5cbf92ad412e5afad9e2054ae587beb7630a1ad66dccd8d0e4e4da4222aad2d5ab52d77d1f270c4761c7f1222c4627f6e9bd47d90245b812f1b165f608e84023c55cfebaf49acd9b1d59be41a4c777cdef2c24c607e3ccfa401ca18ae7415c6990762fa0f29cb355fe43a78220de161a3007dfcb5e9539fbe766faf47e67e69b24f96d497adf642ac1a04061a47ef3f5159b226f8588978e63acb7387f8636c3fd05a0e114bee35f302319cdeee98cc2fced0c31ccac699769bf951199524dd9a35d7a341c0fb6344f1f8b9d42eda35c9de12
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 0d5856f0273ac6e43d37d18456a19dfda7c94fa50e6860b77fd57b2564462c2d17354f22936783c57f03a7008378f4879be8cf07fbcc8767bb7f5417f4f0507278e73ff52210543266701236bf66421eda36e5943c4a3d713510a7942954bedac6629edb5780ff46e6a2fad1148e3910e5ea25a7534feea2bb9deb9cdc8891e7671c690153e2611a95c66d1a1a83c378fdd26104985f4f082c89366cef1988cc28f18537633a43ef2417ebe2c5d9d107ca46300320d8f3c3e4448bb9357c78f38bfa9ba0b36f208b36b5171424cf3532e3b3d12d35566ec36fe344ea65bc0854388b440f0713bde1b99bdd5c9e1482cc850bec4fade22904a5e61a7fd6702180f0e875f9ce4e990d1ebe3137c9d9b80c0b3dbdf3526e0a7081978454988cde997645f24cadad4673e20ae77b41e619fbfd8c392a10113fac98dc475f5c358523e8acd201973369b7850728b4e9dbdf4426bca04343ca7735a0252b04cc924d2b8e082c4c9ac7d1c2305ce7a3c906ee34febfbbc9e28a3854c065d232c41642ed833a48ae34868f56e00a734d834889b0d3560975e0ccfff2b7678feb92b325d06448ba2e8173089a795f6bc26f581e6bb8f88addd191fac37deace540a81dc397699a520082f129263bd5c7c9594fb96fd22b510379dc33bf4ca437bccf6505504aa93ce175895f547dc6cd1a81c8d24d32c1880e833ba9c65b0d55eeae9de33730ee69f727e1abc3ba020b858da46c50058e1d2f61c64f8f6feee150b6039084b94a257ebd210f760f0bbab7589b5cec51ed7f8571cb2de086dc81040d0fe5fec61dc89f9e8ee0f1f70d4ef12a608decf8ae933c6fa6dd8e6e2d0d106046afa5192aafb36d867279ada5ca3ffb631836fd12b0e2c5b8980644327d75582d2a5237c9773c906ec7c7f1f210ae34b098104c4835a8ce7db1f4e515ac2509a0666a4e74bc08955b3e64f28f91bd33fbf6bfdc0fdbe6527a661949dc53b488133fd553a1ee613b934cd757601743474ab179ccf512e0d34c69c52dda300809c181855465bd78884a4f1af5aec6b7b383f486d0b3f6078226837f43afb662deaebd075a6f20baf5a8eedf5c19136e28af1b28ab4227d558a73a54cc03f3ee92252e1f7d0c67b3369977020852c31ea7573e62773d8f88d1087c482b56aacfa2e05a1c615690ba26e63fbf40aa38ce22ff1197c0bf79927aaabf370c4c05baa73479f73dd5e1cf8b9dcba5e69fd744d8e4bd7ad3cf5cb5301687eb91241f73f49ed8aac3a6f14f8b98135cd03c0e1aaf65ed686a9a135d318a26bda9875e3002622db5ba105e47c49bb8677cc865d7429cae2baaf4b2f544d78f574a357c50d22e97e045210d4816b741e57278d983de6d38494fdb8d045e3ba22e273cc8d1c00efc66b800db6a12e8b0d3adf03805744feb5023a7b69a921b1b8ef7df7d4033b85634f2f2ab9ccd9c8f07189dca3875a81974c38097c85907e59118561828946185946ead4e714eb6e8d659c4a8d24c2808512b976206411cc5abc6c427b29a700ac9ec1503b17d3c008cadd1ed3dbda40bf6684b5bbfe839ea51abc92fd09c38252bad231f6dd70b344f2b2c91e9a9923a44c349c6d87ff6d6ee6f8b5c6286f8a70288a593eb5fcf7f37d280a6f87946d2dfa7193ecaa789094b95da2a56469b0f4eb59a6cc3b485f07618bff2200332c334c05187d428ee4fa6aac46b1cee389a1b9a4727bc8762a86a66a5d96bc03544c0b31c6a903e89d92fd09dd106264f5956d2044cdb0ffba4d10981e1c1f1b77f1b78f0815bc395c33873c3f5c6209130e9251677a741788d32283ec2f99305b716bd8c8649ac36f469a45b4bdcc0bc8e7131a5b19e28da310af48f417334cfa7eeb1d4044021e0b38acc84737413d60e08309507949fe16c4d6f6b719c39f443206a2f246c275833cf34dd557e51b9b1404429e3b0b16578c7e9c21e2ee5c71303c582331012037834d67b2696aa92f2605eee912339b2a35583cb5d0f33d4eb555ae0756ba2c82999be2bdfe3f4a41b43afed44f8daab5557ccf1f83c4e2bf33fb96d31e2d740459df8f6c40cd2760647f98156c7bf19f296d547e944c0b73be8bb1585e44f5f40f1a5310011fca502d623f5d8c721c9b7305408b4e055a25c51846e526e211b573a4f5599bb44e58e69714f8f190da498f8299f6a6ac0f2e15dfd082595ad3d1a16868107a4d253c89e4c92e6f2f8bf9f2b7612169672fbf20e9ad048b458a8bd15b79ed4204d60426c10f6d170032bf3cd34d3910196af1ec2ca751a4f5a626f2a84bee9f11aec29cfc911cde383f45c2595c7dc49ec6b5c1
Post voting
Simple post voting buttons
View code f5a2a1a9a7cf6a633318a0158af42204b5529415736fee3eb78e036b20522ad8a0e6251866511b159f0eaac0987fac86b8fe4910fdcfeca776a0c8441d35f4abde89117fd8a1dc11c2520c38c58d481f3369502ad0a601d4cabac21a4fbea38edcc571c00aaadf20a285af015e8ba575c6455f1663a7d694ce0bc84aa8db554d4c7332f07248736a610a9afbc43c0d09cbb153d3b35d9ff6cff6bded9c008fad4bad05a92de9869c7c44e6b15b876a92dbc41116220dfdd91bfd2c8396e2f573aa5a01e711f2e60c5ede6298e287e3b5ba2e4117746bc21347d2597e5d5b1ca0227ee7b69ce22a3e6da9e48d4c64d644fd2f847e809c704aeb725d1eae750930860814e6105aece0b945067c69d351c7b20fcef8063352fb41afb2d0620c249205d8c229105c51cfd11d7dc1143821eb58b07837f66467781b17b855787953775acef0b7ce103e3727434bde68ac77d0cdb776990f0d573e005942eef9d9612889467e765fd946fcdfc485493d14dbb58725c230e11217c6b372b9393a0170a579fa7de3b9602c0ffe3feeb51f9423cd08cca5396e861b04bd12cdab76718513a93c4c32ce0e66246d8912f60621f8fea3ce1a6c40370d59f4dfa8bf3d2063272abf6613a7e5b1cd7868102a508d26837251d5d069686dd737a95121380eee6e300bfa9a4bdafa89661b5247f0abfe854bf8e262501b92ebb3c86512953e7c3f17410fd5f9cecffc66f3fd7aa23fbb8b3d2725336ee516ba030b909aa7b53db216d75d20d050c313441c26d54a9f0fae271c3c1785bc5780cf2bba6ffc1b931d7c12bedf5c1a89e9ae5c67decb92cad40b8315274fbcd1d80c8ffd52bb5d15eeede1bdff918f573d30d218a583a8eb8e2dfe74455c585cb3034e59870f298c0793b3b38367d304f2f38973f491f469200b919da9dc37e7dad81a106e6ae066418df5616f1b24bcaf7ba58d54807c640e7104c34dcb8e3d9622db3e715a9966207ae622beee26cf1bcef1d134a2db7635643736d3fb4691ae3584d02e3a73e1eb0828df01032906c4e6731c964c6a71d03f73f6c58fadf733b0fcff083fccf1500d33e31029f3f26e15ab47e1415f33eff0d011f4d3624dacd1d1419085ce3329f6a533f1584b8af3c03064b2ba3df833e4b90d4bedf00dd2f3786cd42ecbc726f9f4f768c50bbfdf48f0b3bb02e4ee6d5660046745feb7543b7a9e0b1867aef0319a3452dd7194e2a998826aeb8fe47503e7a2802e4ca5e731d2cad38c2cb75eefb07d2119296f42e4dbbba38e92e61a645ba69ea083a8d6467321e6eb4240db8dbca606307f920053b04edf6e49dee0a8e57ceda96b7b75b2906e9ad3807fbdccb331a9c7fce68141c843e3809da494bb64edc07cb22ab58927cd7ede6032b70eac8d6ec10d5945aa7aadd684a7ba14b7ee5dde4168dc1528cc4bf07c8e2ca9b3bfcf20a61804b86973082b928542d40e10974d6dd14956538c680848f5d83c3ee5078cf49a232981d0032842971ed49236b7144e1332f3c1d3dd5d179706485d9c1d19dadbc15ac16d26272658002751fb0aa34bba030863a058088289dbc87e536cc91ee261c9ba6b26d6390655b1080bcb5928835309eb5669afa16866d52930b31fb10b2cf38537384e3c7f0c91864ae5b68997ae61bc6391ab73c1c291be7bebf996d6cfcdfc16ede31cbfeb53301bb0f91a216d9c0ed52048257d57f55521b96d795b6cc631f7ee1ba25d2024730e0c1bcece07504c1e866490e9c88813a7da14e8907eff8ba0d725ae847c9cb69ae28758277fefbad728916cf7350a7c96da8c9f4d2381bb04005dcb11f20cfe8205d726766fb066d1f2ed280e34e865bc9433e23b53e1a8da6a7aed686f5258e479648eaa978eb2329a2cb3a2b975d3c45e209ce752c6486f088ff07fead77a0fe5b93fa862c6cf3013977b91d098ed2d4f214b1e0dc27483e885109dbd602e7f5678702eabe52cdcf2c84890eeb35df586dab7d4f48a94e04c20e07df3d81dcd8556137037afca69fceed0b5929ecd17334c31addfbdacd17601537f2151bce589a957f1c1edc139d103365bb7bf4a7065beea461ab7356f54916a3c732162d77259838b09cac960ab2cfdce5efb376430023e4eb2f41893a87af0e630169441b7f995c7f533c2a23a7511cef84e
Comment vote buttons with chevron icons
View code 4e60b2d51b3e3b86a633e0be3b1b4c3b8cc7ba3d33b55cf9279716c4bf7d52568eff8790580dd3c05123698372a7140af0cd3977f749d48d3926fa7f9788ad6dd3b9ed465442d262c02cd5efa2d2c456475ff0d2edd13916f6224186abf86e02557f307a0e6f8572ffda4da8addac109469e83cc05f23563d4745d56f7de276ab7a4ca9d4f58e0fd8cbcd58cad56e02e16f104d188cc2a01d1ca8a4535906bc22bc0b895b138828842fdfa6778216b3f6e0d12b81144dc10925df9a37af77647cbbd8ec65e99bd2555eca554cc332afeaee90cd63bfcfcfcafad0074eba2886eb73cb622a39013be37c95f53541401361e9dbf02a0d9d982e25578a1a90699a22a4fbe2eb3cb917a83e796a8abf2acbdf5ad00b7058eaa15503a43b3f9ae4604e0aa5bcac61615994fab0bb6d87b40c91fe76f312a063da2ae217bb450c9a6fae72de36aa14ef6c59a05f4e7259885e2f35948b9f98e5446b9085be2f93c12f2861abc35d12b6c7758605e789c24274231437e4d8dc7a9e453f9d372b000ada8076ffecd3ffe12a76e42fa81973a123d101562f4fd10471a8d8f0bbffd1a8cbe9641c0945679f6743535ce63d440649b9cb0b84fd644f246332313b55c5586a03fa918bafbbe7f2838bfffaa8dc2c68dcdc0e9d9d3b547f4711118de2647fe860ea66d8e2262e2e357873e1ee2d6801add0c998498a5f0c02c460bf27376e3b78b64be2ab15f4b3ebc172c92f3449644ca19d2687becf6cd4e793f3681b441fa5ffd9056d3e08c8cd2f343d2206da6155a70b3631951d9053d2865f225a66703f05e9fdca80319e6a9aa042f3341e4759acd1c08582e07af5e497ee2c45307fae3b20ca3a89f04daf9d0ef5d9ee5f721098cea9fc0dcd3726063c4f874f513fe52b27f1f48b21e36409020f10427796498a09ac3944090a135711460ec9d876dc57bf2096a55b919e0a3ebad45d65b2ef9a26c9bf40c55c8f969c7d4259aac3d568f431945e5e9c943ba0e1c10e090d1c5f294ea2d5fc2bd47e705ea87889225643b88e7d8a465b1d84996791f7808d58ff75aed0131ef66d033356bc22a2fcc
Comment voting
The following patterns are intended for use with comments on both Article and Post pages.
Simple comment voting buttons
View code 38a321748b3100bf2268e16e67f17194dbb7cf0cc89331ba7b26488c81634d94a2ecb91f2205734feadfc8a88ff7a580e24e6bf584fffdf9a528838a81305c1ae94694b407fdbe59b1bb07a2cfe0bb0c02fed04160c4a22d36543355702c4e99ea44fa0d52386e999adda260977e5e55982e54ed51fccf1b5587895512b79d7dfa6b3768302c9425b36941b32c11583f5d8560f02c36cb2aa999336b6db81a617a49333d610b2c577d3125ce3b23120a968cf989586d30b19f45fad1594d5a60f80bff9e60eaf29099fcfa3f293f2e81d48ee575355d4dea9aecceeab8e71a9979dc46b23e20fd132195ccf282b4c198193b20a3a67451de26bbf61f80d873a522c3a75afdad9463adf7df7b20a7de6f988e15c36b97a7ff5ad2f9c9f39b5da238afb63ec6b51c22cef0c3e4b9a015b242c799adf7f43760bfd0f15295bb7d57a22e0033bb75804a8f3fd1e992f1d618b710fb9cd6f2dd768655fb5d0fe084272f2abd8b95db4e31cc7c97b74a19333359251b7084f1c3de784363152db64dea0d7dcee14e0c40524309c616d3455680234fcc95d148f3df2d2d5dc44fdee03d97803a391503d514b6fb76ab1247a4bba3c218c390cecac1673f59b8cacff7583321c4b3e2712cc7fc8c940fcc532599ec817278401598c709367c3dfc14a37df828dea77a280c8a5d52d45282675a10f109a33f1a4a29c9eec05af3c86ec8b575472e33bdac5a58334389ed1a7519f10e8d0050a025e318b34dff3140b4645ca7cda15b423409e6a9bd8984164089676c88e2e1c2ebdb7e0bf57768fb59ac9eeb358f75e5bd1264d3f225e52131aee5c8fade0bd5c31582c786faf370482b8b0b075a0b784ae6d64f08cd311a3b29969728bba5cd2a194c2b145f65793c56a1299488fb09332f62b2a2c913426d29bb3340bd466b61ad96ceb4b5aa467e857e0ef1f232e5de781236b80d8ce945207b88f78c2ea377d1a07edb3b09b6f71ef675385ed58e36b41071bd8226b8c26c8ba13c9b9a9bed0b603ff6cf68f7a9fd768d68fe0fd4d4bce533400d3f4c0dbfc90ccb68b52ad89f6e00f971a11f8417972d414e9cb0133aefee454a8ba567ec58d27adde29cb58be20c094e822179980b6200666ac24f57f54785ccf5046259fea3be92591b1d2d61ba0d8b3d218ce47686d4096226aaf7531314f70191c790eab6ef4401d1443fb8c660969f4627f64f2f45378fce8b1084dcece2419d2e79fe1fb5da54eb7f1d778b80bc5430e81d76df56d928419d90a4a6fcc3e97770269df58d8b21dc6f192142a7b2fa80ba00cc0668bdb8f64f1f52949ca9969bbd9f0e325daa4f41cd40ab130e8495580ecf2fd7b5bfd46f8e7468cd0bca3106d8016b08a822546dce51628eb127c7ffe567e32215fc58a532b373c36527df138ee4f95da562a274262065f7c18f4542d780de68873017dc30c838cba25c7a90998777d5a4dc30f867a5ce356839c584a7524df2f3d931ce9c9100d12dce2c12d086b7e278f0e320afc269f9dd0887dbc650a193091c5ea161f73fde0a2147a06fec2297a54010c23c3c9970c9ad0095f25a8b9cbc59a3504bcfff80b169e6450bdcd86fa7f3433934cfda93dda8e5d019edc676e87d26331e3e0573e50bdad3784080aa8173f3070516478244dcf094c1afa5caf427d28cd243a6322f55110e8185da2e34f93bcd2f5073977efdb5a68f67100d2dff23d8936491a46325319cb0ddff135d560a8397f0ad3713aad33295cc4a93a22a79f3edb953d399f3c99a1ae30057ab35ed8200c754abd1e160d3971839b90e30a1da827a6be32a07b4961ddc601e9e16ad41e4b16b2b71a6bc311e8c193eea9b5930168112f7074ec92fb99b3faf1b4120f5b7f1bb3116756b63c319d12bb11062e28ca765381e41dcd01cd684f11f2e9da280ccb568e781662db0bb4d3cfc0a526500393dea8c6967449ee2cd12bd324afe8d494a504973a45e370d9e
Comment vote buttons with thumbs up/down icons
View code f3e9a4da1832ce364792c21edcf375c1bf01c38ab3837eaf52594cea47addced98845e78df26e5b12f5e1a991eb1282518778f7d3d62e46458a9327ddde95b9535e0e9275f76d53e88e3a31525f4055d364bb6a0583781cba69b9acb995364809e0c40e83f073828cc5a2b9bca1f21f38be1da283a6f2ab6d43e2587edd5cf62415e6fdfaef9480caa30f9eaefed082963327b9aacc6599d3dddc5531a4d5e0f5082e611bd014718b3864ccaace81e9f93907805be04929853e8a8be033c1b310c0e433b9c7de069391e2793f9c31bb09350b087cfb3d428aaadb915814c3675297edcd0eb221cb67c75cd029d4231b33da7fdcdfb91a261f7484201d9a6ab31b7d7172ca88e6f43a743b6b721b09199054ad89dec914b2d39b0df1ab3874571a678327fdd1152a486ee6016cf4560033ca3dadea570e63a7eb24b9d8c64834686c0b8dcbbf722cb2896baa461985c092880c904307a8650b21fb6da8b7a704916b78af2baecacf72b1cf5341d13d498780742fad7f87fed618e9d9d1fc31c5e0227abe7b5be7cd2bebbb5ab7cee7aa373e86e76a2b495d7abe5384562bf0e6c22e68b1cbdcfc7423752cdb8c77f4542dc3dbd0cea2a169200a55513bc92d5742338b3b4a33e08b3e2afee0115a757b308c22c5224e39e71f256d65f28207a98e0ac526b50dd2d09f1eb67d373f81a00c19d5e96b9b5575b9174bc07c75c569c14f3c06e65afc061fea10f9b9387738143b863643f8bf95d19bc4c1b236c68558aa302d08a3d9f1c028d8dee3720ccab9543787b66fb41f0c770a4cd720e1b25829e780c09b7715d3c4a4aa478dd6acc5bbb9968909fed7b366b2b245afd3a6251bfe72ae51d6ab862cdba6a6a032e5b9fd5b923567ee2f380b6be580f571aaeaadc0f24a3180efdebb2312c784cb8537bae31ef7ed4ada5df1e7767bc8755b375dc2f64c322e025c24280195c05c2ed64d54a1e32e4f04d026cd15c3be447c5403857bf7dbbe9a862a1ca8ea521bc8da5f2040af617415bac08cf9955647a864251a847e6dd299076e8aab891e0c4d3357991c13f4a0d75efbcecb4e737bf66b1d12df3e353d101dbee25bb5dbf96f559a9a8f15eee2f7dd1a7c304077b8d613d3119593ffbd6157754238079fb69b17bbfdd9654dc34d327c004d99e85547c0e5a0e88c7b52bf5a107b1b19d5bcd6517b2efc448658c8db3177342e70a99b4c578f4a3d5130d552b14f546dc688911bbfa916f3b5c7ecbc6d570a6a5d6fb5826f2534185b4e194f16db4c45e84c56f32cb64ae1e0f6f7f5d416559cc31223149cd2ee7de17d9374c7101e1186893caf7b4783be60e4918119154fd6db68fe8c9f060a86cf57dacfe6d15ef2f8dcb5f94759510432bd297d22d40c910201664631828cfea59cc12ee38b32e17dea64b438f6d51d25b3f1389e2bfbd807bca0c1a42cb9e1bec908edb7be84b3bb411192f5627cef0d3deb71abc0f418bd342fdb149225b92fcb5857776104a9e09d231e9c75dafcd93d275204fc57f94336e311c5ca34e4ce1b49fb1beebaeeb07467944382cc7d60881bd228b06b8dba8f34f4a2ea6e9a9237eeb5b604cf67441a653612be9df8a47936862a9a86580a99ad4ba23e1583eaf372d1887854a8f89eda894e8ca668380f14be09a62ee03b23c8727f636011a0323069d49367a465797f4937728a1c2648a0e3ae79988ecf128651971f0fa4a0b51910e6ca27cc6a969eb538d6287945a5f9704c8aabaf69c9eca00eb7a006fdf1ac30e14b3cda24ca39515a4c52b3128679bde28a980cc5bec7f60c6304326ffba032637a94c11089d3ad2125d63a3d6a6a24f92fed9b816578928b245a89fe0fb5803b8e1d904305d0dbf6380ff3c3212a99536b593691208b56afa000e4d7de9eae4b8b3e2966ab871b70b185d12c55771e8b4d299a34661c8c2491a271574dd44f4b27366dbf5b49f33730daab5b46b2fcae2ebd98c874bc59244234eecb0978ed5711c935f7225d098a7c2818d01514a51221620ce426b0b6add40bb16ab835489896a223db4b5d6a489f09e950c3006e157a33c1bcdf37b6111ba65d8fef0b7de8e49da85171626a5de9dcf9ddaf6970d19750d41271acd9c40af7c6637fd51a0fc03bf0e670c499c66af179f0b8f4ba4a24473a0b628293ed457c59428a84540dcb53e7716a3322814dc1521f1dbee6b14c53dab238f2c95c73603794b12a795bed77c2ae437621cfcd304c76869b367239314647e598f8b0ff8784ca636dbcc8e0586205a02340e83880dd4c40816603195b6116227fcae8863fd9f3a2cc6d44ce74b9942bdf5856719b8b8c5430a9431fb63a9302243a839edd0e4d87b2522513c0490ce06fac50205cd146e77b235a09654acfc050c27fe59de7804372729fad68ede732d1a89127a4aef77fc7af558eb7ffd2286e60221f42551aa55a43f8d1ba3df2c74fef7bb3fadca60fb35f3612fea3472e55471edc910032d8ef53f51a4e79de9d3c7fc6e344f4a789c8ab3c5a8667fd51c0089621a07c1be526f142fd8772cd6ae3475872284538b96036852158257160f6b7c0f4e6393b27ea0df0b0e3e4359f7a6979ed3066ec3bef9d933ff0d0d80c72bb328e600f41d1b1c45cb056988b00d73781e64d80e68cba7820ed1c3b5b4005ae885015fdfcbea6f604f011bdfd9fdd70bc939add2b11a3434568e2a1c5a1633f77c29cf516b6cb8663f640a5db94006f27f9350e6d78975bb32f1c39b1822694f0a31efa48cc0952be43ead9aa59a0a2ee5191208e9670b412f2e5c8f28645efcb50c1b949041c4d8d07080a933cae3b2f900261ea126d60c007d6cc5d3588621e30ded87a215e2fb6f2925ee01fae91ee2944eefb7bf68f9341bd5cf5d40b8c769b71e5b4e8f42a713c3e1aac0cc9795a602b99bd922841e68d4dde96ec9067e7a599d27d9c8cdfa175f92b1a9d9e461d03865e62c07169172a11356114efd41a52dd2ecf3fec3f4f8004e482beaa24eef58e7b95afd2f36b52db4986e8c81aeb648c210f3972b74ce466f90b2947e14fcbb4cdb2bf2e07da7ef3746914f439898ad0d6016ba7501eb11a0cc584c077bac7c1b672f480398c1406d86fecbb8ec12923f710b21c9f6d33e674b3b2cc8aa9dbd3cf6dd30832a3807cba3cee26b137ee3b82e0dbee0eed62770f28ab12a06c2044bfa7ee43fd2b4285d1535ad0067619de64f35fd8aadc4e3b0dd696e8963616807e982d9329c04d3a61b7c6c32da50db0bf1b4cc403163b92a8a0b882d4a021c1f5e28abc96b6952e565d2ef9780259eda0839c2691b6ca2c45f09d6d46270c4004360e7eb02e11a219fd3a2cb7d3c98da093e5c0360904297badeb788ad7eede25167dd9e302f8efce46bc036f2feac207f3719dcd2150412bf6d68ebd655ab5b3211e38c29f82654e90698d9855703bbe143f651daa247c52953834da65c5889b0f948e248b92c8bb5889693c832ff5434e31a785fb586915828b2235657dfc29f166b3cefc6329eb95e52db737ad36eb7f3d585ebe2569522060ca131f40878ba710c0e7a5d441376d3e81410f8cf53637e2fead4ab031735a84e30d192a96dcaf53768de87d8c5b1cee988481eead83de2bb8862d29f84647c3bf36c80273540960b5021c9db27fa80df77afc56f9ddc3f6d8f56fcc1c62996c00baa739a95bbb333ba96afdacc6c50b284
Use .media to present vertical vote buttons beside the comment body.
Vertical comment vote buttons
View code afca5ba54d45057a2594ee2142f4d961e7e0026529846af7a6f07395f4d29914a071a8007915fd9e3fea2b0114bf3307b7737dd6e905a6aa0db5b5cc7072e18a038a8f017a20987bb572e9bfbeb9bae29676a1ac15249981a2f8cb4eb77167cbe9f482fc03525beacf00ad5761e4239c123b8dc7393d895bb434ccf05d32febab1dc611f0f30937adbe687271248af9948f99f3089a456fd4dbb8051fb169be0b5ef112e4a1fe3485c186ba166ac76d695ce75970484904439f4240a9a2db6035d04557cd0cc832c64f2797bd135acac6a35052c4613dd56f3c85ffd8a76e6a2ba7ef04b3b4cd126a047b180ae22a5e1a5a63cb81803cad94b292bdcd18ace22ec9ce639c3b609456b4baa3ee8a3dadc4ff98a7ffb023877716dc0bf38b9d3c83d88e3352683e1d4758bfbcd744a7ca43a8e70ffef94f6971cd3368202b90f10cbaa9cb7fa6fd643b5e3e6c6d2d2a77d9a171632c7256f2a315c767643fe032ff3238eb3e99c3972cb0e17cb0ec9442d228f5492665a2280ece761de8b2e1d1bc691c59e38e41b68de2a339c4d2cd8aa99be2ddd4389bc93c29a4a822ce7127247a02401b597e7f87aaf9ff5be4cb70b0530fe934aa4aec0687c404984395eb8f63b867f7f495ab040e7fd7e412db0ef17fc62e3830c177093b092c6ff029323f19baf9b47a89b05a61f84cfe2192cf609ccc19d3c4434fa49289fa704c0e519de11c5cde969486f2454cdf5404cfd3260a687d1b54fd4d6a93d4ba2527ae7cfab293943edb536a0b7c6b83b2686cbc88277346582866761e0bea1bd84e97c42340b2d747fabe300b478f860767945631858073b8134e10a077835b9aacea7a72573cf424f1caea0339550aa8ed573fe07e712b74cf6b1afac77022f59a5af53c9cea8ce7a3d1b43cf20a376c46d90b50b6f774c1f323854004587a2f9c865031df05b3acad79b683562073bc2180d8e46bb0e0819e44449cc26992adc03c5d51faa9ab90c2d2f0d65403aefa5e814bec981246a3abb2c785e0ffbd5ada71c15d1bfb0b1e3f0b36fcc1770bc439ea182beb2ff2f2f3a4c55ec9b1e2d6cd15526f43e2e2c8efc7afa244572846d2e827d6c8808c43372bf1254423989349a95c05a76549f04c72c705cc4e196735800b7812d760eced6dbee5b495f3aa77fc2137a363b6c5211304425d32ba2a762b425462714eb0812bdd1e98c55a05a0bba27bcdd9925dec43344084b2329db89766ee99111d37614664f360024b8b5f26f8a240211bff4014b98be484265261bc1eb686629471e32c8e887040815e40db7a1eab03136ba26409107450d6e8c012d68b9c119f9dfd5ecc23617f9fe096094cf963561932a4f7554b3f08007c8ef451f53eadac62d9830147301cacfb359463d65545c104afdcd45c130c85603147b3b0cc6821841a4086efbd8587f167eee5eafb434b6bd588bc1d207a5311a7f16df2c5496053c917c48ba86585494fae459337d89e9d9f0a8debfb5857929d89d6c27f00e827f096aadec18db701a8592b781275ddad10a81def23c91dbaa4d671c0b95909ad4bc03414d4531e5b70bc557e50daf763a2822f384ee1672a7ed4a4a0236e58221346d31259c066bd34a3510df2f477c025c3bb9ce8b84d11ae26c6be6fd5b09157236e05302b06712ede05fa2fd5a37adb5d3b8ef92b2dc4be82d0eac5105905dabd8f7a9c7358cfe1b5cdb38bf912ff02f42876dae3bc83ad11b7a195e49d67349ea4efa79825d2d3b901b0a30f9e87075a10ab2b6642b1971eb97fd8ad092d59d12f9a77d85c41eb368315fc4cf2974e9da93be3d7c0834d2f55eb949809779e834e31510e04a494089dfa319231283ad00714aa50f08cf78c9214be3e06f6589b0920ab30ddfdae05f92278a7a815e97d2e3847ce7b1d1f4726c2949ca8d79396145262158d045742daf3c9efd714c9d7179bf1b12201fedbdd19281649e8e3f96e51e04a078fe1f76f0b0afeb688d745f390b161b4dfa9e801a66b9654cc7436f09ceb6b76ce824fca3bdb50915fe7d4d6b1ea46d772d78e943
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}}
