Flip Card

24 February 2021 • ☕️ 1 min read

Re-usable flip card web component

Introduction

flip-card-wc is a flip card web component. It can be used in any library/framework or in plain HTML.

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilise them in your web apps, according to the MDN.

I've published this package on NPM.

Features include:

Card that flips on hover
Card that flips on click

Motivation

My motivation for this project was to experiment with and learn more about web components. Not many UI component frameworks have a flip card component; I wanted to build one that was framework/library agnostic.