Flipping Info Card Component For Vue.js


A Vue.js component to generate an elegant, flipping info card with spark lines on the applications.

How to use it:

Install and import the vue-info-card.

import InfoCard from 'vue-info-card';

Use the component.

    <info-card :frontType="front.type"
export default {
  components: {
  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',

All possible props.

  • frontType: content type on the front of the card: graph or text
  • frontTitle: front title
  • frontData: data for the spark line
  • frontTrendGradients: Gradient used on the spark line
  • backType: content type on the back of the card: graph or text
  • backTitle: back title
  • backData: data for the spark line
  • backTrendGradients: Gradient used on the spark line




v0.1.4 (08/01/2020)

  • Updated package

Download Details:

Author: karakanb

Live Demo: https://burakkarakan.com/vue-info-card/

Download Link: https://github.com/karakanb/vue-info-card/archive/master.zip

Official Website: https://github.com/karakanb/vue-info-card

Install & Download:

You Might Be Interested In:

Add Comment