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.

Wood phone case

$80.00

Wood phone case

$80.00

Example


<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.

Example


<!-- 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

Sale

Women's short top

$45.00 (20% off)

Example


<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

Google Home Base

2.8GHz Processor 1TB Storage 16GB DDR

New

Google Home

2.8GHz Processor 1TB Storage 16GB DDR

Example


<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>