Card
Cards are pre-built containers that provides a short and crisp information to the user through text, images, links, and buttons.
Vertical Card
Vertical cards are available in 2 varients- simple vertical card, simple vertical card + label. Use the vertical card class for the component and the classes vertical-card-container and for badge just add a single line shown in code example and use according to your need. You can copy html part from below code snippet.
Code Example
<section class="card-content vertical-card-container">
<div class="card">
<img class="card-img" src="https://picsum.photos/250/300" alt="" />
Paste the line below to add badge👇
<span class="card-badge">Best Seller</span>
<div class="card-info">
<div class="card-title">
<div>
<h3>Lorem ipsum</h3>
<p class="card-description">Lorem ipsum dolor sit.</p>
</div>
<i class="fas fa-heart" aria-hidden="true"></i>
</div>
<div class="price">
<p class="current-price">₹50</p>
<p class="actual-price">₹100</p>
<p class="discount-percentage">(50% OFF)</p>
</div>
</div>
<div class="bottom-btn cart">
<button class="btn default add-cart">Add to Cart</button>
</div>
</div>
</section>
Lorem ipsum
Lorem ipsum dolor sit.
₹50
₹100
(50% OFF)
Lorem ipsum
Lorem ipsum dolor sit.
₹50
₹100
(50% OFF)
Horizontal Card
Create a horizontal card by using the code below. Use the horizontal card class for the component and the classes horizontal-card-container. It contains dismiss button and quantity section. You can copy html part from below code snippet.
Code Example
<section class="card-content horizontal-card-container">
<div class="card">
<div class="card-horizontal">
<img class="card-img horizontal-img" src="https://picsum.photos/200/300" alt="" />
<div class="card-info">
<i class="fas fa-times dismiss-btn"></i>
<div class="card-title">
<div>
<h3>Lorem, ipsum dolor.</h3>
<p class="card-description">Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="price">
<p class="current-price">₹100</p>
<p class="actual-price">₹200</p>
<p class="discount-percentage">(50% OFF)</p>
</div>
<div class="quantity">
<button class="minus">-</button>
<input class="count" type="number" value="1" />
<button class="add">+</button>
</div>
</div>
</div>
<div class="horizontal-btn">
<button class="remove-btn">REMOVE</button>
<button class="later-btn">SAVE FOR LATER</button>
</div>
</div>
</section>
Lorem, ipsum dolor.
Lorem ipsum dolor sit amet consectetur.
₹100
₹200
(50% OFF)
Text-Only Card
Create a text-only card by using the code below. Use the card class for the component and the classes text-only-card-container. You can copy html part from below code snippet.
Code Example
<section class="card-content text-only-card-container">
<div class="card">
<div class="text-info">
<h1>Lorem, ipsum dolor.</h1>
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui nemo dignissimos facilis
reprehenderit libero possimus quo, aliquid voluptatum quas! Animi distinctio harum assumenda
error in aut quod molestias voluptates reiciendis!</p>
</div>
</div>
</section>
Lorem, ipsum dolor.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui nemo dignissimos facilis reprehenderit libero possimus quo, aliquid voluptatum quas! Animi distinctio harum assumenda error in aut quod molestias voluptates reiciendis!
Text-Overlay Card
Create a text-overlay card by using the code below. Use the card class for the component and the classes text-overlay-card-container. You can copy html part from below code snippet.
Code Example
<section class="card-content text-overlay-card-container">
<div class="card">
<img class="card-img" src="https://picsum.photos/250/300" alt="" />
<div class="card-info">
<div class="card-title">
<div class="text-overlay">
<h3>Lorem ipsum</h3>
<p class="card-description">Lorem ipsum dolor sit.</p>
</div>
<i class="fas fa-heart" aria-hidden="true"></i>
</div>
<div class="price">
<p class="current-price">₹50</p>
<p class="actual-price">₹100</p>
<p class="discount-percentage">(50% OFF)</p>
</div>
</div>
<div class="bottom-btn cart">
<button class="btn default add-cart">Add to Cart</button>
</div>
</div>
</section>
₹50
₹100
(50% OFF)