Main Content
Featured Community Styles
Standard Wireframing Elements
Featured Community Style 1
Close
HTML
<section class="aios-fc-wrap-1">
<div class="container">
<h2>Featured <strong>Communities</strong></h2>
<div class="featured-c">
<div class="col-md-2 col-sm-4 fc-list">
<a href="#">Agua Dulce</a>
</div>
<div class="col-md-2 col-sm-4 fc-list">
<a href="#">Bloomington</a>
</div>
<div class="col-md-2 col-sm-4 fc-list">
<a href="#">Downieville</a>
</div>
<div class="col-md-2 col-sm-4 fc-list">
<a href="#">Firebaugh</a>
</div>
<div class="col-md-2 col-sm-4 fc-list">
<a href="#">Grand Terrace</a>
</div>
<div class="col-md-2 col-sm-4 fc-list">
<a href="#">Kingsburg</a>
</div>
<div class="clear"></div>
</div>
</div>
</section>CSS
.aios-fc-wrap-1{
margin: 20px 0;
}
.aios-fc-wrap-1 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-fc-wrap-1 h2 strong{
font-weight: 700;
}
.aios-fc-wrap-1 .featured-c{
width: 100%;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
}
.aios-fc-wrap-1 .featured-c .fc-list{
text-align: center;
position: relative;
}
.aios-fc-wrap-1 .featured-c .fc-list a{
font: 300 16px 'Lato', sans-serif;
color: #5e5e5e;
display: block;
padding: 34px 0;
text-decoration: none;
}
.aios-fc-wrap-1 .featured-c .fc-list:after{
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #169bc6;
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -3px;
}
.aios-fc-wrap-1 .featured-c .fc-list:first-child:after{
display: none;
}
CSS Mobile
@media only screen and (max-width: 992px) {
.aios-fc-wrap-1 .featured-c .fc-list:first-child:after{
display: block;
}
}
@media only screen and (max-width: 500px) {
.aios-fc-wrap-1 .featured-c .fc-list a{
text-align: left;
}
}
Javascript
Featured Communities
Featured Community Style 2
Close
HTML
<section class="aios-fc-wrap-2">
<h2>Featured <strong>Communities</strong></h2>
<div class="container">
<div class="row">
<div class="featured-c">
<div class="col-md-3 col-lg-3 col-sm-6 fc-list">
<a href="#">
<canvas width="263" height="182" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<h3>Agua Dulce</h3>
</a>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 fc-list">
<a href="#">
<canvas width="263" height="182" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<h3>Bloomington</h3>
</a>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 fc-list">
<a href="#">
<canvas width="263" height="182" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<h3>Downieville</h3>
</a>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 fc-list">
<a href="#">
<canvas width="263" height="182" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<h3>Firebaugh</h3>
</a>
</div>
</div>
</div>
</div>
</section>CSS
.aios-fc-wrap-2 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-fc-wrap-2 h2 strong{
font-weight: 700;
}
.aios-fc-wrap-2 .featured-c{
}
.aios-fc-wrap-2 .featured-c .fc-list{
}
.aios-fc-wrap-2 .featured-c .fc-list a{
display: block;
color: inherit;
text-decoration: none;
}
.aios-fc-wrap-2 .featured-c .fc-list a canvas{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #d7d7d7;
width: 100%;
height: auto;
display: block;
}
.aios-fc-wrap-2 .featured-c .fc-list a h3{
color: #959595;
font-weight: normal;
font-size: 18px;
text-align: center;
padding: 20px 0;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-fc-wrap-2 .featured-c .fc-list a:hover h3{
color: #169bc6;
}
CSS Mobile
Javascript
Featured Communities
Featured Community Style 3
Close
HTML
<section class="aios-fc-wrap-3">
<h2>Featured <strong>Communities</strong></h2>
<div class="container">
<div class="row">
<div class="featured-c">
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<span>Agua Dulce</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<span>Bloomington</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<span>Downieville</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<span>Firebaugh</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<span>Grand Terrace</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<span>Kingsburg</span>
</a>
</div>
</div>
</div>
</div>
</section>CSS
.aios-fc-wrap-3{
margin: 20px 0;
}
.aios-fc-wrap-3 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-fc-wrap-3 h2 strong{
font-weight: 700;
}
.aios-fc-wrap-3 .featured-c{
}
.aios-fc-wrap-3 .featured-c .fc-list{
margin-bottom: 40px;
}
.aios-fc-wrap-3 .featured-c .fc-list a{
display: block;
height: 82px;
width: 100%;
border: solid 1px #b1b1b1;
text-align: center;
color: #5e5e5e;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-fc-wrap-3 .featured-c .fc-list a:hover{
color: #fff;
background: #169bc6;
border-color: #169bc6;
}
.aios-fc-wrap-3 .featured-c .fc-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.aios-fc-wrap-3 .featured-c .fc-list a span{
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Featured Communities
Featured Community Style 4
Close
HTML
<section class="aios-fc-wrap-4">
<h2>Featured <strong>Communities</strong></h2>
<div class="container">
<div class="row">
<div class="featured-c">
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<canvas width="165" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<span>Agua Dulce</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<canvas width="165" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<span>Bloomington</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<canvas width="165" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<span>Downieville</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<canvas width="165" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<span>Firebaugh</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<canvas width="165" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<span>Grand Terrace</span>
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-6 fc-list">
<a href="#">
<canvas width="165" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<span>Kingsburg</span>
</a>
</div>
</div>
</div>
</div>
</section>CSS
.aios-fc-wrap-4{
margin: 20px 0;
}
.aios-fc-wrap-4 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-fc-wrap-4 h2 strong{
font-weight: 700;
}
.aios-fc-wrap-4 .featured-c{
}
.aios-fc-wrap-4 .featured-c .fc-list{
margin-bottom: 40px;
}
.aios-fc-wrap-4 .featured-c .fc-list a{
display: block;
color: inherit;
text-decoration: none;
position: relative;
}
.aios-fc-wrap-4 .featured-c .fc-list a canvas{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #d7d7d7;
width: 100%;
height: 240px;
display: block;
}
.aios-fc-wrap-4 .featured-c .fc-list a span{
color: #5e5e5e;
font-weight: 300;
font-size: 15px;
text-align: center;
position: absolute;
left: 0;
bottom: 17%;
width: 100%;
height: auto;
}
CSS Mobile
Javascript
Featured Communities
Featured Community Style 5
Close
HTML
<section class="aios-fc-wrap-5">
<h2>Featured <strong>Communities</strong></h2>
<div class="container">
<div class="row">
<div class="featured-c">
<div class="col-md-4 col-lg-4 col-sm-6 fc-list">
<a href="#">
<canvas width="360" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<div class="fc-details">
<h3>Agua Dulce</h3>
<p>Aliquam purus massa, rutrum at eros ac, commodo faucibus lorem. </p>
<span>read more</span>
</div>
</a>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 fc-list">
<a href="#">
<canvas width="360" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png">
</canvas>
<div class="fc-details">
<h3>Bloomington</h3>
<p>Aliquam purus massa, rutrum at eros ac, commodo faucibus lorem. </p>
<span>read more</span>
</div>
</a>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 fc-list">
<a href="#">
<canvas width="360" height="260" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png">
</canvas>
<div class="fc-details">
<h3>Firebaugh</h3>
<p>Aliquam purus massa, rutrum at eros ac, commodo faucibus lorem. </p>
<span>read more</span>
</div>
</a>
</div>
</div>
</div>
</div>
</section>CSS
.aios-fc-wrap-5{
margin: 20px 0;
}
.aios-fc-wrap-5 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-fc-wrap-5 h2 strong{
font-weight: 700;
}
.aios-fc-wrap-5 .featured-c{
font-family:'Lato', sans-serif;
}
.aios-fc-wrap-5 .featured-c .fc-list{
margin-bottom: 40px;
}
.aios-fc-wrap-5 .featured-c .fc-list a{
display: block;
color: inherit;
text-decoration: none;
position: relative;
}
.aios-fc-wrap-5 .featured-c .fc-list a canvas{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #d7d7d7;
width: 54%;
height: 260px;
display: block;
}
.aios-fc-wrap-5 .featured-c .fc-list a .fc-details{
position: absolute;
right: 0;
top: 0;
width: 46%;
height: 100%;
background: #169bc6;
text-align: center;
padding: 14% 0;
}
.aios-fc-wrap-5 .featured-c .fc-list a .fc-details h3{
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
color: #fff;
}
.aios-fc-wrap-5 .featured-c .fc-list a .fc-details p{
color: #fff;
font-size: 14px;
font-weight: 300;
padding: 20px 20px;
}
.aios-fc-wrap-5 .featured-c .fc-list a .fc-details span{
border: solid 1px #fff;
width: 88px;
height: 30px;
display: block;
margin: 0 auto;
font-weight: 300;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 30px;
}
CSS Mobile
Javascript