unibz Pattern Library

Containers 

<!-- Default -->
<div class="l-container">
    <div class="placeholder">
        Regular container
    </div>
</div>


<!-- Small -->
<div class="l-containerSmall">
    <div class="placeholder">
        Small container
    </div>
</div>


<div class="{{ class }}">
  <div class="placeholder">
    {{ description }}
  </div>
</div>
 
/* Default */
{
  "placeholder": "Placeholder element",
  "class": "l-container",
  "description": "Regular container"
}


/* Small */
{
  "placeholder": "Placeholder element",
  "class": "l-containerSmall",
  "description": "Small container"
}

Use containers to center content on the page. They include some padding to separe content from the browser edge horizontally. For vertical spacing use .l-section.