Product
Use Boomerang's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Style 1
make sure to add .shop-default .shop-minimalist on the container of your product items so the style could apply correctly.
<div class="shop-default shop-minimalist">
<div class="row-wrapper">
<div class="row cols-xs-space cols-sm-space cols-md-space">
<div class="col-md-6">
<div class="block product no-radius">
<div class="product-image">
<div class="view view-first">
<a href="#">
<img src="path_to_your_image">
</a>
</div>
<div class="product-actions--a product-actions--2" data-animation-in="slideInRight" data-animation-out="slideOutRight">
<button type="button" class="btn-product-action">
<i class="ion-bag"></i>
</button>
<button type="button" class="btn-product-action">
<i class="ion-ios-heart-outline"></i>
</button>
</div>
</div>
<div class="block-body px-0">
<h3 class="heading heading-6 strong-500 text-capitalize mb-0">Wood phone case</h3>
<span class="star-rating star-rating-sm">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</span>
<div class="price-wrapper">
<span class="price heading-6 c-gray-light strong-400">$<span class="price-value">80.00</span></span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="block product no-radius">
<div class="product-image">
<div class="view view-first">
<a href="#">
<img src="path_to_your_image">
</a>
</div>
<div class="product-actions--a product-actions--2" data-animation-in="slideInRight" data-animation-out="slideOutRight">
<button type="button" class="btn-product-action">
<i class="ion-bag"></i>
</button>
<button type="button" class="btn-product-action">
<i class="ion-ios-heart-outline"></i>
</button>
</div>
</div>
<div class="block-body px-0">
<h3 class="heading heading-6 strong-500 text-capitalize mb-0">Wood phone case</h3>
<span class="star-rating star-rating-sm">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</span>
<div class="price-wrapper">
<span class="price heading-6 c-gray-light strong-400">$<span class="price-value">80.00</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Style 2
Make sure to add .shop-default .shop-minimalist on the container of your product items so the style could apply correctly.
Use
shadow utilities to change the depth of a card. You can use it by default or apply it only when the mouse hovers the card.
The modifier classes responsable for the card's depth styling are
.z-depth-* with values from 1 to 5.
<!-- Shadow visible on mouse hover only -->
<div class="row">
<div class="col-md-6">
<div class="block product no-border z-depth-2--hover">
<div class="block-image">
<a href="#">
<img src="path_to_your_image">
</a>
</div>
<div class="block-body px-0 text-center">
<h3 class="heading heading-6 strong-500 text-capitalize">
<a href="#">
Metallic dark table
</a>
</h3>
<div class="price-wrapper">
<span class="price heading-6 c-gray-light strong-400">$<span class="price-value">500.00</span></span>
</div>
</div>
<div class="product-actions--a product-actions--3" data-animation-in="slideInLeft" data-animation-out="slideOutLeft">
<button type="button" class="btn-product-action">
<i class="ion-bag"></i>
</button>
<button type="button" class="btn-product-action">
<i class="ion-ios-heart-outline"></i>
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="block product no-border z-depth-2--hover">
<div class="block-image">
<a href="#">
<img src="path_to_your_image">
</a>
</div>
<div class="block-body px-0 text-center">
<h3 class="heading heading-6 strong-500 text-capitalize">
<a href="#">
Metallic dark table
</a>
</h3>
<div class="price-wrapper">
<span class="price heading-6 c-gray-light strong-400">$<span class="price-value">500.00</span></span>
</div>
</div>
<div class="product-actions--a product-actions--3" data-animation-in="slideInLeft" data-animation-out="slideOutLeft">
<button type="button" class="btn-product-action">
<i class="ion-bag"></i>
</button>
<button type="button" class="btn-product-action">
<i class="ion-ios-heart-outline"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Visible shadow -->
<div class="row">
<div class="col-md-6">
<div class="block product no-border z-depth-2-top z-depth-2--hover">
<div class="block-image">
<a href="#">
<img src="path_to_your_image">
</a>
</div>
<div class="block-body px-0 text-center">
<h3 class="heading heading-6 strong-500 text-capitalize">
<a href="#">
Metallic dark table
</a>
</h3>
<div class="price-wrapper">
<span class="price heading-6 c-gray-light strong-400">$<span class="price-value">500.00</span></span>
</div>
</div>
<div class="product-actions--a product-actions--3" data-animation-in="slideInLeft" data-animation-out="slideOutLeft">
<button type="button" class="btn-product-action">
<i class="ion-bag"></i>
</button>
<button type="button" class="btn-product-action">
<i class="ion-ios-heart-outline"></i>
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="block product no-border z-depth-2-top z-depth-2--hover">
<div class="block-image">
<a href="#">
<img src="path_to_your_image">
</a>
</div>
<div class="block-body px-0 text-center">
<h3 class="heading heading-6 strong-500 text-capitalize">
<a href="#">
Metallic dark table
</a>
</h3>
<div class="price-wrapper">
<span class="price heading-6 c-gray-light strong-400">$<span class="price-value">500.00</span></span>
</div>
</div>
<div class="product-actions--a product-actions--3" data-animation-in="slideInLeft" data-animation-out="slideOutLeft">
<button type="button" class="btn-product-action">
<i class="ion-bag"></i>
</button>
<button type="button" class="btn-product-action">
<i class="ion-ios-heart-outline"></i>
</button>
</div>
</div>
</div>
</div>
Style 3
New
Sale
<div class="shop-default shop-sportswear">
<div class="row cols-xs-space cols-sm-space cols-md-space">
<div class="col-md-6">
<div class="block product no-border z-depth-2--hover">
<div class="block-image">
<a href="#">
<img src="path_to_your_image" class="img-center">
</a>
<span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
</div>
<div class="block-body pt-0 text-center">
<h3 class="heading heading-6 strong-500 text-capitalize">
<a href="#">
Women's running shoes
</a>
</h3>
<div class="product-colors text-center mt-2">
<div class="color-switch float-wrapper">
<a href="#" class="bg-purple"></a>
<a href="#" class="bg-pink"></a>
<a href="#" class="bg-blue"></a>
</div>
</div>
<div class="price-wrapper mt-2">
<span class="price heading-6 c-gray-dark strong-500">$<span class="price-value">120.00</span></span>
</div>
</div>
<div class="product-actions--a product-actions--3" data-animation-in="slideInLeft" data-animation-out="slideOutLeft">
<button type="button" class="btn-product-action">
<i class="ion-bag"></i>
</button>
<button type="button" class="btn-product-action">
<i class="ion-ios-heart-outline"></i>
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="block product no-border z-depth-2--hover">
<div class="block-image">
<a href="#">
<img src="path_to_your_image" class="img-center">
</a>
<span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-red text-uppercase">Sale</span>
</div>
<div class="block-body pt-0 text-center">
<h3 class="heading heading-6 strong-500 text-capitalize">
<a href="#">
Women's short top
</a>
</h3>
<div class="product-colors text-center mt-2">
<div class="color-switch float-wrapper">
<a href="#" class="bg-black"></a>
<a href="#" class="bg-pink"></a>
<a href="#" class="bg-orange"></a>
</div>
</div>
<div class="price-wrapper mt-2">
<span class="price heading-6 c-gray-dark strong-500">
$<span class="price-value">45.00</span>
<small class="c-red">(20% off)</small>
</span>
</div>
</div>
<div class="product-actions--a product-actions--3" data-animation-in="slideInLeft" data-animation-out="slideOutLeft">
<button type="button" class="btn-product-action">
<i class="ion-bag"></i>
</button>
<button type="button" class="btn-product-action">
<i class="ion-ios-heart-outline"></i>
</button>
</div>
</div>
</div>
</div>
</div>
Style 4
New
2.8GHz Processor 1TB Storage 16GB DDR
New
2.8GHz Processor 1TB Storage 16GB DDR
<div class="shop-default shop-cards shop-tech">
<div class="row">
<div class="col-md-6">
<div class="block product no-border z-depth-2-top z-depth-2--hover">
<div class="block-image">
<a href="#">
<img src="path_to_your_image" class="img-center">
</a>
<span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
</div>
<div class="block-body text-center">
<h3 class="heading heading-5 strong-600 text-capitalize">
<a href="#">
Google Home Base
</a>
</h3>
<p class="product-description">
2.8GHz Processor 1TB Storage 16GB DDR
</p>
<div class="product-colors mt-2">
<div class="color-switch float-wrapper">
<a href="#" class="bg-purple"></a>
<a href="#" class="bg-pink"></a>
<a href="#" class="bg-blue"></a>
</div>
</div>
<div class="product-buttons mt-4">
<div class="row align-items-center">
<div class="col-2">
<button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
<i class="ion-ios-heart"></i>
</button>
</div>
<div class="col-2">
<button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
<i class="ion-ios-browsers-outline"></i>
</button>
</div>
<div class="col-8">
<button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
<i class="icon ion-android-cart"></i>Add to cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="block product no-border z-depth-2-top z-depth-2--hover">
<div class="block-image">
<a href="#">
<img src="path_to_your_image" class="img-center">
</a>
<span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
</div>
<div class="block-body text-center">
<h3 class="heading heading-5 strong-600 text-capitalize">
<a href="#">
Google Home
</a>
</h3>
<p class="product-description">
2.8GHz Processor 1TB Storage 16GB DDR
</p>
<div class="product-colors mt-2">
<div class="color-switch float-wrapper">
<a href="#" class="bg-purple"></a>
<a href="#" class="bg-pink"></a>
<a href="#" class="bg-blue"></a>
</div>
</div>
<div class="product-buttons mt-4">
<div class="row align-items-center">
<div class="col-2">
<button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Favorite">
<i class="ion-ios-heart"></i>
</button>
</div>
<div class="col-2">
<button type="button" class="btn-icon" data-toggle="tooltip" data-placement="top" title="" data-original-title="Compare">
<i class="ion-ios-browsers-outline"></i>
</button>
</div>
<div class="col-8">
<button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
<i class="icon ion-android-cart"></i>Add to cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
New
New