#Hello Cards
Portfolio Component Cards predesigned
➜ yesmate git:(dev) npm i hello-cards
Import into your react component
import Card from 'hello-cards';
Include in your react component
<Card product={product}/>
The card takes an object, here is an example object
const product = {
name: "Roco Go",
page: '/rocogo',
description: "Dispatching Tool",
color: "rgb(246, 235, 213)",
cols: 3,
direction: 'column',
background: '#222',
url: "http://www.rocopartners.com",
logo: 'http://malham.io/roco-wide.png',
textOne: "React",
textTwo: "Redux",
textThree: "Rails",
textFour: "Docker",
textFive: "Heroku",
number: 7,
mini:false
}
Any of the properties here can be edited, eg, column and row provide different views, the number shows if there is no logo. mini:true shows a smaller sized card
To see an example project in an action, clone this repo, cd into example, run npm install and npm run dev. The example project has and array of product objects, and can also be viewed at http://hello-cards-example.malham.io
➜ /tmp git clone https://github.com/cerico/hello-cards.git
➜ /tmp cd hello-cards
➜ hello-cards git:(master) cd example
➜ example git:(master) npm install
➜ example git:(master) npm run dev
Browse to http://localhost:3404
There is also a Makefile for easier use, you can run all examples from top level, using this
➜ hello-cards git:(master) make setup
➜ hello-cards git:(master) make go