Card

Cards are content containers. They are used to display items of similar types. It can range from as simple as card with only Heading and text to a complex card with multiple buttons and icons

There are helper classes such as .card-row that allow the user to create cards of equal width next to each other. There are other two classes .card-w-300 and .card-w-250 that limit the card width to 300px and 250px respectively.

.card-border gives a border to card and .card-shadow gives box shadow to card

Simple card

This card has only heading and text.

Chunks

Chunks is a UI component library with utility classes. It helps you to build User Interfaces at a faster speed

Chunks

Chunks is a UI component library with utility classes. It helps you to build User Interfaces at a faster speed 


<div class="card card-border">
  <div class="card-heading-container">
    <h3 class="card-heading">heading</h3>
  </div>
  <div class="card-text-container">
    <p class="justify card-text">description</p>
  </div>
</div>
<div class="card card-shadow">
  <div class="card-heading-container">
    <h3 class="card-heading">heading</h3>
  </div>
  <div class="card-text-container">
    <p class="justify card-text">description</p>
  </div>
</div>

Postcard

This type of card has an image that goes along with the text and heading.

Lukasz Szmigiel

Lukasz Szmigiel

This photo was captured by Lukasz Szmigiel and shared on unsplash. 


<!-- Add URL in src -->
<div class="card card-border card-w-300">
  <div class="card-image-container">
    <img src="">
  </div>
  <div class="card-description">
    <div class="card-heading-container">
      <h3 class="card-heading">card heading</h3>
    </div>
    <div class="card-text-container">
      <p class="card-text">Card desecription</p>
    </div>
  </div>
</div>

Product Card

This card is used in e-commerce apps.

RayBan Sunglasses
Rayban Sunglasses
₹ 5999
₹ 9999
New

<!-- Add URL in src -->
<div class="card card-border card-w-300">
  <div class="card-image-container">
    <img src="">
  </div>
  <div class="product-description-container">
    <div class="product-heading">Rayban Sunglasses</div>
    <div class="product-description">
      <div class="product-price">
        <div class="selling-price">₹ 5999</div>
        <div class="original-price">₹ 9999</div>
      </div>
      <div class="product-button-container">
        <button class="btn btn-primary">
          <span><i class="fas fa-shopping-cart"></i></span> 
          ADD TO CART
        </button>
        <button class="btn btn-accent">BUY NOW</button>
      </div>
    </div>
  </div>
  <div class="card-badge">New</div>
</div>

Overlay Card

Card with overlay text.

RayBan Sunglasses
Rayban Sunglasses
₹ 5999
₹ 9999
OUT OF STOCK

<!-- Add URL in src -->
<div class="card card-border card-w-300">
  <div class="card-image-container">
    <img src="">
  </div>
  <div class="product-description-container">
    <div class="product-heading">Rayban Sunglasses</div>
    <div class="product-description">
      <div class="product-price">
        <div class="selling-price">₹ 5999</div>
        <div class="original-price">₹ 9999</div>
      </div>
      <div class="product-button-container">
        <button class="btn btn-primary">
          <span><i class="fas fa-shopping-cart"></i></span> 
          ADD TO CART
        </button>
        <button class="btn btn-accent">BUY NOW</button>
      </div>
    </div>
  </div>
  <div class="card-badge">New</div>
</div>

Horizontal Card

This card is used in e-commerce apps.

RayBan Sunglasses
Rayban Sunglasses
₹ 5999
₹ 9999
41% off
  • Protects from UV rays
  • Made in USA
  • Fibre frames

<!-- Add URL in src -->
<div class="h-card card-border">
  <div class="card-image-container">
    <img src="">
  </div>
  <div class="product-description-container h-product-description">
    <div class="product-heading-price-container">
      <div class="product-heading">Rayban Sunglasses</div>
      <div class="product-price">
        <div class="selling-price">₹ 5999</div>
        <div class="original-price">₹ 9999</div>
      </div>
      <div class="discount-percentage">41% off</div>
    </div>
    <div class="product-description">
    </div>
    <div class="product-button-container">
      <button class="btn btn-primary">
        <span><i class="fas fa-shopping-cart"></i></span> 
        ADD TO CART
      </button>
      <button class="btn btn-accent">BUY NOW</button>
    </div>
  </div>
</div>
 Button
Grid