<!-- Banner (mods: (base) --gradient) -->
<div class="vi-banner vi-banner--gradient" role="banner">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-banner__content">
      <!-- Display Header type: dash  -->
      <div class="vi-display-header vi-display-header-dash vi-typesystem vi-typesystem--inversed">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="h1">Yuccie kickstarter mumblecore aesthetic pinterest echo paleo taxidermy</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--inversed vi-btn-underline--nested vi-btn">Typewriter meditation</a>
  </div>
</div>

<!-- Banner (mods: (base) --gradient) -->
<div class="vi-banner vi-banner--gradient" role="banner">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-banner__content">
      <!-- Display Header type: dash  -->
      <div class="vi-display-header vi-display-header-dash vi-typesystem vi-typesystem--inversed">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="h1">Loko hammock keytar loko fingerstache echo semiotics</h3>
      </div>
      <div class="vi-typesystem vi-typesystem--inversed">
        <div class="vi-grid">
          <div class="vi-grid__row vi-grid__row--hgap-60 vi-grid__row--vgap-30">
            <div class="col-lg-6">
              Put a bird on it slow-carb jean shorts. Green juice brooklyn cornhole vice sriracha ramps quinoa. Butcher farm-to-table hammock. Iphone kinfolk vhs.
            </div>
            <div class="col-lg-6">
              <!-- Form (mods: --inversed) -->
              <form action="#form-b18a4c" autocomplete="off" class="vi-form vi-form--inversed vi-typesystem" data-validate="true" novalidate>
                <div class="mb-30 form-group">
                  <label class="sr-only" for="control-bde4ec">Your Email Address</label>
                  <input aria-required="true" class="form-control" data-msg-success="Looks like an email address." data-msg="Please provide a valid email address." id="control-bde4ec" name="name-4e1a8b" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
                </div>
                <!-- Button type: solid  -->
                <button type="submit" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Banner (mods: (base) --grey) -->
<div class="vi-banner vi-banner--grey" role="banner">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-banner__content">
      <!-- Display Header type: dash  -->
      <div class="vi-display-header vi-display-header-dash vi-typesystem">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="h1">Portland humblebrag dreamcatcher bushwick thundercats pbr&amp;b hoodie viral</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Narwhal humblebrag</a>
  </div>
</div>

<!-- Banner (mods: (base) --lines) -->
<div class="vi-banner vi-banner--lines" role="banner">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-banner__content">
      <!-- Display Header type: dash  -->
      <div class="vi-display-header vi-display-header-dash vi-typesystem">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="h1">Yuccie try-hard kickstarter actually cleanse williamsburg synth vinegar</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Ennui kogi</a>
  </div>
</div>

<!-- Banner (mods: (base) --white) -->
<div class="vi-banner vi-banner--white" role="banner">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-banner__content">
      <!-- Display Header type: dash  -->
      <div class="vi-display-header vi-display-header-dash vi-typesystem">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="h1">Retro migas occupy post-ironic vegan cornhole narwhal</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Kinfolk vegan</a>
  </div>
</div>

<!-- Banner (mods: (base) --white) -->
<div class="vi-banner vi-banner--white" role="banner">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-banner__content">
      <!-- Display Header type: dash  -->
      <div class="vi-display-header vi-display-header-dash vi-typesystem">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="h1">Vegan chia whatever aesthetic synth ramps keffiyeh schlitz</h3>
      </div>
      <div class="vi-typesystem">
        <div class="vi-grid">
          <div class="vi-grid__row vi-grid__row--hgap-60 vi-grid__row--vgap-30">
            <div class="col-lg-6">
              Drinking farm-to-table biodiesel mustache. Etsy loko seitan cornhole typewriter synth cray. Knausgaard cliche pabst etsy mustache kale chips ramps. Keffiyeh pop-up pickled offal hoodie tattooed. Pop-up trust fund schlitz chicharrones farm-to-table cred tumblr.
            </div>
            <div class="col-lg-6">
              <!-- Form  -->
              <form action="#form-e3d2cb" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
                <div class="mb-30 form-group">
                  <label class="sr-only" for="control-b40234">Your Email Address</label>
                  <input aria-required="true" class="form-control" data-msg-success="Looks like an email address." data-msg="Please provide a valid email address." id="control-b40234" name="name-21d08e" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
                </div>
                <!-- Button type: solid  -->
                <button type="submit" class="vi-btn-solid vi-btn">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>