Cards can be used to show brief information about particular thing. You can use card for different purpose such as product information. Cards takes 100% width of their parent, to give specific widht, wrap the card inside the container and add width to that container.
Hydrogen provides two types of horizontal card. Card with
image in center and card with image at the top of the card.
You need to add img-top class to make the image
appear at the top, by default it is in center.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article class="card card-horizontal p-1 border-m box-shadow">
<div class="card-image">
<img
class="img-responsive"
src="../assets/product.webp"
alt="product image"
/>
</div>
<div class="card-body ml-1">
<h4 class="card-title">Acer Aspire 7 AMD Ryzen 5</h4>
<small class="txt-secondary">Sold by ITNXT</small>
<p class="txt-rg">
This laptop packs a punch in terms of performance as it
comes with an AMD Ryzen 5500U processor and NVIDIA
GeForce GTX 1650 graphics processor.
</p>
<div class="price-container mb-1">
<span class="txt-md mr-1 txt-bold">₹46,990</span>
<span class="txt-strike-through txt-secondary mr-1">₹56,999</span>
<span class="discount-percent txt-rg">17% off</span>
</div>
<div class="card-btn-container">
<button class="btn btn-primary">
<i class="fas fa-shopping-cart" aria-hidden="true"></i>
<span>Add to Cart</span>
</button>
<button class="btn btn-secondary-outline">
<span>Save for later</span>
</button>
</div>
</div>
</article>
<!-- image at top -->
<article class="card card-horizontal p-1 img-top border-m box-shadow">
<div class="card-image">
<img
class="img-responsive"
src="../assets/product.webp"
alt="product image"
/>
</div>
<div class="card-body ml-1">
<h4 class="card-title">Acer Aspire 7 AMD Ryzen 5</h4>
<small class="txt-secondary">Sold by ITNXT</small>
<p class="txt-rg">
This laptop packs a punch in terms of performance as it
comes with an AMD Ryzen 5500U processor and NVIDIA
GeForce GTX 1650 graphics processor.
</p>
<div class="price-container mb-1">
<span class="txt-md mr-1 txt-bold">₹46,990</span>
<span class="txt-strike-through txt-secondary mr-1">₹56,999</span>
<span class="discount-percent txt-rg">17% off</span>
</div>
<div class="card-btn-container">
<button class="btn btn-primary">
<i class="fas fa-shopping-cart" aria-hidden="true"></i>
<span>Add to Cart</span>
</button>
<button class="btn btn-secondary-outline">
<span>Save for later</span>
</button>
</div>
</div>
</article>
Add card-vertical class for the vertical card,
everything remains the same.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article class="card card-vertical p-1 border-m img-top">
<div class="card-image">
<img
class="img-responsive"
src="../assets/product.webp"
alt="product image"
/>
</div>
<div class="card-body ml-1">
<h3 class="card-title">Acer Aspire 7 AMD Ryzen 5</h3>
<small class="txt-secondary">Sold by ITNXT</small>
<p class="txt-rg">
This laptop packs a punch in terms of performance as it
comes with an AMD Ryzen 5500U processor and NVIDIA
GeForce GTX 1650 graphics processor.
</p>
<div class="price-container mb-1">
<span class="txt-md mr-1 txt-bold">₹46,990</span>
<span class="txt-strike-through txt-secondary mr-1">₹56,999</span>
<span class="discount-percent p-rg">17% off</span>
</div>
<div class="card-btn-container">
<button class="btn btn-primary">
<i class="fas fa-shopping-cart"></i>
<span>Add to Cart</span>
</button>
<button class="btn btn-secondary-outline">
<span>Save for later</span>
</button>
</div>
</div>
</article>
Card with text overlay can be used to add status information about the product such as out of stock.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article class="card card-vertical card-overlay p-1 border-m">
<div class="overlay-container">
<div class="card-image">
<img
class="img-responsive"
src="../assets/product.webp"
alt="product image"
/>
</div>
<div class="card-body ml-1">
<h3 class="card-title">Acer Aspire 7 AMD Ryzen 5</h3>
<small class="txt-secondary">Sold by ITNXT</small>
<p class="txt-rg">
This laptop packs a punch in terms of performance as
it comes with an AMD Ryzen 5500U processor and NVIDIA
GeForce GTX 1650 graphics processor.
</p>
<div class="price-container mb-1">
<span class="txt-md mr-1 txt-bold">₹46,990</span>
<span class="txt-strike-through txt-secondary mr-1">₹56,999</span>
<span class="discount-percent txt-rg">17% off</span>
</div>
<div class="card-btn-container">
<button class="btn btn-primary">
<i class="fas fa-shopping-cart"></i>
<span>Add to Cart</span>
</button>
<button class="btn btn-secondary-outline">
<span>Save for later</span>
</button>
</div>
</div>
</div>
<div class="overlay-text txt-lg txt-white">
<span class="p-1 border-m"> OUT OF STOCK </span>
</div>
</article>
Text only card don't contain image. Infomation is conveyed only using text.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor. It Features a 39.62 cm (15.6) Full HD LED Backlit screen, with an 81.61% screen-to-body ratio.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article class="card card-vertical p-1 border-m">
<div class="card-body">
<h3 class="card-title">Acer Aspire 7 AMD Ryzen 5</h3>
<small class="txt-secondary">Sold by ITNXT</small>
<p class="txt-rg">
This laptop packs a punch in terms of performance as it
comes with an AMD Ryzen 5500U processor and NVIDIA
GeForce GTX 1650 graphics processor. It Features a 39.62
cm (15.6) Full HD LED Backlit screen, with an 81.61%
screen-to-body ratio.
</p>
<div class="price-container mb-1">
<span class="txt-lg mr-1 txt-bold">₹46,990</span>
<span class="txt-strike-through txt-secondary mr-1">₹56,999</span>
<span class="discount-percent">17% off</span>
</div>
<div class="card-btn-container">
<button class="btn btn-primary">
<i class="fas fa-shopping-cart" aria-hidden="true"></i>
<span>Add to Cart</span>
</button>
<button class="btn btn-secondary-outline">
<span>Save for later</span>
</button>
</div>
</div>
</article>
You can use card with dismiss if you want the feature where user is able to dismiss the card.
This laptop packs a punch in terms of performance as it comes with an AMD Ryzen 5500U processor and NVIDIA GeForce GTX 1650 graphics processor.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article class="card card-vertical p-1 border-m card-dismiss">
<div class="card-image">
<img
class="img-responsive"
src="../assets/product.webp"
alt="product image"
/>
</div>
<div class="card-body ml-1">
<h4 class="card-title">Acer Aspire 7 AMD Ryzen 5</h4>
<small class="txt-secondary">Sold by ITNXT</small>
<p class="txt-rg">
This laptop packs a punch in terms of performance as it
comes with an AMD Ryzen 5500U processor and NVIDIA
GeForce GTX 1650 graphics processor.
</p>
<div class="price-container mb-1">
<span class="txt-md mr-1 txt-bold">₹46,990</span>
<span class="txt-strike-through txt-secondary mr-1">₹56,999</span>
<span class="discount-percent">17% off</span>
</div>
<div class="card-btn-container">
<button class="btn btn-primary">
<i class="fas fa-shopping-cart" aria-hidden="true"></i>
<span>Add to Cart</span>
</button>
<button class="btn btn-secondary-outline">
<span>Save for later</span>
</button>
</div>
</div>
<button class="btn card-dismiss-btn">
<i class="far fa-times-circle" title="dismis"></i>
</button>
</article>
JavaScript Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const cardDismissBtn = document.querySelector(".card-dismiss-btn");
cardDismissBtn.addEventListener("click", function dismissCard() {
const card = cardDismissBtn.parentElement;
card.remove();
});