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



  
    heading
  
  
    description
  


  
    heading
  
  
    description

Postcard

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

Lukasz Szmigiel

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




  
    
  
  
    
      card heading
    
    
      Card desecription

Product Card

This card is used in e-commerce apps.

Rayban Sunglasses

₹ 5999

₹ 9999

New




  
    
  
  
    Rayban Sunglasses
    
      
        ₹ 5999
        ₹ 9999
      
      
        
        
      
    
  
  New

Overlay Card

Card with overlay text.

Rayban Sunglasses

₹ 5999

₹ 9999

OUT OF STOCK




  
    
  
  
    Rayban Sunglasses
    
      
        ₹ 5999
        ₹ 9999
      
      
        
        
      
    
  
  New

Horizontal Card

This card is used in e-commerce apps.

Rayban Sunglasses

₹ 5999

₹ 9999

41% off

Protects from UV rays
Made in USA
Fibre frames




  
    
  
  
    
      Rayban Sunglasses
      
        ₹ 5999
        ₹ 9999
      
      41% off