Grid

<h2 class="styleguide-title">Grid usage</h2>
<div class="preview-inner-container">
    <div class="row show-grid">
        <div class="col-mobile-12">.col-mobile-12</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-12 col-tablet-3 col-desktop-9">.col-mobile-12 .col-tablet-3 .col-desktop-9</div>
        <div class="col-mobile-12 col-tablet-9 col-desktop-3">.col-mobile-12 .col-tablet-9 .col-desktop-3</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-12 col-tablet-3 col-desktop-push-9">.col-mobile-12 .col-tablet-3 .col-desktop-push-9</div>
        <div class="col-mobile-12 col-tablet-9 col-desktop-pull-3">.col-mobile-12 .col-tablet-9 .col-desktop-pull-3</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-6 col-mobile-offset-3">.col-mobile-offset-3 .col-mobile-6</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-6">
            <div class="row show-grid">
                <div class="col-mobile-6">.col-mobile-6</div>
                <div class="col-mobile-6">.col-mobile-6</div>
            </div>
        </div>
        <div class="col-mobile-6">.col-mobile-6</div>
    </div>
    <div class="row show-grid">
        <div class="col-mobile-12 hidden-desktop">
            .hidden-desktop
        </div>
        <div class="col-mobile-12 hidden-tablet">
            .hidden-tablet
        </div>
        <div class="col-mobile-12 hidden-mobile">
            .hidden-mobile
        </div>
        <div class="col-mobile-12 visible-desktop">
            .visible-desktop
        </div>
        <div class="col-mobile-12 visible-tablet">
            .visible-tablet
        </div>
        <div class="col-mobile-12 visible-mobile">
            .visible-mobile
        </div>
    </div>
</div>
<h2 class="styleguide-title">Grid usage</h2>
<div class="preview-inner-container">
  <div class="row show-grid">
      <div class="col-mobile-12">.col-mobile-12</div>
  </div>
  <div class="row show-grid">
      <div class="col-mobile-12 col-tablet-3 col-desktop-9">.col-mobile-12 .col-tablet-3 .col-desktop-9</div>
      <div class="col-mobile-12 col-tablet-9 col-desktop-3">.col-mobile-12 .col-tablet-9 .col-desktop-3</div>
  </div>
  <div class="row show-grid">
      <div class="col-mobile-12 col-tablet-3 col-desktop-push-9">.col-mobile-12 .col-tablet-3 .col-desktop-push-9</div>
      <div class="col-mobile-12 col-tablet-9 col-desktop-pull-3">.col-mobile-12 .col-tablet-9 .col-desktop-pull-3</div>
  </div>
  <div class="row show-grid">
      <div class="col-mobile-6 col-mobile-offset-3">.col-mobile-offset-3 .col-mobile-6</div>
  </div>
  <div class="row show-grid">
      <div class="col-mobile-6">
          <div class="row show-grid">
              <div class="col-mobile-6">.col-mobile-6</div>
              <div class="col-mobile-6">.col-mobile-6</div>
          </div>
      </div>
      <div class="col-mobile-6">.col-mobile-6</div>
  </div>
  <div class="row show-grid">
      <div class="col-mobile-12 hidden-desktop">
          .hidden-desktop
      </div>
      <div class="col-mobile-12 hidden-tablet">
          .hidden-tablet
      </div>
      <div class="col-mobile-12 hidden-mobile">
          .hidden-mobile
      </div>
      <div class="col-mobile-12 visible-desktop">
          .visible-desktop
      </div>
      <div class="col-mobile-12 visible-tablet">
          .visible-tablet
      </div>
      <div class="col-mobile-12 visible-mobile">
          .visible-mobile
      </div>
  </div>
</div>
{
  "items": [
    "<a href='#'>Stad.gent</a>",
    "<a href='#'>Overview</a>",
    "<span>Overview</span>",
    "<span>Overview</span>",
    "<span>Page title</span>"
  ]
}

There are no notes for this item.