Product Card

The product card is a consistent reperesentation of a product with it's most critical attributes. The display is quite flexible to adapt to most common use cases.

Code:

var productCard = (
  <ProductCard
    type="buy-button"
    title="Asus Zenfone"
    price="$300"
    image="http://img6a.flixcart.com/imae9tftbfdcxzng.jpeg"
    onClick={showMoreInfo}
  />
)


var productCard = (
  <ProductCard
    type="info"
    title="Asus Zenfone" // (required)
    brand="Asus"
    offers={20}
    price="$300 - $375"
    image="http://img6a.flixcart.com/imae9tftbfdcxzng.jpeg"
    stores={2}
  />
)


ReactDOM.render(productCard, document.getElementById('#product-card-example'));
          
Javascript