Main Content
Agent Photo Styles
Standard Wireframing Elements
Agent Photo Style 1
Close
HTML
<section class="aios-agentPhoto-style-1">
<div class="container">
<div class="agentPhotoWrap">
<img src="[stylesheet_directory]/images/agentPhoto-1.jpg" alt="John Doe">
<div class="agentContinfo">
<h3>John Doe</h3>
<span>REALTOR / BROKER</span>
<strong>123.456.7890</strong>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
</section>CSS
.aios-agentPhoto-style-1 .agentPhotoWrap{
width: 100%;
height: auto;
max-width: 360px;
margin: 0 auto;
}
.aios-agentPhoto-style-1 .agentPhotoWrap img{
display: block;
width: 100%;
height: auto;
}
.aios-agentPhoto-style-1 .agentContinfo{
background: #009bbb;
text-align: center;
padding: 29px 0;
}
.aios-agentPhoto-style-1 .agentContinfo h3{
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
line-height: 37px;
}
.aios-agentPhoto-style-1 .agentContinfo span{
font-size: 12px;
text-transform: uppercase;
color: #fff;
font-weight: 300;
display: block;
}
.aios-agentPhoto-style-1 .agentContinfo strong{
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
display: block;
padding: 10px 0 7px;
}
.aios-agentPhoto-style-1 .agentContinfo a{
font-size: 12px;
color: #fff;
font-weight: 300;
text-decoration: none;
}
CSS Mobile
Javascript
Agent Photo Style 2
Close
HTML
<section class="aios-agentPhoto-style-2">
<div class="container">
<div class="agentPhotoWrap">
<img src="[stylesheet_directory]/images/agentPhoto-2.png" alt="John Doe">
<div class="agentContinfo">
<h3>John Doe</h3>
<span>REALTOR / BROKER</span>
<strong>123.456.7890</strong>
<a href="mailto:[email protected]">[email protected]</a>
<p>1700 E. Walnut Ave., Suite 400 El Segundo, <br> CA 90245 USA</p>
</div>
</div>
</div>
</section>CSS
.aios-agentPhoto-style-2 .agentPhotoWrap{
background: #ebebeb;
border: solid 1px #b1b1b1;
width: 100%;
height: auto;
max-width: 749px;
margin: 0 auto;
padding-top: 27px;
}
.aios-agentPhoto-style-2 .agentPhotoWrap img{
display: inline-block;
vertical-align: top;
width: 29.3%;
margin-left: 9%;
}
.aios-agentPhoto-style-2 .agentPhotoWrap .agentContinfo{
display: inline-block;
vertical-align: top;
width: 61%;
padding-left: 3%;
padding-top: 8%;
}
.aios-agentPhoto-style-2 .agentPhotoWrap .agentContinfo h3{
font-size: 40px;
font-weight: 700;
text-transform: uppercase;
color: #777;
}
.aios-agentPhoto-style-2 .agentPhotoWrap .agentContinfo span{
display: block;
font-size: 12px;
text-transform: uppercase;
color: #777;
font-weight: 300;
}
.aios-agentPhoto-style-2 .agentPhotoWrap .agentContinfo strong{
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #777;
display: block;
line-height: 31px;
padding-top: 13px;
}
.aios-agentPhoto-style-2 .agentPhotoWrap .agentContinfo a{
font-weight: 300;
font-size: 16px;
color: #777;
text-decoration: none;
}
.aios-agentPhoto-style-2 .agentPhotoWrap .agentContinfo p{
font-size: 13px;
font-weight: 300;
color: #777;
display: block;
padding-top: 18px;
}
CSS Mobile
@media only screen and (max-width: 730px) {
.aios-agentPhoto-style-2 .agentPhotoWrap{
padding: 27px 0;
}
.aios-agentPhoto-style-2 .agentPhotoWrap .agentContinfo{
width: 100%;
padding-top: 0;
text-align: center;
padding-left: 0;
}
.aios-agentPhoto-style-2 .agentPhotoWrap img{
max-width: 218px;
margin: 0 auto;
display: block;
}
}
Javascript
John Doe
REALTOR / BROKER 123.456.7890 [email protected]1700 E. Walnut Ave., Suite 400 El Segundo,
CA 90245 USA
Agent Photo Style 3
Close
HTML
<section class="aios-agentPhoto-style-3">
<div class="container">
<div class="agentPhotoWrap">
<img src="[stylesheet_directory]/images/agentPhoto-3.jpg" alt="John Doe">
<div class="agentContinfo">
<h3>John Doe</h3>
<span>REALTOR / BROKER</span>
<strong>123.456.7890</strong>
<a href="mailto:[email protected]">[email protected]</a>
<p>1700 E. Walnut Ave., Suite 400 El Segundo, <br> CA 90245 USA</p>
</div>
</div>
</div>
</section>CSS
.aios-agentPhoto-style-3 .agentPhotoWrap{
width: 100%;
height: auto;
max-width: 261px;
margin: 0 auto;
}
.aios-agentPhoto-style-3 .agentPhotoWrap img{
display: block;
width: 100%;
height: auto;
border-radius: 50%;
border: 1px solid #b1b1b1;
}
.aios-agentPhoto-style-3 .agentContinfo{
text-align: center;
padding: 22px 0;
}
.aios-agentPhoto-style-3 .agentContinfo h3{
font-size: 40px;
font-weight: 700;
text-transform: uppercase;
color: #009bbb;
}
.aios-agentPhoto-style-3 .agentContinfo span{
font-size: 12px;
text-transform: uppercase;
color: #777777;
font-weight: 300;
display: block;
text-align: center;
}
.aios-agentPhoto-style-3 .agentContinfo strong{
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #777777;
display: block;
padding-top: 17px;
line-height: 26px;
}
.aios-agentPhoto-style-3 .agentContinfo a{
font-size: 16px;
color: #fff;
font-weight: 300;
text-decoration: none;
color: #777777;
}
.aios-agentPhoto-style-3 .agentContinfo p{
color: #777777;
font-weight: 300;
font-size: 13px;
display: block;
padding-top: 17px;
line-height: 20px;
}
CSS Mobile
Javascript
John Doe
REALTOR / BROKER 123.456.7890 [email protected]1700 E. Walnut Ave., Suite 400 El Segundo,
CA 90245 USA
Agent Photo Style 4
Close
HTML
<section class="aios-agentPhoto-style-4">
<div class="container">
<div class="agentPhotoWrap">
<img src="[stylesheet_directory]/images/agentPhoto-4.jpg" alt="John Doe">
<div class="agentContinfo">
<h3>John Doe</h3>
<span>REALTOR / BROKER</span>
<strong>123.456.7890</strong>
<a href="mailto:[email protected]">[email protected]</a>
<p>1700 E. Walnut Ave., Suite 400 El Segundo, <br> CA 90245 USA</p>
</div>
</div>
</div>
</section>CSS
.aios-agentPhoto-style-4 .agentPhotoWrap{
width: 100%;
height: auto;
max-width: 261px;
margin: 0 auto;
}
.aios-agentPhoto-style-4 .agentPhotoWrap img{
display: block;
width: 100%;
height: auto;
}
.aios-agentPhoto-style-4 .agentContinfo{
text-align: center;
padding: 22px 0;
}
.aios-agentPhoto-style-4 .agentContinfo h3{
font-size: 40px;
font-weight: 700;
text-transform: uppercase;
color: #009bbb;
}
.aios-agentPhoto-style-4 .agentContinfo span{
font-size: 12px;
text-transform: uppercase;
color: #777777;
font-weight: 300;
display: block;
text-align: center;
}
.aios-agentPhoto-style-4 .agentContinfo strong{
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #777777;
display: block;
padding-top: 17px;
line-height: 26px;
}
.aios-agentPhoto-style-4 .agentContinfo a{
font-size: 16px;
color: #fff;
font-weight: 300;
text-decoration: none;
color: #777777;
}
.aios-agentPhoto-style-4 .agentContinfo p{
color: #777777;
font-weight: 300;
font-size: 13px;
display: block;
padding-top: 15px;
line-height: 20px;
}
CSS Mobile
Javascript
John Doe
REALTOR / BROKER 123.456.7890 [email protected]1700 E. Walnut Ave., Suite 400 El Segundo,
CA 90245 USA
Agent Photo Style 5
Close
HTML
<section class="aios-agentPhoto-style-5">
<div class="container">
<div class="agentPhotoWrap">
<div class="agent-info agentContinfo-1 col-lg-4 col-md-4">
<h3>John Doe</h3>
<span>REALTOR / BROKER</span>
<strong>123.456.7890</strong>
<a href="mailto:[email protected]">[email protected]</a>
<p>1700 E. Walnut Ave., Suite 400 El Segundo, <br> CA 90245 USA</p>
</div>
<div class="agentPhoto col-lg-4 col-md-4">
<img src="[stylesheet_directory]/images/agentPhoto-5.jpg" alt="John Doe">
</div>
<div class="agent-info agentContinfo-2 col-lg-4 col-md-4">
<h3>John Doe</h3>
<span>REALTOR / BROKER</span>
<strong>123.456.7890</strong>
<a href="mailto:[email protected]">[email protected]</a>
<p>1700 E. Walnut Ave., Suite 400 El Segundo, <br> CA 90245 USA</p>
</div>
</div>
</div>
</section>
CSS
.aios-agentPhoto-style-5{
margin: 20px 0;
}
.aios-agentPhoto-style-5 .agentPhotoWrap{
}
.aios-agentPhoto-style-5 .agentPhoto{
}
.aios-agentPhoto-style-5 .agentPhoto img{
display: block;
width: 100%;
height: auto;
max-width: 363px;
margin: 0 auto;
}
.aios-agentPhoto-style-5 .agentContinfo-1{
text-align: right;
}
.aios-agentPhoto-style-5 .agentContinfo-2{
text-align: left;
}
.aios-agentPhoto-style-5 .agent-info{
padding-top: 6%;
}
.aios-agentPhoto-style-5 .agent-info h3{
font-size: 40px;
font-weight: 700;
text-transform: uppercase;
color: #009bbb;
}
.aios-agentPhoto-style-5 .agent-info span{
font-size: 12px;
text-transform: uppercase;
color: #777777;
font-weight: 300;
display: block;
}
.aios-agentPhoto-style-5 .agent-info strong{
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #777777;
display: block;
padding-top: 17px;
line-height: 26px;
}
.aios-agentPhoto-style-5 .agent-info a{
font-size: 16px;
color: #fff;
font-weight: 300;
text-decoration: none;
color: #777777;
}
.aios-agentPhoto-style-5 .agent-info p{
color: #777777;
font-weight: 300;
font-size: 13px;
display: block;
padding-top: 15px;
line-height: 20px;
}
CSS Mobile
Javascript
John Doe
REALTOR / BROKER 123.456.7890 [email protected]1700 E. Walnut Ave., Suite 400 El Segundo,
CA 90245 USA
John Doe
REALTOR / BROKER 123.456.7890 [email protected]1700 E. Walnut Ave., Suite 400 El Segundo,
CA 90245 USA