react-ui-cards

Various stylish card components for React. Focused on being ready to use with little modifications. Supply your data and you're good to go.

Live demo

https://nukeop.github.io/react-ui-cards

npm

https://www.npmjs.com/package/react-ui-cards

Installation and usage example

Minified and gzipped bundle size: 52kb.

$ npm install --save react-ui-cards

import { UserCard } from 'react-ui-cards';

export const Example = () => <UserCard
    float
    href='https://github.com/nukeop'
    header='https://i.imgur.com/vRAtM3i.jpg'
    avatar='https://i.imgur.com/XJxqvsU.jpg'
    name='Frank Hepsfield'
    positionName='Software Engineering Manager'
/>

Development

Getting started

After cloning the repo, run the following commands to start Storybook in development mode with hot reload:

$ npm install
$ npm run storybook

Running tests

The repo is configured so that it generates snapshot tests from Storybook stories. To run them, use:

$ npm test

Contributing

All contributions are welcome. You can either add something to existing cards, or create a completely new card type.

Card types

In addition to what's listed for each card type, all cards can take the following additional props:

• className to apply additional classes to the card
• float (boolean) to enable animation on hover
• Other props are passed down to the enclosing div element so you can e.g. add custom callbacks for onClick and other events.

User cards

Cards representing users or people.

| attribute | type | description | |--------------|-------------|---------------------------------------------------------------------------------------------------------| | href | string/null | optional url the card will link to when clicked | | header | string | url to the image that will be displayed in the upper part of the card | | avatar | string | url to the image that will be displayed in the center of the card | | name | string | user's name | | positionName | string | user's role | | stats | array/null | an optional array of objects with attributes 'name' and 'value' - this is displayed in the card's footer |

Product cards

Cards representing products available for purchase.

| attribute | type | description | |-------------|-----------------|---------------------------------------------------------------| | photos | array | array of urls to photos of the product | | price | string | the price that will be displayed in the upper lefthand corner | | productName | string | name of the product | | description | string | a short description of the product | | rating | integer | rating of the product (0-5). Not implemented yet. | | url | string | url the button will link to | | buttonText | string/null | optional button text |

Tagged content cards

Cards showcasing any content that can be described with a single thumbnail and a list of tags.

| attribute | type | description | |-------------|-------------|-----------------------------------------------------------------------------------------------------------------------| | href | string/null | optional url the card will link to when clicked | | thumbnail | string | url to the image that will be displayed in the center part of the card and as the background | | title | string | title of the card | | description | string | short description of the content, try to not exceed one line | | tags | array/null | an array of strings that will be converted to pill-style tags and displayed in the lower righthand corner of the card |

Flipping card

A card with a front and back side. Flips over on hover. Any React component can be displayed on either side.

This card is a bit different than the other ones - it has no attributes. To define it, you have to create a nested structure and pass your content as children:

    <FlippingCard>
        <FlippingCardBack>
  		  Content that will be displayed on the back of the card
  	  </FlippingCardBack>
  	  <FlippingCardFront>
  		  Content that will be displayed on the front of the card
  	  </FlippingCardFront>
  </FlippingCard>

See demo page for an example in action.

Recipe card

Cards you can use to show dishes' names, time they take to cook and how big the portions are. Heart sign can be used as "Add to favorite" button.

| attribute | type | description | |-------------|--------------|------------------------------------------------------------------------| | href | string/null | optional url the card will link to when clicked | | thumbnail | string | url to the image that will be displayed at the top of other elements | | title | string | name of the dish | | time | string | amount of time it will take to prepare the dish | | servings | string | estimation of portions' size |

News header card

Cards you can use on the news site, shows the title, author and date it was published. Click on image to see the exact news.

| attribute | type | description | |-----------|-------------|-----------------------------------------------------------| | href | string/null | optional url the card will link to when clicked | | thumbnail | string | url to the image that will be displayed in the background | | author | string | author of aricle linked in href | | date | string | date of publishing | | tags | string | optional. array of string to be rendered as tags |

Cryptocurrency card

Cards that show cryptocurrency-related data, including a chart. Can be used for showing other data, such as fiat currency or stock market prices.

| attribute | type | description | |-------------------|-------------------|----------------------------------------------------------------------------------| | currencyName | string | Name of the cryptocurrency | | currencyPrice | string | Current price, displayed as provided, which means you have to format it yourself | | icon | node | Icon representing the currency, it's displayed at 24x24 px | | currencyShortName | string | Symbol such as BTC, ETH, etc | | trend | string | Recent price change. Just as with the price, no formatting is performed | | trendDirection | integer(-1, 0, 1) | Indicates whether the trend is positive, negative, or if there's no change | | chartColor | string | Color of the line on the chart | | chartData | array[integer] | An array of integer values to be displayed on the chart |

Payment card

Card that represents a credit card, a debit card, or other similar cards. Flips on hover to reveal the back.

| attribute | type | description | |-------------------|----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------| | background | string | Valid CSS background string. If not provided, a default background is used. | | backgroundPattern | string/null | Lets you select one of the patterns to display in the background. Can be either "worldMap", "triangles", or "spiral". Null results in no pattern being displayed | | issuerIcon | string/element | Card issuer icon. Either a link to the image with an icon, or a React element to render | | number | string | Payment card number | | date | string | The "valid thru" date | | name | string | Name displayed on the card | | cvv | string | CVV code displayed on the back of the card |