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

<!-- Large -->
<div class="l-sectionLarge">
    <div class="placeholder">
        Large section
    </div>
</div>

<!-- Small -->
<div class="l-sectionSmall">
    <div class="placeholder">
        Small section
    </div>
</div>

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

/* Large */
{
  "placeholder": "Placeholder element",
  "class": "l-sectionLarge",
  "description": "Large section"
}

/* Small */
{
  "placeholder": "Placeholder element",
  "class": "l-sectionSmall",
  "description": "Small section"
}

Sections are used to separate content vertically. Typycally a .l-container is used within them.