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;
}

Contributing

If you would like to contribute, please follow the instructions below:

1. Fork the repo
2. Run npm install
3. Create a feature branch: git checkout -b feature/feature-name
4. Commit your changes: git commit -am "Added feature"
5. Push to the branch: git push origin feature/feature-name
6. Submit a Pull Request

Development

Run the following commands after cloning the repo.

npm install
npm run start

Make changes in the style.scss and the FlipCard.ts file in the src directory.

License

MIT