Properties List
Display the elements of the property in the list layout
Properties List 01
Home in Metric Way
1421 San Pedro St, Los Angeles
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- 3 Br
- 3 Ba
- 2300 Sq.Ft
- 1 Gr
- 2020
$1.250.000
<div class="px-lg-6">
<div class="media p-4 border rounded-lg shadow-hover-1 pr-lg-8 mb-6 flex-column flex-lg-row no-gutters">
<div class="col-lg-4 mr-lg-5 card border-0 hover-change-image bg-hover-overlay">
<img src="../../images/properties-list-01.jpg" class="card-img" alt="Home in Metric Way">
<div class="card-img-overlay p-2 d-flex flex-column">
<div><span class="badge badge-primary">For Sale</span></div>
<div class="mt-auto d-flex hover-image">
<ul class="list-inline mb-0 d-flex align-items-end mr-auto">
<li class="list-inline-item mr-2" data-toggle="tooltip" title="9 Images">
<a href="#" class="text-white hover-primary">
<i class="far fa-images"></i><span class="pl-1">9</span>
</a>
</li>
<li class="list-inline-item" data-toggle="tooltip" title="2 Video">
<a href="#" class="text-white hover-primary">
<i class="far fa-play-circle"></i><span class="pl-1">2</span>
</a>
</li>
</ul>
<ul class="list-inline mb-0 d-flex align-items-end mr-n3">
<li class="list-inline-item mr-3 h-32" data-toggle="tooltip" title="Wishlist">
<a href="#" class="text-white fs-20 hover-primary">
<i class="far fa-heart"></i>
</a>
</li>
<li class="list-inline-item mr-3 h-32" data-toggle="tooltip" title="Compare">
<a href="#" class="text-white fs-20 hover-primary">
<i class="fas fa-exchange-alt"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="media-body mt-5 mt-lg-0">
<h2 class="my-0"><a href="../../single-property-1.html"
class="fs-16 lh-2 text-dark hover-primary d-block">Home in Metric Way</a></h2>
<p class="mb-2 font-weight-500 text-gray-light">1421 San Pedro St, Los Angeles</p>
<p class="mb-6 mxw-571 ml-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut</p>
<div class="d-lg-flex justify-content-lg-between">
<ul class="list-inline d-flex mb-0 flex-wrap">
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="3 Bedroom">
<svg class="icon icon-bedroom fs-18 text-primary mr-1">
<use xlink:href="#icon-bedroom"></use>
</svg>
3 Br
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="3 Bathrooms">
<svg class="icon icon-shower fs-18 text-primary mr-1">
<use xlink:href="#icon-shower"></use>
</svg>
3 Ba
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="Size">
<svg class="icon icon-square fs-18 text-primary mr-1">
<use xlink:href="#icon-square"></use>
</svg>
2300 Sq.Ft
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="1 Garage">
<svg class="icon icon-Garage fs-18 text-primary mr-1">
<use xlink:href="#icon-Garage"></use>
</svg>
1 Gr
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="Year">
<svg class="icon icon-year fs-18 text-primary mr-1">
<use xlink:href="#icon-year"></use>
</svg>
2020
</li>
</ul>
<p class="fs-22 font-weight-bold text-heading lh-1 mb-0 pr-lg-3 mb-lg-2 mt-3 mt-lg-0">$1.250.000</p>
</div>
</div>
</div>
</div>Properties List 02
Home in Metric Way
1421 San Pedro St, Los Angeles
$1.250.000
Lorem ipsum dolor sit amet, sectetur cing elit uspe ndisse suscorem ipsum dolor sitorem sit amet, sectetur cing elit uspe ndisse suscorem ipsum dolor sitorem
- 3 Br
- 3 Ba
- 2300 Sq.Ft
- 1 Gr
- 2020
For Sale
<div style="max-width: 770px">
<div class="py-5 px-4 border rounded-lg shadow-hover-1 bg-white mb-6">
<div class="media flex-column flex-sm-row no-gutters">
<div class="col-sm-3 mr-sm-5 card border-0 hover-change-image bg-hover-overlay mb-sm-5">
<img src="../../images/properties-list-03.jpg" class="card-img" alt="Home in Metric Way">
<div class="card-img-overlay p-2">
<ul class="list-inline mb-0 d-flex justify-content-center align-items-center h-100 hover-image">
<li class="list-inline-item">
<a href="#"
class="w-40px h-40 border rounded-circle d-inline-flex align-items-center justify-content-center text-heading bg-white border-white bg-hover-primary border-hover-primary hover-white"
data-toggle="tooltip" title="Wishlist">
<i class="far fa-heart"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#"
class="w-40px h-40 border rounded-circle d-inline-flex align-items-center justify-content-center text-heading bg-white border-white bg-hover-primary border-hover-primary hover-white"
data-toggle="tooltip" title="Compare">
<i class="fas fa-exchange-alt"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="media-body mt-3 mt-sm-0">
<h2 class="my-0"><a href="../../single-property-1.html"
class="fs-16 lh-2 text-dark hover-primary d-block">Home in Metric Way</a></h2>
<p class="mb-1 font-weight-500 text-gray-light">1421 San Pedro St, Los Angeles</p>
<p class="fs-17 font-weight-bold text-heading mb-1">$1.250.000</p>
<p class="mb-2 ml-0">Lorem ipsum dolor sit amet, sectetur cing elit uspe ndisse suscorem ipsum dolor
sitorem sit amet, sectetur cing elit uspe ndisse suscorem ipsum dolor sitorem </p>
</div>
</div>
<div class="d-lg-flex justify-content-lg-between">
<ul class="list-inline d-flex mb-0 flex-wrap">
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="3 Bedroom">
<svg class="icon icon-bedroom fs-18 text-primary mr-1">
<use xlink:href="#icon-bedroom"></use>
</svg>
3 Br
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="3 Bathrooms">
<svg class="icon icon-shower fs-18 text-primary mr-1">
<use xlink:href="#icon-shower"></use>
</svg>
3 Ba
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="Size">
<svg class="icon icon-square fs-18 text-primary mr-1">
<use xlink:href="#icon-square"></use>
</svg>
2300 Sq.Ft
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="1 Garage">
<svg class="icon icon-Garage fs-18 text-primary mr-1">
<use xlink:href="#icon-Garage"></use>
</svg>
1 Gr
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="Year">
<svg class="icon icon-year fs-18 text-primary mr-1">
<use xlink:href="#icon-year"></use>
</svg>
2020
</li>
</ul>
<div class="badge badge-primary mr-xl-2 mt-3 mt-lg-0">For Sale</div>
</div>
</div>
</div>Properties List 03
Garden Gingerbread House
1421 San Pedro St, Los Angeles
Lorem ipsum dolor sit amet, sectetur cing elit uspe ndisse suscorem ipsum dolor sitorem sit amet, sectetur cing elit uspe ndisse
$1.250.000
- 3 Br
- 3 Ba
- 2300 Sq.Ft
- 1 Gr
<div style="max-width: 770px">
<div class="media mb-6 flex-column flex-lg-row align-items-lg-center no-gutters">
<div class="col-lg-6 mr-lg-6 card border-sm-0 hover-change-image bg-hover-overlay">
<img src="../../images/properties-list-06.jpg" class="card-img" alt="Garden Gingerbread House">
<div class="card-img-overlay p-2 d-flex flex-column">
<div><span class="badge badge-indigo">For Sale</span></div>
<div class="mt-auto d-flex hover-image">
<ul class="list-inline mb-0 d-flex align-items-end mr-auto">
<li class="list-inline-item mr-2" data-toggle="tooltip" title="9 Images">
<a href="#" class="text-white hover-primary">
<i class="far fa-images"></i><span class="pl-1">9</span>
</a>
</li>
<li class="list-inline-item" data-toggle="tooltip" title="2 Video">
<a href="#" class="text-white hover-primary">
<i class="far fa-play-circle"></i><span class="pl-1">2</span>
</a>
</li>
</ul>
<ul class="list-inline mb-0 d-flex align-items-end mr-n3">
<li class="list-inline-item mr-3 h-32" data-toggle="tooltip" title="Wishlist">
<a href="#" class="text-white fs-20 hover-primary">
<i class="far fa-heart"></i>
</a>
</li>
<li class="list-inline-item mr-3 h-32" data-toggle="tooltip" title="Compare">
<a href="#" class="text-white fs-20 hover-primary">
<i class="fas fa-exchange-alt"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="media-body mt-5 mt-lg-0">
<h2 class="my-0"><a href="../../single-property-1.html"
class="fs-16 lh-2 text-dark hover-primary d-block">Garden Gingerbread House</a></h2>
<p class="mb-1 font-weight-500 text-gray-light">1421 San Pedro St, Los Angeles</p>
<p class="mb-2 ml-0">Lorem ipsum dolor sit amet, sectetur cing elit uspe ndisse suscorem ipsum dolor sitorem
sit amet, sectetur cing elit uspe ndisse</p>
<p class="fs-17 font-weight-bold text-heading mb-3">$1.250.000</p>
<ul class="list-inline d-flex mb-0 flex-wrap border-top pt-3 mr-n5">
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="3 Bedroom">
<svg class="icon icon-bedroom fs-18 text-primary mr-1">
<use xlink:href="#icon-bedroom"></use>
</svg>
3 Br
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="3 Bathrooms">
<svg class="icon icon-shower fs-18 text-primary mr-1">
<use xlink:href="#icon-shower"></use>
</svg>
3 Ba
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="Size">
<svg class="icon icon-square fs-18 text-primary mr-1">
<use xlink:href="#icon-square"></use>
</svg>
2300 Sq.Ft
</li>
<li class="list-inline-item text-gray font-weight-500 fs-13 d-flex align-items-center mr-5"
data-toggle="tooltip" title="1 Garage">
<svg class="icon icon-Garage fs-18 text-primary mr-1">
<use xlink:href="#icon-Garage"></use>
</svg>
1 Gr
</li>
</ul>
</div>
</div>
</div>