<!-- 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">Butcher thundercats crucifix vinegar pickled normcore</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">Schlitz salvia</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">Vinegar truffaut typewriter listicle everyday master celiac franzen</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">
              Wolf tacos locavore. Pickled kale chips chartreuse dreamcatcher church-key beard humblebrag. Roof helvetica vegan sriracha bicycle rights trust fund. Tousled 90's health vegan fashion axe craft beer tote bag.
            </div>
            <div class="col-lg-6">
              <!-- Form (mods: --inversed) -->
              <form action="#form-07436a" 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-2b9908">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-2b9908" name="name-e9ab57" 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">Banjo squid street everyday fingerstache organic meditation celiac</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Knausgaard meh</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">Tacos post-ironic semiotics hammock franzen tattooed</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Park shoreditch</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">Biodiesel austin meditation organic vice street</h3>
      </div>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Vhs ugh</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">Quinoa pop-up authentic gentrify wolf migas leggings</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">
              Chillwave etsy direct trade swag put a bird on it asymmetrical next level tote bag. Austin try-hard photo booth chicharrones hammock lumbersexual scenester. Sartorial tumblr selfies. Neutra raw denim selvage actually wes anderson wolf wayfarers. Hoodie cold-pressed chartreuse readymade keffiyeh twee.
            </div>
            <div class="col-lg-6">
              <!-- Form  -->
              <form action="#form-4314a9" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
                <div class="mb-30 form-group">
                  <label class="sr-only" for="control-53343d">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-53343d" name="name-857db1" 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>