<div class="gr grsl">
  <div class="gu gu-1of2 gu-m-1of1">
    <div class="rc rcsxs">
      <a class="img-left avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
    <div class="rc rcss mtl">
      <a class="img-left avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
    <div class="rc rcsm mtl">
      <a class="img-left avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
    <div class="rc rcsl mtl">
      <a class="img-left avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
    <div class="rc rcsxl mtl">
      <a class="img-left avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
  </div>
  <div class="gu-last">
    <div class="rc rcsxs tar">
      <a class="img-right avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
    <div class="rc rcss mtl tar">
      <a class="img-right avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
    <div class="rc rcsm mtl tar">
      <a class="img-right avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
    <div class="rc rcsl mtl tar">
      <a class="img-right avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
    <div class="rc rcsxl mtl tar">
      <a class="img-right avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
      <div class="bd">
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      </div>
    </div>
  </div>
</div>


<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<!-- The media image is aligned to the left (img-left) with an extra-large (rcsxl) spacing-->
<div class="rc rcsxl">
  <a class="img-left avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
  <div class="bd">
  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  </div>
</div>
<!-- The media image is aligned to the right (img-right) with an extra-small (rcsxs) spacing-->
<div class="rc rcsxs">
  <a class="img-right avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
  <div class="bd">
  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  </div>
</div>
```
{{/markdown}}

{{> copy-code}}
</div>

