VGR Styleguide

Aligment 

<!-- Default -->
<div class="vgr-align-left">
    <img src="/temp/photo-640x425.jpg" width="640" height="425" alt="Photo of a sunset over the ocean with a cliff">

</div>


<!-- Center -->
<div class="vgr-align-center">
    <img src="/temp/photo-640x425.jpg" width="640" height="425" alt="Photo of a sunset over the ocean with a cliff">

</div>


<!-- Right -->
<div class="vgr-align-right">
    <img src="/temp/photo-640x425.jpg" width="640" height="425" alt="Photo of a sunset over the ocean with a cliff">

</div>


<div class="vgr-align-{{ modifier }}">
  {% render "@image" %}
</div>
 
/* Default */
{
  "modifier": "left",
  "data": {
    "class": "vgr-align-left"
  }
}


/* Center */
{
  "modifier": "center",
  "data": {
    "class": "vgr-align-center"
  }
}


/* Right */
{
  "modifier": "right",
  "data": {
    "class": "vgr-align-right"
  }
}

.vgr-align-left Align the element to the left.

.vgr-align-right Align the element to the right.

.vgr-align-center Align the element center.