Simple And Beautiful Flip Card Info Component For Vue.js

Vue info card is a simple and beautiful flipping card component with an elegant sparkline, for VueJS.

vue js card component example, vue card flip animation, vuetify flip card, vue card animation, vue flipbook, vue js flip image transition

How to make use of it:

Installation:

npm i -S vue-info-card

1. Install and import the vue-info-card.

import InfoCard from 'vue-info-card';

2. Use the component.

<template>
  <div>
    <info-card :frontType="front.type"
      :frontTitle="front.title"
      :frontData="front.graphData"
      :backTitle="back.title"
      :backData="back.message"/>
  </div>
</template>
export default {
  components: {
    InfoCard,
  },
  data() {
    return {
      front: {
        title: 'Spark Line',
        graphData: [3, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
      },
      back: {
        title: 'Back Content',
        message: 'Back Content Here',
      },
    };
  },
};

Flipping Info Card Component, vue info card Plugin/Github


See Demo And Download

Official Website(karakanb): Click Here

This superior jQuery/javascript plugin is developed by karakanb. For extra advanced usage, please go to the official website.

Share