flippy-card | Vaadin

A Flippable 'card' web component based on Paul Lewis' UI Experiment


A Flippable "card" based on Paul Lewis' UI Experiment

Published on webcomponents.org


  1. Using npm install the package to your project
    npm install --save @diddledan/flippy-card

You will now find a folder called node_modules in your project root which contains the webcomponents polyfill, and the flippy-card element files along with any dependencies required.


<flippy-card id="thecard" axis="Y" current-side='front'>
    <div slot="front">
        This is the Front
        <paper-button onclick='flipit'>FLIP IT!</paper-button>
    <div slot="back">
        This is the Back<br/>MoreContent<br/>Expando Divboxus!
        <paper-button onclick='flipit'>Flip it again, Sam!</paper-button>
<script type="javascript">
function flipit() {


  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



MIT License

See the LICENSE file in the root folder of this package.


Link to this version
ImportedReleased 28 August 2018MIT License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install @diddledan/flippy-card"@2.0.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.0


  • @polymer/polymer#^3.0.0