Important Links

Get Started

Components

Avatar Alert Badge Button Cards Image Input Texts Utilites List Navigation Rating Snackbar Grid Modal

Home Components Cards

Cards

Cards are the container that display content on a topic.

Usages

Hello World!

This is paragraph.

This is the basic card component which is having a fixed dimension value of 200x200px.

                
                  < -- For Default card 200x200px -->
                  

                  <div class="card">

                    <h1> Hello World!</h1> 

                  </div>

Images Cards

The class = "round-img" is having default value of border-radius of 50% explicitly.

Usages

Hello World!

This is paragraph.

To achieve the above Images design, you need to follow the following code:

                
                  < -- For Text with Image -->
                  

                  <div class="card-img">
                  

                  <img src="url" alt="image" />
                  

                  <div class="card_data">
                  

                  <h1>Hello World </h1> 

                  <p>This is paragraph.</p>
                  

                  </div> 

                  </div>

Card with Dismiss

Card with Dismiss will help you to close the dialog/popup message.

Usages

This is dialog

To achieve the above Images design, you need to follow the following code:

                
                  
                  <div class="card-dismiss">
                  

                  <div class="card_header">
                  

                  <i class="fa fa-close"></i>
                  

                  </div>
                  

                  <div class="card-data">
                  

                  <h1>This is Card with Dismiss</h1>
                  

                  </div>
                  

                  </div>

Ecommerce Card

Ecommerce component will help you to list your products on your web page.

Usages

NEW

Apple

Iphone 13 Pro Max

Rs. 89,1000 Rs. 90,000 (22% OFF)

To achieve the above Images design, you need to follow the following code:

                
                  < -- For Ecommerce Card -->
                  

                  <div class="card ecom">
                  

                  <div class="product-image">
                  

                  <img src="url" alt="image" />
                  

                  </div> 

                  <div class="cart-badge">
                  

                  <button class="ico">
                  

                  </button> 

                  <div class="card-title">Apple</div> 

                  <div class="card-text">Iphone 13 pro max</div> 

                  <div class="card-price">

                  <span class="price-now"> Rs. 89,100</span>

                  <span class="price-before">Rs. 90,000</span>

                  <span class="discount">(22% Off</span>

                  </div> 

                  <button class="btn btn-primary">Add to Cart
                  </button> 

                  </div>

Cards

Image