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

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

These tables consist out of a header and a body. Both are separated into rows,
which in their turn are separated into columns.

{% endset %}

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

<div class="l-table">
  l-table

  <div class="l-table__header">
    l-table__header

    <div class="l-table__row">
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
    </div>

  </div>

  <div class="l-table__body">
    l-table__body

    <div class="l-table__row">
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
    </div>

    <div class="l-table__row">
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
    </div>

    <div class="l-table__row">
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
    </div>

  </div>
</div>


<div class="l-table">
  l-table

  <div class="l-table__header">
    l-table__header

    <div class="l-table__row">
      <div class="l-table__col l-table__col--6-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
    </div>

  </div>

  <div class="l-table__body">
    l-table__body

    <div class="l-table__row">
      <div class="l-table__col l-table__col--4-12">l-table__col</div>
      <div class="l-table__col l-table__col--2-12">l-table__col</div>
      <div class="l-table__col l-table__col--6-12">l-table__col</div>
    </div>

    <div class="l-table__row">
      <div class="l-table__col l-table__col--7-12">l-table__col</div>
      <div class="l-table__col l-table__col--3-12">l-table__col</div>
      <div class="l-table__col l-table__col--2-12">l-table__col</div>
    </div>

    <div class="l-table__row">
      <div class="l-table__col l-table__col--2-12">l-table__col</div>
      <div class="l-table__col l-table__col--4-12">l-table__col</div>
      <div class="l-table__col l-table__col--6-12">l-table__col</div>
    </div>

  </div>
</div>

{% endset %}