BLM Badge

A customizable website badge to show your support. ✊🏽✊🏿✊🏼

11 followers

A customizable website badge to show your support. ✊🏽✊🏿✊🏼

11 followers

Visit website

A customisable website badge to show your support.

Launch tags:Developer Tools•Social Impact•Diversity & Inclusion

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

?makers are we able to add an image ALT text for the badge icon? ADA compliance tool says Image elements do not have [alt] attributes: img.maker-badge__btn-img -Thanks for a great widget!

Report

6yr ago

Prototypr

Maker

@engin_beri thanks for this important suggestion! I’ll add that for you

Report

6yr ago

Prototypr

Maker

@engin_beri added this now. The default alt text is "Black Lives Matter Badge" - you can customise the alt text by using the new imageAlt setting in the options: imageAlt: "Black Lives Matter Badge" added to the readme here: https://github.com/GraemeFulton/... - you may have to refresh and clear your cache to pick up that update!

Report

6yr ago

@graeme_fulton You rock! Thanks!!

Report

6yr ago

Prototypr

Maker

Hey we wanted to show a donation link on our website for BLM..and then thought this widget can be useful for others too. You can customise the donation link, title and description to make it fit your needs. The code is free for anyone to grab and reuse

Report

6yr ago

Prototypr

Maker

@cellus_christie it's customisable - the person installing the code to their site chooses where the link goes

Report

6yr ago

Baserow

Hey I wanna make sure this is done right - Any idea where it would go in Shopify? Guessing theme.liquid but I wanted to make sure.

Report

6yr ago

Prototypr

Maker

@hiramfromthechi I'm not a shopify user, but it'll work the same way as any other widget gets embedded on shopify. e.g., I found this: https://help.widgetic.com/integr... maybe it works in the same way?

Report

6yr ago

Baserow

@graeme_fulton Thanks man, good find. I'll try it out.

Report

6yr ago

Speaker Alert

Thanks for sharing this, just added to my site! If anyone's adding this to a site with Bootstrap 3, you might see the text appear smaller than expected (because the badge uses .rem). I worked around this by adding a global font-size to my css: html { font-size: 16px; }

Report

6yr ago

Prototypr

Maker

@theotherelliott great! If there's more people with the issue I could change it to px sizes, but this is a good fix!

Report

6yr ago

Globalping

I recommend using a free CDN like https://www.jsdelivr.com to improve performance and lower AWS costs

Report

6yr ago

Prototypr

Maker

@jimaek thanks for suggesting! feel free to grab the code and host it there - I don't really want to update anyhting now cos people are already using the aws link

Report

6yr ago

@graeme_fulton thank you for creating this! I added it to our website as well: https://fairremote.com

Report

6yr ago

@graeme_fulton I also tweaked it so it works on our dark mode version as well, though I might do that in the fork I recently created. I noticed a small bug though when using position: 'left', the border radius is still set on the top left corner, instead of switching to the right corner. Easily adjustable I suppose. I'll create a pull request in the upcoming days on this and you can merge it in, if you accept PRs on the GH repo.

Report

6yr ago

Prototypr

Maker

@raul_popadine_i thanks Raul! Yeah there are quite a few improvements that can be made - a PR would be really helpful!

Report

6yr ago

Black Lives Matter Bar

@Graeme - this is great. I just wanted to do a little cross promotion for both our products. I think our audiences can use (or share) both to help the cause: https://www.producthunt.com/post...

Report

6yr ago

1 2

#3 Diversity and Inclusion Product of the Year

More recipients →