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

|Name|Type|Description|Required| |--- |--- |--- |---| |tag|String|Prop to set the tag of the card.|Not Required| |title|String|Set the title of the card.|required| |brand|String|Set the brand title of the card.|Required| |pubDate|String|Set the publication date of the card.|Required| |backgroundImage|String|Set an image url to set the background image of the card.|Not required |backgroundColor|String|Set the background color of a card. Possible options are: 'red', 'black'.|Not Required| |isBodyTop|Bool|Align the body to the top of the card. Default is false. |Not Required| |hasBodyBackground|Bool|If true the body section background will be white. |Not Required|