Use it
- Add your name, photo and colours above.
- Press Copy the code.
- Paste it into your page, before
</body>.
Where does it hang from?
The top edge of the tag. Put it at the top of the page, or give the tag a height with CSS.
Need more than one badge?
Paste the code once, then repeat only the <snap-badge> tag.
Using a site builder?
Paste it into an Embed or custom code element.
Using React?
Load the script once, then use the tag like any element.
Want the same font?
Add Space Grotesk to your page. Without it, the badge uses a system font.
Good to know
It works with mouse, touch and keyboard. Click or tap to flip it, and the strap twists with it. The other side says where to return it.
Turn on Can snap and pull too hard: the strap rips, the badge falls off the screen and a new one drops in. Listen for snap to count the casualties.
Your photo goes into the code you copy, so it travels with your page. Nowhere else.
Sample photo by Teslariu Mihai on Unsplash.
Free for your own and your clients' projects. Please don't resell it as it is. License