A flippable card built with a custom web component



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!



Robin Ingelbrecht

My name is Robin Ingelbrecht, and I'm an open source (web) developer at heart and always try to up my game. Obviously, I'm also into gaming 🎮.