Real Estate

Use Boomerang's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Style 1

You can choose to add a shadow instead of the default borders. The same rules as for the cards apply here also. See the shadow modifier classes to get the style you want.
  • 150 sqft
  • 5
  • Baths

3015 Grand Avenue, CocoWalk

Lorem ipsum dolor sit amet consectetur adipisg elitm.

For sale
  • 150 sqft
  • 5
  • Baths

3015 Grand Avenue, CocoWalk

Lorem ipsum dolor sit amet consectetur adipisg elitm.

Example


<div class="row cols-md-space cols-sm-space cols-xs-space">
    <div class="col-lg-6">
        <div class="block block--style-3">
            <div class="block-image relative">
                <div class="view view-first">
                    <a href="#">
                        <img src="path_to_your_image" class="img-fluid">
                    </a>
                </div>
            </div>

            <div class="aux-info-wrapper border-bottom">
                <ul class="aux-info">
                    <li class="heading strong-400 text-center">
                        <i class="icon-real-estate-017"></i> 150 sqft</span>
                    </li>
                    <li class="heading strong-400 text-center">
                        <i class="icon-hotel-restaurant-022"></i> 5
                    </li>
                    <li class="heading strong-400 text-center">
                        <i class="icon-hotel-restaurant-158"></i> Baths
                    </li>
                </ul>
            </div>

            <div class="block-body">
                <h3 class="heading heading-sm">
                    <a href="#">
                        3015 Grand Avenue, CocoWalk
                    </a>
                </h3>
                <p class="description">
                    Lorem ipsum dolor sit amet consectetur adipisg elitm.
                </p>
            </div>
            <div class="block-footer border-top py-3">
                <div class="row align-items-center">
                    <div class="col-7">
                        <span class="block-price">$250.800</span>
                        <span class="block-price-text"></span>
                    </div>
                    <div class="col-5 text-right">
                         <span class="capacity" data-toggle="tooltip" data-placement="left" data-original-title="Capacity:<br><strong>2 members</strong>">
                            <i class="icon ion-person"></i>
                            <i class="icon ion-person"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="block block--style-3">
            <div class="block-image relative">
                <div class="view view-first">
                    <a href="#">
                        <img src="path_to_your_image" class="img-fluid">
                    </a>
                </div>
                <span class="block-ribbon block-ribbon-fixed block-ribbon-right bg-yellow">For sale</span>
            </div>

            <div class="aux-info-wrapper border-bottom">
                <ul class="aux-info">
                    <li class="heading strong-400 text-center">
                        <i class="icon-real-estate-017"></i> 150 sqft</span>
                    </li>
                    <li class="heading strong-400 text-center">
                        <i class="icon-hotel-restaurant-022"></i> 5
                    </li>
                    <li class="heading strong-400 text-center">
                        <i class="icon-hotel-restaurant-158"></i> Baths
                    </li>
                </ul>
            </div>

            <div class="block-body">
                <h3 class="heading heading-sm">
                    <a href="#">
                        3015 Grand Avenue, CocoWalk
                    </a>
                </h3>
                <p class="description">
                    Lorem ipsum dolor sit amet consectetur adipisg elitm.
                </p>
            </div>
            <div class="block-footer border-top py-3">
                <div class="row align-items-center">
                    <div class="col-7">
                        <span class="block-price">$250.800</span>
                        <span class="block-price-text"></span>
                    </div>
                    <div class="col-5 text-right">
                         <span class="capacity" data-toggle="tooltip" data-placement="left" data-original-title="Capacity:<br><strong>2 members</strong>">
                            <i class="icon ion-person"></i>
                            <i class="icon ion-person"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Style 2

2030 Misty Wagon

4 days only

Special Offer

For sale

2030 Misty Wagon

4 days only

Special Offer

Example


<div class="row cols-md-space cols-sm-space cols-xs-space">
    <div class="col-lg-6">
        <div class="block block--style-3">
            <div class="block-image relative">
                <a href="#">
                    <img src="path_to_your_image">
                </a>
            </div>

            <div class="block-body">
                <h3 class="heading heading-6">
                    2030 Misty Wagon
                </h3>
                <small>4 days only</small>
                <h4 class="heading heading-6 c-base-1 strong-400">Special Offer</h4>
            </div>
            <div class="block-footer border-top">
                <div class="row align-items-center">
                    <div class="col-12">
                        <span class="block-price">$4000</span>
                        <span class="block-price-text">per month</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="block block--style-3">
            <div class="block-image relative">
                <a href="#">
                    <img src="path_to_your_image">
                </a>
                <span class="block-ribbon block-ribbon-fixed block-ribbon-right bg-yellow">For sale</span>
            </div>

            <div class="block-body">
                <h3 class="heading heading-6">
                    2030 Misty Wagon
                </h3>
                <small>4 days only</small>
                <h4 class="heading heading-6 c-base-1 strong-400">Special Offer</h4>
            </div>
            <div class="block-footer border-top">
                <div class="row align-items-center">
                    <div class="col-12">
                        <span class="block-price">$4000</span>
                        <span class="block-price-text">per month</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Style 3

For sale $15.000

1.5 km from you

  • 150 sqft
  • 5
  • Baths
For sale $15.000

1.5 km from you

  • 150 sqft
  • 5
  • Baths

Example


<div class="row cols-md-space cols-sm-space cols-xs-space">
    <div class="col-lg-6">
        <div class="block block--style-3">
            <div class="block-image relative">
                <div class="view view-first">
                    <a href="#">
                        <img src="path_to_your_image" >
                    </a>
                </div>
                <span class="block-ribbon block-ribbon-fixed block-ribbon-right bg-yellow">For sale</span>
                <span class="block-price-over bg-base-4">$15.000</span>
            </div>

            <div class="block-body text-center mt-1">
                <h3 class="heading heading-5 strong-400 text-normal mb-1">
                    <strong>1.5 km</strong>
                    <span class="heading-6">from you</span>
                </h3>
                <span class="star-rating">
                    <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>
                <span class="clearfix"></span>
            </div>

            <div class="aux-info-wrapper border-top">
                <ul class="aux-info">
                    <li class="heading strong-400 text-center">
                        <i class="icon-real-estate-017"></i> 150 sqft
                    </li>
                    <li class="heading strong-400 text-center">
                        <i class="icon-hotel-restaurant-022"></i> 5
                    </li>
                    <li class="heading strong-400 text-center">
                        <i class="icon-hotel-restaurant-158"></i> Baths
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="block block--style-3">
            <div class="block-image relative">
                <div class="view view-first">
                    <a href="#">
                        <img src="path_to_your_image" >
                    </a>
                </div>
                <span class="block-ribbon block-ribbon-fixed block-ribbon-right bg-yellow">For sale</span>
                <span class="block-price-over bg-base-4">$15.000</span>
            </div>

            <div class="block-body text-center mt-1">
                <h3 class="heading heading-5 strong-400 text-normal mb-1">
                    <strong>1.5 km</strong>
                    <span class="heading-6">from you</span>
                </h3>
                <span class="star-rating">
                    <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>
                <span class="clearfix"></span>
            </div>

            <div class="aux-info-wrapper border-top">
                <ul class="aux-info">
                    <li class="heading strong-400 text-center">
                        <i class="icon-real-estate-017"></i> 150 sqft
                    </li>
                    <li class="heading strong-400 text-center">
                        <i class="icon-hotel-restaurant-022"></i> 5
                    </li>
                    <li class="heading strong-400 text-center">
                        <i class="icon-hotel-restaurant-158"></i> Baths
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>