@bnnvara/cards v0.0.29

BNNVARA Cards

Cards allow users to take actions based on a click. A card can be used as a small representation of an article.

Demo Patterns library

Installation

npm install @bnnvara/cards

Basic usage

Import

import the BaseCard

import BaseCard from '@bnnvara/cards';

React

You can use the BaseCard like this:

<BaseCard
  tag="Tag Name"
  title="Title"
  backgroundImage="https://images.graphlr.io/tF511D7g10kxKbl18H4CZZ7E5XSpjvWQ6hXM/s3-pips-bnnvara/e505c2f6-2082-447c-a973-cdae781b86c3"
  brand="Brand Name"
  pubDate="today"
/>

Variants

Base Card

This is the most used variant of the card. The backgroundImage prop can be set with an image.

<BaseCard
  tag="Tag Name"
  title="Title"
  backgroundImage="https://images.graphlr.io/tF511D7g10kxKbl18H4CZZ7E5XSpjvWQ6hXM/s3-pips-bnnvara/e505c2f6-2082-447c-a973-cdae781b86c3"
  brand="Brand Name"
  pubDate="today"
/>

Base Colored Card

If you want to use the colored card use the following props.

<BaseCard
  tag="Tag Name"
  title="Title"
  brand="Brand Name"
  pubDate="today"
  backgroundColor="red"
/>

Base White Content Card

If you want have a white background behind the content of the card you can use the following props.

<BaseCard
  tag="Tag Name"
  title="Title"
  backgroundImage="https://images.graphlr.io/tF511D7g10kxKbl18H4CZZ7E5XSpjvWQ6hXM/s3-pips-bnnvara/e505c2f6-2082-447c-a973-cdae781b86c3"        
  hasBodyBackground={true}
  brand="Brand Name"
  pubDate="today"
/>

Props