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.
Lorem ipsum dolor sit amet consectetur adipisg elitm.
Lorem ipsum dolor sit amet consectetur adipisg elitm.
<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
<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
<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>
