VueProfileCard

VueProfileCard is a CSS animated Image Card with background animation. The component is ready to use with any Vue/Nuxt project.

Demo

Props and slot

VueProfileCard come with a single prop img, which can be used to pass a image url and an alt tag. This prop is an object.

img: {
      type: Object,
      default: new Object({
        src:
          "https://images.unsplash.com/photo-1532123675048-773bd75df1b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
        alt: "images",
      }),
    },

The slot details can be used to add set of social icons or single paragraph or heading of your choice.

Install

npm install --save @codehat/vue-profile-card

Usage

<template>
  <div id="app">
    <vue-profile-card/>
  </div>
</template>

<script>

import VueProfileCard from '@manojap/vue-profile-card'
export default {
  name: "App",
  components: {
    VueProfileCard
  },
};
</script>

with slot and default prop

<template>
  <div id="app">
    <vue-profile-card >
     <template slot="details">
                  <h1 class="is-size-5">Web Developer</h1>
                  <span class="icon  ">
                <i>
                 <a :href="`${fb}`"> <v-icon name="md-facebook" scale="1.5" /></a>
                </i>
                <i>
                  <a :href="`${gh}`"> <v-icon name="oi-octoface" scale="1.5" /></a>
                </i>
                <i>
                  <a :href="`${tw}`"> <v-icon name="bi-twitter" scale="1.5"/></a>
                </i> <i>
                 <a :href="`${wp}`">  <v-icon name="fa-wordpress"  scale="1.5"/></a>
                </i></span>
      </template>
      </vue-profile-card>
  </div>
</template>

<script>

import VueProfileCard from '@manojap/vue-profile-card'
export default {
  name: "App",
  components: {
    VueProfileCard
  },
};
</script>

License

MIT © manojap