<!-- 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">Disrupt yr pabst cold-pressed pop-up tilde</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">Everyday pour-over</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">Celiac cliche ennui typewriter freegan 90's taxidermy</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">
              Tote bag pork belly yr venmo ennui. 3 wolf moon small batch pour-over tattooed. Freegan cornhole aesthetic. Asymmetrical chia 8-bit. Food truck chambray brooklyn.
            </div>
            <div class="col-lg-6">
              <!-- Form (mods: --inversed) -->
              <form action="#form-2e90d9" 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-3ad88b">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-3ad88b" name="name-a9b155" 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">Cronut lumbersexual flexitarian bitters dreamcatcher truffaut</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Pbr&amp;b tattooed</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">Health butcher tattooed mlkshk 8-bit chia</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Pickled 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">Meggings aesthetic gastropub helvetica xoxo cornhole</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Farm-to-table kombucha</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">Keffiyeh 8-bit tofu phlogiston poutine irony narwhal</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">
              Cronut mumblecore intelligentsia locavore poutine keytar. Kitsch brunch chartreuse schlitz viral ramps literally gastropub. Taxidermy cold-pressed post-ironic.
            </div>
            <div class="col-lg-6">
              <!-- Form  -->
              <form action="#form-7c7dc2" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
                <div class="mb-30 form-group">
                  <label class="sr-only" for="control-e37242">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-e37242" name="name-0e747a" 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>