https://github.com/devmnj/vue-img-cards
A simple Vue library of Image Card components with awesome CSS animation
https://github.com/devmnj/vue-img-cards
css-animation vue vue-component-library vue-components vue-library
Last synced: 9 months ago
JSON representation
A simple Vue library of Image Card components with awesome CSS animation
- Host: GitHub
- URL: https://github.com/devmnj/vue-img-cards
- Owner: devmnj
- Created: 2021-07-12T17:25:54.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-14T16:24:45.000Z (almost 5 years ago)
- Last Synced: 2025-02-10T20:06:42.709Z (over 1 year ago)
- Topics: css-animation, vue, vue-component-library, vue-components, vue-library
- Language: Vue
- Homepage:
- Size: 451 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
vue-img-cards
[]()
[](https://github.com/kylelobo/The-Documentation-Compendium/issues)
[](https://github.com/kylelobo/The-Documentation-Compendium/pulls)
[](/LICENSE)
---
Image card component library for Vue
## 📝 Table of Contents
- [📝 Table of Contents](#-table-of-contents)
- [🧐 About ](#-about-)
- [Installing the library](#installing-the-library)
- [🏁 Components ](#-components-)
- [vue-profile-Card](#vue-profile-card)
- [Props](#props)
- [Slot](#slot)
- [Usage](#usage)
- [vue-mini-bio](#vue-mini-bio)
- [slots](#slots)
- [Usage](#usage-1)
- [⛏️ Built Using ](#️-built-using-)
This is a set of *Vue* Image card components for special purposes. Each components come with *props* and *slots* for easy customization. The CSS animation make it awesome, thanks to the developer community.
## Installing the library
````bash
npm i --save @codehat/img-cards
````
The library includes the following components
### vue-profile-Card
*VueProfileCard* is a CSS animated **Image Card** with background animation.
[Demo](http://bulma-vuejs-profile.vercel.app/)
#### Props
This component come with a single prop *img*, which can be used to pass a image url and an *alt* tag. This prop is an object.
```javascript
img: {
type: Object,
default: new Object({
src:
"./profile.png",
alt: "images",
}),
},
```
#### Slot
The *slot details* can be used to _add set of social icons or single paragraph or heading of your choice.
````javascript
````
#### Usage
````javascript
import VueProfileCard from '@manojap/vue-profile-card'
export default {
name: "App",
components: {
VueProfileCard
},
};
````
### vue-mini-bio
*VueMiniBio* is a Image card with a Opening panel (hover effect) which can be used to show bio with social (customizable)
#### slots
*img* slot can be used to style the main image according to your needs and the *detail slot help to set the content
#### Usage
````javascript
import {vueMiniBio} from '@codehat/vue-img-cards';
import Vue from 'vue';
export default Vue.extend({
components: { vueMiniBio },
name: 'App',
});
````
- [VueJs](https://vuejs.org/) - Web Framework
- [NodeJs](https://nodejs.org/en/) - Server Environment