{# ========================================================================= #}
{# :: Settings & variables #}
{# ========================================================================= #}
{% set params = {
  scope: "s-section"
} %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{# {% set info %}

{% endset %} #}

{# ========================================================================= #}
{# :: Preview #}
{# ========================================================================= #}
{% set preview %}

<section class="l-section">

  <header class="l-section__header l-section__header--with-action">
    <div class="l-section__header-content">
      <h1 class="l-section__title">Title</h1>
      <small class="l-section__sub-title">Subtitle</small>
    </div>

    <div class="l-section__header-actions">
      <a href="">Section action</a>
    </div>
  </header>

  <div class="l-section__content">
    <div class="l-content">
      content
      <div class="l-content__item">item</div>
      <div class="l-content__item">item</div>
      <div class="l-content__item">item</div>
    </div>
  </div>

  <footer class="l-section__footer">
    footer
  </footer>

</section>

{% endset %}