https://github.com/jeffreyquan/flip-card-wc
Flip Card Web Component
https://github.com/jeffreyquan/flip-card-wc
typescript web-components
Last synced: about 2 months ago
JSON representation
Flip Card Web Component
- Host: GitHub
- URL: https://github.com/jeffreyquan/flip-card-wc
- Owner: jeffreyquan
- License: mit
- Created: 2021-02-12T13:00:01.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-29T05:48:46.000Z (almost 5 years ago)
- Last Synced: 2025-10-25T08:18:24.140Z (8 months ago)
- Topics: typescript, web-components
- Language: TypeScript
- Homepage: https://flip-card-wc.netlify.app/
- Size: 379 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/flip-card-wc)
[](https://www.webcomponents.org/element/flip-card-wc)
# 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 [CodePen](https://codepen.io/jeffreyquan/pen/ZEByKRL) for an example of usage in plain HTML.
### React
Visit this [Code Sandbox](https://codesandbox.io/s/flip-card-wc-5i248) for an example of usage in React.
## Installation
### Option 1 - HTML
Add the following script tag to your `index.html`:
```
```
### 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.
```html
```
### 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.
```css
.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.
```sh
npm install
npm run start
```
Make changes in the `style.scss` and the `FlipCard.ts` file in the `src` directory.
## License
MIT