Site Split

v0.0.0

The site split allows a user to choose what section of the site they like to visit. It can be used 'stand alone' or in a Site Split Strip.

The Site split shows two or three directions on a row. Contents of a direction depends on the usecase.

Two on a row #

The example shows three directions, on larger screens two directions per row. Odd directions are centered. The grid is using gap-widths of 60 and 100 on larger screens.

For some

Typewriter retro phlogiston sustainable. Lomo skateboard drinking. Keffiyeh bicycle rights five dollar toast mlkshk lo-fi. Tilde listicle messenger bag kale chips 90's.

+1 wayfarers

For some

Slow-carb diy deep v muggle magic narwhal park pinterest. Authentic twee waistcoat you probably haven't heard of them art party. Kombucha food truck shabby chic. Pinterest slow-carb knausgaard. Plaid pork belly mustache umami church-key muggle magic.

Ennui diy

For some

Try-hard roof keffiyeh green juice vice whatever sriracha. Banjo vegan mustache craft beer church-key etsy drinking flexitarian. Kombucha selfies loko iphone fixie.

Cardigan gastropub

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Site Split  -->
  <div class="vi-site-split">
    <div class="vi-site-split__options">
      <div class="vi-grid">
        <div class="vi-grid__row justify-content-center vi-grid__row--grid-60 vi-grid__row--hgap-lg-100">
          <div class="col-12 col-md-6">
            <div class="vi-site-split__card">
              <div class="vi-site-split__card-inset">
                <div class="vi-site-split__card-stack">
                  <div class="vi-typesystem vi-typesystem--collapse-last">
                    <h3 class="h4">For some</h3>
                    <p>Typewriter retro phlogiston sustainable. Lomo skateboard drinking. Keffiyeh bicycle rights five dollar toast mlkshk lo-fi. Tilde listicle messenger bag kale chips 90's.</p>
                  </div>
                </div>
                <div class="vi-site-split__card-stack">
                  <!-- Button type: solid  -->
                  <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">+1 wayfarers</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="vi-site-split__card">
              <div class="vi-site-split__card-inset">
                <div class="vi-site-split__card-stack">
                  <div class="vi-typesystem vi-typesystem--collapse-last">
                    <h3 class="h4">For some</h3>
                    <p>Slow-carb diy deep v muggle magic narwhal park pinterest. Authentic twee waistcoat you probably haven't heard of them art party. Kombucha food truck shabby chic. Pinterest slow-carb knausgaard. Plaid pork belly mustache umami church-key muggle magic.</p>
                  </div>
                </div>
                <div class="vi-site-split__card-stack">
                  <!-- Button type: solid  -->
                  <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Ennui diy</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="vi-site-split__card">
              <div class="vi-site-split__card-inset">
                <div class="vi-site-split__card-stack">
                  <div class="vi-typesystem vi-typesystem--collapse-last">
                    <h3 class="h4">For some</h3>
                    <p>Try-hard roof keffiyeh green juice vice whatever sriracha. Banjo vegan mustache craft beer church-key etsy drinking flexitarian. Kombucha selfies loko iphone fixie.</p>
                  </div>
                </div>
                <div class="vi-site-split__card-stack">
                  <!-- Button type: solid  -->
                  <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Cardigan gastropub</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Three on a row #

The example shows five directions, on larger screens three directions per row. Odd directions are centered. The grid is using a gap-width of 60.

For some

Franzen lomo blog bushwick 3 wolf moon. Brooklyn mustache tumblr kickstarter cray. Brunch meggings bitters cronut. Godard wayfarers viral vhs kombucha meh pop-up crucifix. Wayfarers vhs flannel biodiesel readymade 8-bit.

Chia portland

For some

Forage williamsburg tousled deep v ethical yr pinterest. Butcher lo-fi chartreuse quinoa selfies. Muggle magic banh mi humblebrag etsy. Quinoa pinterest dreamcatcher plaid brooklyn cronut street celiac.

Mlkshk gastropub

For some

Celiac quinoa hammock banjo pork belly shabby chic forage shoreditch. Kickstarter polaroid selfies literally pop-up knausgaard listicle. Waistcoat pug chambray meditation cleanse kale chips. Cred microdosing carry slow-carb 90's 8-bit.

Pickled pinterest

For some

Keffiyeh pabst thundercats ugh. Pbr&b church-key next level. Flexitarian brooklyn mumblecore. Goth disrupt messenger bag umami fixie meh.

Stumptown authentic

For some

Freegan thundercats actually hella authentic meggings mustache disrupt. Disrupt raw denim narwhal knausgaard kale chips forage swag. Artisan normcore knausgaard lomo seitan kombucha. Salvia etsy try-hard brooklyn lo-fi beard. Pinterest pabst blog vice before they sold out.

Roof meggings

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Site Split  -->
  <div class="vi-site-split">
    <div class="vi-site-split__options">
      <div class="vi-grid">
        <div class="vi-grid__row justify-content-center vi-grid__row--grid-60">
          <div class="col-12 col-md-6 col-lg-4">
            <div class="vi-site-split__card">
              <div class="vi-site-split__card-inset">
                <div class="vi-site-split__card-stack">
                  <div class="vi-typesystem vi-typesystem--collapse-last">
                    <h3 class="h4">For some</h3>
                    <p>Franzen lomo blog bushwick 3 wolf moon. Brooklyn mustache tumblr kickstarter cray. Brunch meggings bitters cronut. Godard wayfarers viral vhs kombucha meh pop-up crucifix. Wayfarers vhs flannel biodiesel readymade 8-bit.</p>
                  </div>
                </div>
                <div class="vi-site-split__card-stack">
                  <!-- Button type: solid  -->
                  <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Chia portland</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-4">
            <div class="vi-site-split__card">
              <div class="vi-site-split__card-inset">
                <div class="vi-site-split__card-stack">
                  <div class="vi-typesystem vi-typesystem--collapse-last">
                    <h3 class="h4">For some</h3>
                    <p>Forage williamsburg tousled deep v ethical yr pinterest. Butcher lo-fi chartreuse quinoa selfies. Muggle magic banh mi humblebrag etsy. Quinoa pinterest dreamcatcher plaid brooklyn cronut street celiac.</p>
                  </div>
                </div>
                <div class="vi-site-split__card-stack">
                  <!-- Button type: solid  -->
                  <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Mlkshk gastropub</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-4">
            <div class="vi-site-split__card">
              <div class="vi-site-split__card-inset">
                <div class="vi-site-split__card-stack">
                  <div class="vi-typesystem vi-typesystem--collapse-last">
                    <h3 class="h4">For some</h3>
                    <p>Celiac quinoa hammock banjo pork belly shabby chic forage shoreditch. Kickstarter polaroid selfies literally pop-up knausgaard listicle. Waistcoat pug chambray meditation cleanse kale chips. Cred microdosing carry slow-carb 90's 8-bit.</p>
                  </div>
                </div>
                <div class="vi-site-split__card-stack">
                  <!-- Button type: solid  -->
                  <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Pickled pinterest</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-4">
            <div class="vi-site-split__card">
              <div class="vi-site-split__card-inset">
                <div class="vi-site-split__card-stack">
                  <div class="vi-typesystem vi-typesystem--collapse-last">
                    <h3 class="h4">For some</h3>
                    <p>Keffiyeh pabst thundercats ugh. Pbr&amp;b church-key next level. Flexitarian brooklyn mumblecore. Goth disrupt messenger bag umami fixie meh.</p>
                  </div>
                </div>
                <div class="vi-site-split__card-stack">
                  <!-- Button type: solid  -->
                  <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Stumptown authentic</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-4">
            <div class="vi-site-split__card">
              <div class="vi-site-split__card-inset">
                <div class="vi-site-split__card-stack">
                  <div class="vi-typesystem vi-typesystem--collapse-last">
                    <h3 class="h4">For some</h3>
                    <p>Freegan thundercats actually hella authentic meggings mustache disrupt. Disrupt raw denim narwhal knausgaard kale chips forage swag. Artisan normcore knausgaard lomo seitan kombucha. Salvia etsy try-hard brooklyn lo-fi beard. Pinterest pabst blog vice before they sold out.</p>
                  </div>
                </div>
                <div class="vi-site-split__card-stack">
                  <!-- Button type: solid  -->
                  <a href="#" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Roof meggings</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheet is used to display the example(s).

Download Container Stylesheet

JavaScript #

The following javascript is required to display this component.

Download Button JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Added

  Initial draft