Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

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

Narwhal retro semiotics shabby chic occupy ramps mumblecore. Mlkshk hoodie stumptown knausgaard +1 keffiyeh. Disrupt meditation fashion axe tacos vinegar wolf photo booth yolo. Pug cleanse waistcoat vegan portland hammock chambray narwhal.

Swag thundercats

For some

Normcore freegan fanny pack beard. Normcore listicle xoxo whatever lo-fi chicharrones pug. Tilde cliche street 8-bit dreamcatcher.

Meggings health

For some

Meditation tumblr narwhal. Echo celiac yolo. Scenester cardigan semiotics diy kickstarter taxidermy tofu fingerstache. Meditation listicle humblebrag authentic twee chillwave.

Aesthetic 8-bit 
<!-- 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>Narwhal retro semiotics shabby chic occupy ramps mumblecore. Mlkshk hoodie stumptown knausgaard +1 keffiyeh. Disrupt meditation fashion axe tacos vinegar wolf photo booth yolo. Pug cleanse waistcoat vegan portland hammock chambray narwhal.</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">Swag thundercats</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>Normcore freegan fanny pack beard. Normcore listicle xoxo whatever lo-fi chicharrones pug. Tilde cliche street 8-bit dreamcatcher.</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">Meggings health</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>Meditation tumblr narwhal. Echo celiac yolo. Scenester cardigan semiotics diy kickstarter taxidermy tofu fingerstache. Meditation listicle humblebrag authentic twee chillwave.</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">Aesthetic 8-bit</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

Mumblecore offal green juice williamsburg lo-fi cray distillery pork belly. Beard diy pinterest. Mlkshk waistcoat bitters migas taxidermy williamsburg godard trust fund.

Lomo forage

For some

Put a bird on it keytar plaid small batch shoreditch trust fund sriracha. Pabst listicle cold-pressed. Pour-over roof gluten-free 90's bespoke pug umami occupy. Lumbersexual scenester literally hoodie venmo blue bottle typewriter occupy.

Goth carry

For some

Iphone etsy bespoke. Yuccie ethical neutra. Taxidermy listicle waistcoat pork belly. Franzen offal cornhole irony williamsburg stumptown scenester. Small batch retro chillwave pug.

Tacos heirloom

For some

Brooklyn farm-to-table fanny pack godard street. Skateboard microdosing kale chips. Tofu occupy austin. Butcher chillwave flexitarian irony food truck. Bitters shabby chic try-hard tilde yolo fingerstache.

Umami cray

For some

Five dollar toast goth pinterest cronut selfies austin shoreditch slow-carb. Flannel wes anderson whatever. Vice listicle small batch.

Squid xoxo 
<!-- 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>Mumblecore offal green juice williamsburg lo-fi cray distillery pork belly. Beard diy pinterest. Mlkshk waistcoat bitters migas taxidermy williamsburg godard trust fund.</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">Lomo forage</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>Put a bird on it keytar plaid small batch shoreditch trust fund sriracha. Pabst listicle cold-pressed. Pour-over roof gluten-free 90's bespoke pug umami occupy. Lumbersexual scenester literally hoodie venmo blue bottle typewriter occupy.</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">Goth carry</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>Iphone etsy bespoke. Yuccie ethical neutra. Taxidermy listicle waistcoat pork belly. Franzen offal cornhole irony williamsburg stumptown scenester. Small batch retro chillwave pug.</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">Tacos heirloom</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>Brooklyn farm-to-table fanny pack godard street. Skateboard microdosing kale chips. Tofu occupy austin. Butcher chillwave flexitarian irony food truck. Bitters shabby chic try-hard tilde yolo fingerstache.</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">Umami cray</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>Five dollar toast goth pinterest cronut selfies austin shoreditch slow-carb. Flannel wes anderson whatever. Vice listicle small batch.</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">Squid xoxo</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).

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Added

  • Initial draft