Dashboard

<p>
  Dashboards consist of panels that are both horizontally and vertically aligned
  on a 12 column grid. Every dashboard can have a different gap size
  (<code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>,
  <code>xl</code>, <code>xxl</code>). The dashboard component should only be
  used for large layout blocks. For small blocks, the grid component might be
  better suited.
</p>
<h2 class="u-title-secondary">Columns</h2>
<div class="c-dashboard c-dashboard--gap-sm">
  <!-- First row -->
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-1">
    <div class="gridblock">1 col</div>
  </div>
  <!-- Second row -->
  <div class="c-dashboard__item c-dashboard__item--col-3">
    <div class="gridblock">3 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-6">
    <div class="gridblock">6 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-3">
    <div class="gridblock">3 col</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-12">
    <div class="gridblock">12 col</div>
  </div>
</div>

<h2 class="u-title-secondary">Columns and rows</h2>

<div class="c-dashboard">
  <div class="c-dashboard__item c-dashboard__item--col-6 c-dashboard__item--row-2">
    <div class="gridblock">6 columns, 2 rows</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-3">
    <div class="gridblock">3 columns</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-3">
    <div class="gridblock">3 columns</div>
  </div>
  <div class="c-dashboard__item c-dashboard__item--col-6">
    <div class="gridblock">6 columns</div>
  </div>
</div>