Main Content
Testimonial Styles
Standard Wireframing Elements
Testimonial Style 1
Close
HTML
<section class="aios-testimonials-style-1">
<div class="container">
<div class="testi-wrap">
<h3>Testimonials</h3>
<div class="testi-rotator-wrap">
<div class="testi-arrow">
<div class="next ai-font-arrow-a-p"></div>
<div class="prev ai-font-arrow-a-n"></div>
</div>
<div class="testi-rotator">
<div class="testi-list">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimentum nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisi. Aliquam suscipit dictum leo, mollis sagittis augue egestas vel. Praesent dapibus vehicula leo ut elementum. ulum nibh, tempor co nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisliqua.</p>
<span>John Doe</span>
</a>
</div>
<div class="testi-list">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimentum nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisi. Aliquam suscipit dictum leo, mollis sagittis augue egestas vel. Praesent dapibus vehicula leo ut elementum. ulum nibh, tempor co nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisliqua.</p>
<span>John Doe</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.aios-testimonials-style-1{
margin: 20px 0;
}
.aios-testimonials-style-1 .testi-wrap{
width: 100%;
height: auto;
padding: 55px 0;
background: #d7d7d7;
}
.aios-testimonials-style-1 .testi-wrap h3{
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
color: #898989;
display: block;
padding: 27px 0;
text-align: center;
}
.aios-testimonials-style-1 .testi-rotator-wrap{
position: relative;
width: 80%;
margin: 0 auto;
}
.aios-testimonials-style-1 .testi-arrow{
color: #fff;
}
.aios-testimonials-style-1 .testi-arrow .next {
position: absolute;
left: -18%;
top: 30%;
font-size: 50px;
cursor: pointer;
margin-top: -25px;
}
.aios-testimonials-style-1 .testi-arrow .prev{
position: absolute;
right: -18%;
top: 30%;
font-size: 50px;
cursor: pointer;
margin-top: -25px;
}
.aios-testimonials-style-1 .testi-rotator{
height: auto;
position: relative;
}
.aios-testimonials-style-1 .testi-rotator a{
text-decoration: none;
outline: none;
}
.aios-testimonials-style-1 .testi-rotator p{
font-size: 12px;
line-height: 20px;
color: #898989;
font-weight: 300;
text-align: center;
}
.aios-testimonials-style-1 .testi-rotator span{
font-size: 12px;
text-transform: uppercase;
color: #898989;
letter-spacing: 0.2em;
text-align: center;
display: block;
margin-top: 40px;
}CSS Mobile
@media only screen and (max-width: 992px) {
.aios-testimonials-style-1 .testi-arrow .next{
left: -6%;
}
.aios-testimonials-style-1 .testi-arrow .prev{
right: -6%;
}
}
@media only screen and (max-width: 400px) {
.aios-testimonials-style-1 .testi-rotator p{
text-align: justify;
}
.aios-testimonials-style-1 .testi-arrow{
display: none;
}
}
Javascript
function testominials_style____1(){
jQuery('.aios-testimonials-style-1 .testi-rotator').slick({
nextArrow: '.testimonials-style-1 .next',
prevArrow: '.testimonials-style-1 .prev'
});
}
testominials_style____1()Testimonials
Testimonial Style 2
Close
HTML
<section class="aios-testimonials-style-2">
<div class="container">
<div class="row">
<div class="testi-wrap">
<h3>Testimonials</h3>
<div class="testi-rotator-wrap">
<div class="testi-list col-md-4 col-lg-4">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui.bitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimen.</p>
<span>John Doe</span>
</a>
</div>
<div class="testi-list col-md-4 col-lg-4">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui.bitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimen.</p>
<span>John Doe</span>
</a>
</div>
<div class="testi-list col-md-4 col-lg-4">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui.bitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimen.</p>
<span>John Doe</span>
</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</section>CSS
.aios-testimonials-style-2{
margin: 20px 0;
}
.aios-testimonials-style-2 .testi-wrap h3{
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
color: #898989;
display: block;
padding: 27px 0;
text-align: center;
}
.aios-testimonials-style-2 .testi-list{
padding-bottom: 20px;
}
.aios-testimonials-style-2 .testi-rotator-wrap a{
text-decoration: none;
outline: none;
}
.aios-testimonials-style-2 .testi-rotator-wrap p{
font-size: 12px;
line-height: 20px;
color: #898989;
font-weight: 300;
}
.aios-testimonials-style-2 .testi-rotator-wrap span{
font-size: 12px;
text-transform: uppercase;
color: #009bbb;
letter-spacing: 0.2em;
display: block;
margin-top: 25px;
}
CSS Mobile
Javascript
Testimonials
Testimonial Style 3
Close
HTML
<section class="aios-testimonials-style-3">
<div class="container">
<div class="testi-wrap">
<h3>Testimonials</h3>
<div class="testi-rotator-wrap">
<div class="testi-arrow">
<div class="next ai-font-arrow-a-p"></div>
<div class="prev ai-font-arrow-a-n"></div>
</div>
<div class="testi-rotator">
<div class="testi-list">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimentum nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisi. Aliquam suscipit dictum leo, mollis sagittis augue egestas vel. Praesent dapibus vehicula leo ut elementum. ulum nibh, tempor co nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisliqua.</p>
<span>John Doe</span>
</a>
</div>
<div class="testi-list">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimentum nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisi. Aliquam suscipit dictum leo, mollis sagittis augue egestas vel. Praesent dapibus vehicula leo ut elementum. ulum nibh, tempor co nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisliqua.</p>
<span>John Doe</span>
</a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</section>
CSS
.aios-testimonials-style-3{
margin: 20px 0;
background: #d7d7d7;
padding: 50px 0;
}
.aios-testimonials-style-3 .testi-wrap{
height: auto;
padding: 55px 0;
background: #e3e3e3;
position: relative;
}
.aios-testimonials-style-3 .testi-wrap h3{
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
color: #898989;
display: block;
padding: 27px 0;
text-align: center;
}
.aios-testimonials-style-3 .testi-rotator-wrap{
}
.aios-testimonials-style-3 .testi-arrow{
color: #fff;
}
.aios-testimonials-style-3 .testi-arrow .next {
position: absolute;
left: -8%;
top: 50%;
font-size: 50px;
cursor: pointer;
margin-top: -25px;
}
.aios-testimonials-style-3 .testi-arrow .prev{
position: absolute;
right: -8%;
top: 50%;
font-size: 50px;
cursor: pointer;
margin-top: -25px;
}
.aios-testimonials-style-3 .testi-rotator{
height: auto;
position: relative;
}
.aios-testimonials-style-3 .testi-rotator a{
text-decoration: none;
outline: none;
}
.aios-testimonials-style-3 .testi-rotator p{
font-size: 12px;
line-height: 20px;
color: #898989;
font-weight: 300;
text-align: center;
padding: 0 11%;
}
.aios-testimonials-style-3 .testi-rotator span{
font-size: 12px;
text-transform: uppercase;
color: #898989;
letter-spacing: 0.2em;
text-align: center;
display: block;
margin-top: 40px;
}
CSS Mobile
Javascript
function testominials_style____1(){
jQuery('.aios-testimonials-style-3 .testi-rotator').slick({
nextArrow: '.next',
prevArrow: '.prev'
});
}
testominials_style____1()
Testimonials
Testimonial Style 4
Close
HTML
<section class="aios-testimonials-style-4">
<div class="container">
<div class="testi-wrap">
<h3>Testimonials</h3>
<div class="testi-rotator-wrap">
<div class="testi-arrow">
<div class="next ai-font-arrow-a-p"></div>
<div class="prev ai-font-arrow-a-n"></div>
</div>
<div class="testi-rotator">
<div class="testi-list">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimentum nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisi. Aliquam suscipit dictum leo, mollis sagittis augue egestas vel. Praesent dapibus vehicula leo ut elementum. ulum nibh, tempor co nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisliqua.</p>
<span>John Doe</span>
</a>
</div>
<div class="testi-list">
<a href="#">
<p>Fusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimentum nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisi. Aliquam suscipit dictum leo, mollis sagittis augue egestas vel. Praesent dapibus vehicula leo ut elementum. ulum nibh, tempor co nisl auctor ac. Aliquam turpis neque, tempor eu nisi quis, lobortis vulputate nisliqua.</p>
<span>John Doe</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.aios-testimonials-style-4{
margin: 20px 0;
}
.aios-testimonials-style-4 .testi-wrap{
height: auto;
padding: 55px 0;
border: solid 1px #b1b1b1;
position: relative;
}
.aios-testimonials-style-4 .testi-wrap h3{
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
color: #009bbb;
display: block;
padding: 27px 0;
text-align: center;
}
.aios-testimonials-style-4 .testi-rotator-wrap{
}
.aios-testimonials-style-4 .testi-arrow{
color: #009bbb;
}
.aios-testimonials-style-4 .testi-arrow .next {
position: absolute;
left: -8%;
top: 50%;
font-size: 50px;
cursor: pointer;
margin-top: -25px;
}
.aios-testimonials-style-4 .testi-arrow .prev{
position: absolute;
right: -8%;
top: 50%;
font-size: 50px;
cursor: pointer;
margin-top: -25px;
}
.aios-testimonials-style-4 .testi-rotator{
height: auto;
position: relative;
}
.aios-testimonials-style-4 .testi-rotator a{
text-decoration: none;
outline: none;
}
.aios-testimonials-style-4 .testi-rotator p{
font-size: 12px;
line-height: 20px;
color: #898989;
font-weight: 300;
text-align: center;
padding: 0 11%;
}
.aios-testimonials-style-4 .testi-rotator span{
font-size: 12px;
text-transform: uppercase;
color: #009bbb;
letter-spacing: 0.2em;
text-align: center;
display: block;
margin-top: 40px;
}
CSS Mobile
@media only screen and (max-width: 400px) {
.aios-testimonials-style-4 .testi-rotator p{
text-align: justify;
}
.aios-testimonials-style-4 .testi-arrow{
display: none;
}
}
Javascript
function testominials_style____1(){
jQuery('.aios-testimonials-style-4 .testi-rotator').slick({
nextArrow: '.next',
prevArrow: '.prev'
});
}
testominials_style____1()
Testimonials
Testimonial Style 5
Close
HTML
<section class="aios-testimonials-style-5">
<div class="container">
<div class="row">
<div class="testi-wrap">
<h3>Testimonials</h3>
<div class="testi-rotator-wrap">
<div class="testi-list col-md-4">
<a href="#">
<div class="test-image">
<!-- place your image here -->
</div>
<h2>John Benedick Doe</h2>
<p>Fusce sed cursus odio. Nullam sit amet justo dui.bitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimen.</p>
<span>read the story ></span>
</a>
</div>
<div class="testi-list col-md-4">
<a href="#">
<div class="test-image">
<!-- place your image here -->
</div>
<h2>John Benedick Doe</h2>
<p>Fusce sed cursus odio. Nullam sit amet justo dui.bitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimen.</p>
<span>read the story ></span>
</a>
</div>
<div class="testi-list col-md-4">
<a href="#">
<div class="test-image">
<!-- place your image here -->
</div>
<h2>John Benedick Doe</h2>
<p>Fusce sed cursus odio. Nullam sit amet justo dui.bitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibFusce sed cursus odio. Nullam sit amet justo dui. Curabitur posuere elit eget tempor laoreet. Pellentesque efficitur vestibulum nibh, tempor condimen.</p>
<span>read the story ></span>
</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</section>
CSS
.aios-testimonials-style-5{
margin: 20px 0;
}
.aios-testimonials-style-5 .testi-wrap h3{
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
color: #898989;
display: block;
padding: 27px 0;
text-align: center;
}
.aios-testimonials-style-5 .testi-list{
padding-bottom: 20px;
}
.aios-testimonials-style-5 .testi-list .test-image{
width: 134px;
height: 134px;
margin: 0 auto;
background: url(images/dummy-image.png) no-repeat center center #dbdbdb;
border-radius: 50%;
}
.aios-testimonials-style-5 .testi-list h2{
font-size: 12px;
color: #009bbb;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.2em;
border-bottom: 1px solid #dadada;
padding: 20px 0;
}
.aios-testimonials-style-5 .testi-rotator-wrap a{
text-decoration: none;
outline: none;
}
.aios-testimonials-style-5 .testi-rotator-wrap p{
font-size: 12px;
line-height: 20px;
color: #898989;
font-weight: 300;
padding-top: 35px;
text-align: center;
}
.aios-testimonials-style-5 .testi-rotator-wrap span{
font-size: 12px;
color: #009bbb;
font-weight: 300;
display: block;
margin-top: 25px;
text-align: center;
}
CSS Mobile
Javascript