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

Anima - OnBrand Vibe Coding — Design-aware AI for modern product teams.

Design-aware AI for modern product teams.

Promoted

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

5yr ago

Prototypr

Maker

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

Report

5yr ago

?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

5yr ago

Prototypr

Maker

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

Report

5yr 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

5yr ago

@graeme_fulton You rock! Thanks!!

Report

5yr 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

5yr 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

5yr ago

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

Report

5yr 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

5yr 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

5yr ago

Code shows: https://minnesotafreedomfund.org/

Report

5yr ago

Prototypr

Maker

@itsbrex yeah this is the link I put in by default, but it can be customised so it can be different for each person too

Report

5yr ago

Globalping

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

Report

5yr 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

5yr ago