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