I am looking to create a unique testimonial block design with left and right text icons. This block will be embedded into the markup as a separate block and also integrated into a slider. I am currently using the foundation grid 6, but I plan to use Visual Composer on WordPress. My main concern is making this block responsive and reusable, especially considering that some variants may include logo display options and link toggles. The icons should be placed within span tags and not generated using :after or :before pseudo-elements. For more information, you can visit Codepen
<div class="vc-testimonial text-center">
<div class="vc-testimonial-logo"><img src="../images/shavlik-logo.png"></div>
<div class="vc-testimonial-text">
<h5><span class="icon icon-globe-half"></span><span class="icon icon-globe-half"></span>“60% of organizations that have used Office 365 have found it to be financially beneficial to their organizations”<span class="icon icon-globe-half icon-rotate"></span><span class="icon icon-globe-half icon-rotate"></span></h5>
</div>
<div class="vc-testimonial-link"><a class="primary small">Read full story</a></div>
<div class="vc-testimonial-athor">
<p>Uģis Peiko, IT speciālists</p>
</div>
</div>
.vc-testimonial{
max-width: 75em;
// margin-left: auto;
// margin-right: auto;
padding: rem-calc(60 0);
&-logo{
img{
width: auto;
}
}
&-logo + &-text{
margin-top: 20px;
}
&-text{
h5 + span {
// padding-left: rem-calc(55);
// margin-right: rem-calc(55);
}
span + h5 {
// padding-left: rem-calc(55);
// margin-right: rem-calc(55);
}
}
&-text + &-link, &-text + &-athor{
margin-top: rem-calc(20);
}
&-link{
}
&-link + &-athor{
margin-top: rem-calc(20);
}
&-athor{
}
}