Generic flip card that allows for completely arbitrary content on each side. Slot-ified version of Karakanb's awesome vue-info-card component, which you can find here.
FlipCard uses vuetify with md-icons as the icon that you click to flip the cards, but you can put whatever you want in there instead if you dont use vuetify.
<template>
<FlipCard>
<template slot="front">
<span>Hey loser</span>
</template>
<template slot="back">
<span>Thought u could get rid of me loser?</span>
</template>
</FlipCard>
</template>
<script>
import FlipCard from 'vue-flip-card';
export default {
components: {
FlipCard,
}
};
</script>Throw whatever you want in those slots
Addtl credits from Karakanb:
The component is based on two main features: spark line and flip effect. The spark line is created with the amazing vuetrend component, which creates cool and customizable graphs. The flipping effect is implemented in pure CSS, and influenced from the tutorial here.
The component supports all of the modern browsers, with least versions: Firefox 37, Chrome 42, Safari 8, Opera 29, and IE 10.
The project is under MIT License.