testimonial block / reusable
<p>I try to create the testimonial block with left and right text icon, is will be embedded to markup as the separate block and to the slider as well.I use the foundation grid 6, but this element will be use with Visual composer on WP. How to make this block responsive and reusable, because some variant should be with logo(on/off), link - on/off. The icon should be on span tag, not :after or :before. The link to <a href="http://codepen.io/palaniichukdmytro/pen/VmZovp" rel="nofollow noreferrer">Codepen</a></p>

<pre><code>&lt;div class="vc-testimonial text-center"&gt;
  &lt;div class="vc-testimonial-logo"&gt;&lt;img src="../images/shavlik-logo.png"&gt;&lt;/div&gt;
  &lt;div class="vc-testimonial-text"&gt;
    &lt;h5&gt;&lt;span class="icon icon-globe-half"&gt;&lt;/span&gt;&lt;span class="icon icon-globe-half"&gt;&lt;/span&gt;“60% of organizations that have used Office 365 have found it to be financially beneficial to their organizations”&lt;span class="icon icon-globe-half icon-rotate"&gt;&lt;/span&gt;&lt;span class="icon icon-globe-half icon-rotate"&gt;&lt;/span&gt;&lt;/h5&gt;
  &lt;/div&gt;
  &lt;div class="vc-testimonial-link"&gt;&lt;a class="primary small"&gt;Read full story&lt;/a&gt;&lt;/div&gt;
  &lt;div class="vc-testimonial-athor"&gt;
    &lt;p&gt;Uģis Peiko, IT speciālists&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;


.vc-testimonial{
  max-width: 75em;
  // margin-left: auto;
  // margin-right: auto;
  padding: rem-calc(60 0);
  &amp;-logo{
    img{
     width: auto;
    }

   }
 &amp;-logo + &amp;-text{
  margin-top: 20px;
  }
 &amp;-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);
  }
}
 &amp;-text + &amp;-link,   &amp;-text + &amp;-athor{
   margin-top: rem-calc(20);
 }

 &amp;-link{

 }
 &amp;-link + &amp;-athor{
  margin-top: rem-calc(20);
 }
 &amp;-athor{

}
}
</code></pre>