A flippable card built with a custom web component

Preview

Recently stumbled upon custom web components. Although I’m a long time developer, I did not know of their existence 🙈. They basically allow you to create your own HTML tags.

I was trying to recreate the PlayStation trophy cards, where I needed a flippable card. I know React is component-based, but I wanted to create my own component in plain JavaScript and HTML and quickly discovered that a custom web component was the way to go.

I read some documentation to get me going, and this was the result, my very own custom HTML tag:

It even supports horizontal and vertical flipping:

Or have the card show the back by default:

You can find some examples and the source on my GitHub. Feel free to fork and adjust it, but give it a ⭐️ when you do. Thanks!