1.1.0 • Public • Published

Published on webcomponents.org

Flip Card Component

A card component based on the code-it notes by Dan Harding. flip-card elements can be used to create card style components on the page, with a front and back. The user can click the bottom left corner of the card to see if flip over, revealing its other side.


Install the component from npm:

npm install --save flip-card

or if you aren't using npm, a bundled component is available at bundle/flip-card.js. However this includes the whole Lit-Element library rolled up (~22KB total).


Import the module to your .html file:

<script type="module" src="path/to/flip-card.js"></script>

or .js file:


Then use it like you would any other HTML tag:


The content on the card can be edited by adding children to the element and giving their slot attribute one of the following names:

Slot Name Description
front-content The content for the front of the card
back-content The content for the back of the card

Slotted content can be styled just using css, like any other element on the page.


Attrbiute Name Type Description
facedown boolean Show the back side of the card.


Cards can be styled by setting css variables. The variables that can be set are:

Variable Description
accent Set the colour of the card border and flip button background. Defaults to rgb(255, 212, 45)
flipButtonColour Set the colour of the flip button icon. Defaults to #000000

The following css sets the accent colour for all flip-cards on the page to green:

flip-card {
  --accent: green;


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


Based on Code-it Notes by Dan Harding,
Implemented by Alex Dawson


Licensed under The Unlicense

Package Sidebar


npm i @adaws/flip-card

Weekly Downloads






Unpacked Size

288 kB

Total Files


Last publish


  • adaws