Flip-card-wc NPM

Flip Card Web Component

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

Features:

Card that flips on hover
Card that flips on click

Demo

HTML

Visit the following link for an example of usage in plain HTML.

React

Visit this Code Sandbox for an example of usage in React.

Installation

Option 1 - HTML

Add the following script tag to your index.html:

<script src="http://unpkg.com/flip-card-wc/dist/flip-card-wc.js"></script>

Option 2 - React, Angular or Vue

Install the package to your project:

npm install flip-card-wc

Add the following in your entry file e.g. index.js:

import "flip-card-wc"

Usage

Use the flip-card tag and define two inner elements, one with slot="front" and one with slot="back".

Add variant="hover" or variant="click" to the flip-card tag. If nothing is added, the flip card will default to flipping on hover.

<flip-card variant="hover" class="trivia-card">
  <div slot="front"><!-- ADD CONTENT FOR FRONT OF CARD HERE --></div>
  <div slot="back"><!-- ADD CONTENT FOR BACK OF CARD HERE --></div>
</flip-card>

Props

Prop	Type	Default	Description
`variant`	`"hover" \\| "click"`	`"hover"`	The mechanism of how the card flips.

Styling

flip-card-wc utilises CSS variables that help style the component. These can be overridden to adjust the styling. The amount of styling is intentionally lean to allow the user to focus on styling the content of the card (i.e the front and back).

To override the CSS variables, it is recommended to add a class to the flip-card tag and define the CSS variables in that class. The values used below are the default values.

.trivia-card {
  --flip-card-height: 100px;
  --flip-card-transition-duration: 800ms;
  --flip-card-border-radius: 4px;
  --flip-card-box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  --flip-card-background-color-front: white;
  --flip-card-background-color-back: white;
  --flip-card-transition-timing-function: ease;
}