Molecules
Background Form
I want landlords to compete for me.
<div class="intro">
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-sm-6">
<h2>I want landlords to compete for me.</h2>
<form class="form-inline" style="line-height: 40px; font-size: 1.5em;">
<span>I want </span>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<span> bedrooms, </span>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<span> in </span>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
</form>
</div>
</div>
</div>
</div>
</div>Cards
New launches
Listings
Bidding
<div class="container" ng-controller="CardController">
<div class="row">
<h1 class="text-center">New launches</h1>
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="cards-price-section">
From: S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 - 3<i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">1 - 3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="cards-price-section">
From: S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 - 3<i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">1 - 3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="cards-price-section">
From: S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 - 3<i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">1 - 3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
</div>
<!--end new launch row-->
<div class="row">
<h1 class="text-center">Listings</h1>
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
</div>
<!--end listings row-->
<div class="row">
<h1 class="text-center">Bidding</h1>
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="card-timer">
<count-down endtime="endtime"></count-down>
</div>
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="card-timer">
<count-down endtime="endtime"></count-down>
</div>
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
<div class="col-md-4">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="card-timer">
<count-down endtime="endtime"></count-down>
</div>
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
</div>
<!--end listings row-->
<div class="row">
<h1 class="text-center">3d showflat</h1>
<div class="col-md-4">
<a class="cards card-3dv" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="card-3dv-action">
<h6><strong>Click here to view</strong></h6>
</div>
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
<div class="col-md-4">
<a class="cards card-3dv" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="card-3dv-action">
<h6><strong>Click here to view</strong></h6>
</div>
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
<div class="col-md-4">
<a class="cards card-3dv" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<!--<div class="tag">
<span class="label label-alt3">Label alt3</span>
</div>-->
<div class="card-3dv-action">
<h6><strong>Click here to view</strong></h6>
</div>
<div class="cards-price-section">
S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 <i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
<!--end card-->
</div>
</div>Options
<div class="container">
<div class="row">
<div class="col-sm-6">
<a href="#">
<div class="img-responsive-container" style="background-image: url('http://placehold.it/400x300'); height: 200px; display: block;"></div>
</a>
<h3>For Tenants</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet atque cum dolorum exercitationem impedit minus mollitia nemo repellat, rerum soluta. Ea facilis iste nulla voluptates. Illum laboriosam qui quos sit!</p>
</div>
<div class="col-sm-6">
<a href="#">
<div class="img-responsive-container" style="background-image: url('http://placehold.it/400x300'); height: 200px; display: block;"></div>
</a>
<h3 color="">For Tenants</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet atque cum dolorum exercitationem impedit minus mollitia nemo repellat, rerum soluta. Ea facilis iste nulla voluptates. Illum laboriosam qui quos sit!</p>
</div>
</div>
</div>Searchbar
<div class="container">
<div class="searchbar">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><strong>Listings</strong> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Bidding</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">New Launch</a></li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" placeholder="Search for Project, Area, or Street">
<span class="input-group-btn">
<button class="btn btn-alt5" type="button"><strong>Search</strong></button>
</span>
</div>
<button type="button" class="btn btn-lg btn-alt5 btn-block btn-no-radius hidden-lg hidden-md hidden-sm"><strong>Search</strong></button>
</div>
</div>Slider
<div class="col span_4 fwImage">
<div id="gallery-1" class="royalSlider rsDefault">
<a class="rsImg" data-rsBigImg="http://placehold.it/950x500" href="http://placehold.it/950x500"><img width="96" height="72" class="rsTmb" src="http://placehold.it/96x72" /></a>
<a class="rsImg" data-rsBigImg="http://placehold.it/950x500" href="http://placehold.it/950x500"><img width="96" height="72" class="rsTmb" src="http://placehold.it/96x72" /></a>
<a class="rsImg" data-rsBigImg="http://placehold.it/950x500" href="http://placehold.it/950x500"><img width="96" height="72" class="rsTmb" src="http://placehold.it/96x72" /></a>
<a class="rsImg" data-rsBigImg="http://placehold.it/950x500" href="http://placehold.it/950x500"><img width="96" height="72" class="rsTmb" src="http://placehold.it/96x72" /></a>
<!--<a class="rsImg" data-rsBigImg="http://placehold.it/950x500" href="http://placehold.it/950x500">Rembrandt - The Night Watch<img width="96" height="72" class="rsTmb" src="http://placehold.it/96x72" /></a>-->
<!--<a class="rsImg" data-rsBigImg="http://placehold.it/950x500" href="http://placehold.it/950x500">Johannes Vermeer - Girl with a Pearl Earring<img width="96" height="72" class="rsTmb" src="http://placehold.it/96x72" /></a>-->
<!--<a class="rsImg" data-rsBigImg="http://placehold.it/950x500" href="http://placehold.it/950x500">Paul Cezanne - Card Players<img width="96" height="72" class="rsTmb" src="http://placehold.it/96x72" /></a>-->
</div>
</div>Slider Bullet
<ul class="slider-bullet" style="display: block;">
<li class="slick-active">
<button>1</button>
</li>
<li class="">
<button>2</button>
</li>
<li class="">
<button>3</button>
</li>
<li class="">
<button>4</button>
</li>
</ul>Slideshow
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur consequatur debitis dignissimos distinctio dolores earum est id impedit iste, maiores molestiae, nobis nulla optio sunt temporibus ut veritatis voluptates?- Joe
<div class="container" ng-controller="QuotesController">
<div class="row">
<owl-carousel id="owl-example" class="owl-carousel" option="owlOptions">
<div class="owl-card-wrapper" owl-carousel-item ng-repeat="($index, listing) in listings">
<div class="quote-card">
<blockquote>
<div class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur consequatur debitis dignissimos distinctio dolores earum est id impedit iste, maiores molestiae, nobis nulla optio sunt temporibus ut veritatis voluptates?</div>
<div class="quote-by pull-right">- Joe</div>
</blockquote>
</div>
</div>
</owl-carousel>
</div>
</div>Table
Table Bordered
| Table Heading 1 | Table Heading 2 | Table Heading 3 |
|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
<table class="table table-bordered">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
</table>Table Colored
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 3 | Table Heading 3 |
|---|---|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 3 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 3 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 3 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 3 | Table Cell 3 |
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 3</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 3</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 3</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 3</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 3</td>
<td>Table Cell 3</td>
</tr>
</tbody>
</table>
</div>Table Condensed
| Table Heading 1 | Table Heading 2 | Table Heading 3 |
|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
<table class="table table-condensed">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
</table>Table Normal
| Table Heading 1 | Table Heading 2 | Table Heading 3 |
|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
<table class="table">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
</table>Tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid doloribus ipsa minima nesciunt, veniam voluptatem. Earum labore maiores nesciunt quasi quis sit voluptates? Aliquam aspernatur atque nulla sequi tenetur?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis culpa delectus, dicta eaque earum error, in laboriosam maiores maxime minima nam quia quod ratione suscipit ullam! Dignissimos explicabo odit officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium commodi numquam repellat. Commodi dignissimos earum error, excepturi facilis illum laborum mollitia, natus placeat possimus recusandae unde! Autem consectetur explicabo quaerat?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, expedita, minus? Amet asperiores consectetur deleniti, et expedita illum iste molestiae nam nisi odio placeat porro, provident quaerat quo recusandae sit?
<div>
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-pills spacing-bottom" role="tablist">
<li role="presentation" class="alt5 active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a class="alt5" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a class="alt5" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a class="alt5" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid doloribus ipsa minima nesciunt, veniam voluptatem. Earum labore maiores nesciunt quasi quis sit voluptates? Aliquam aspernatur atque nulla sequi tenetur?
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis culpa delectus, dicta eaque earum error, in laboriosam maiores maxime minima nam quia quod ratione suscipit ullam! Dignissimos explicabo odit officiis.
</div>
<div role="tabpanel" class="tab-pane fade" id="messages">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium commodi numquam repellat. Commodi dignissimos earum error, excepturi facilis illum laborum mollitia, natus placeat possimus recusandae unde! Autem consectetur explicabo quaerat?
</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, expedita, minus? Amet asperiores consectetur deleniti, et expedita illum iste molestiae nam nisi odio placeat porro, provident quaerat quo recusandae sit?
</div>
</div>
</div>
</div>
</div>User Card
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="user-card well text-center">
<div class="user-image small" ng-style="'background-image': 'http://placehold.it/300x400'">
</div>
<div class="user-image medium" ng-style="'background-image': 'http://placehold.it/400x300'">
</div>
<div class="user-image large" ng-style="'background-image': 'http://placehold.it/500x500'">
</div>
<div class="user-name">
<a href="#">Agent Name</a>
</div>
<div>
Agency name
</div>
<div>
L2382908W
</div>
</div>
</div>
</div>
</div>Vcards
<a class="noselect" href="#">
<div class="vcards first">
<div class="vcards-picture" style="background-image: url('https://placehold.it/300x500')">
<div class="vcards-picture-float">
<span class="small">Opening Bid:</span><br/>
<strong>S$1,000</strong>
</div>
</div>
<div class="vcards-info-wrapper">
<div class="vcards-info">
<div class="vcards-title">
Wing Fong Mansions
</div>
<div class="vcards-info-container">
12 Lorong 14 Geylang · D9
</div>
<div class="vcards-info-container">
Terrace House
</div>
<div class="vcards-info-container bold">
S$950,000 · S$475 psf
</div>
<div class="vcards-info-container last">
1 Beds | 4 Baths | 1,200 sqft
</div>
</div>
</div>
<div class="vcards-label-container">
<span class="label label-alt3 label-lg">Sold</span>
</div>
<div class="vcards-action-container">
<a class="vcards-action shortlist" href="#">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
<a class="vcards-action shortlist" href="#">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
</div>
</div>
</a>Well
Fancy
Hello world
<div class="well fancy">
Hello world
</div>Normal
Hello world
<div class="well">
Hello world
</div>