<!-- 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">
      <!-- Type (mods: --text-regular) -->
      <p class="text-dominant mb-20 vi-type vi-type--text-regular">7
        hours ago
      </p>
      <!-- Type (mods: --header-regular) -->
      <p class="text-dominant vi-type vi-type--header-regular">Schlitz lo-fi whatever. Meh biodiesel kogi cliche knausgaard dreamcatcher loko pitchfork. Green juice tofu everyday yr raw denim slow-carb. Fingerstache helvetica microdosing deep v.
      </p>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Reade more on LinkedIn</a>
  </div>
</div>

<!-- Banner (mods: (base) --gray) -->
<div class="vi-banner vi-banner--gray" role="banner">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">
    <div class="vi-banner__content">
      <!-- Type (mods: --text-regular) -->
      <p class="text-dominant mb-20 vi-type vi-type--text-regular">13
        hours ago
      </p>
      <!-- Type (mods: --header-regular) -->
      <p class="text-dominant vi-type vi-type--header-regular">Typewriter scenester try-hard offal echo flexitarian seitan wayfarers. Farm-to-table stumptown hella venmo tacos gluten-free chambray. Mustache roof skateboard crucifix normcore.
      </p>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Reade more on LinkedIn</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">
      <!-- Type (mods: --text-regular) -->
      <p class="text-dominant mb-20 vi-type vi-type--text-regular">15
        hours ago
      </p>
      <!-- Type (mods: --header-regular) -->
      <p class="text-dominant vi-type vi-type--header-regular">Trust fund swag banh mi everyday health fanny pack tofu waistcoat. Cold-pressed yuccie sriracha kogi 8-bit before they sold out. Ramps selvage pabst austin you probably haven't heard of them yuccie diy.
      </p>
    </div>
    <a class="vi-banner__trigger">
      <!-- Button type: underline  -->
    </a><a href="#" class="vi-btn-underline vi-btn-underline--nested vi-btn">Reade more on LinkedIn</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">
      <!-- Type (mods: --text-regular) -->
      <p class="text-white mb-20 vi-type vi-type--text-regular">14
        hours ago
      </p>
      <!-- Type (mods: --header-regular) -->
      <p class="text-white vi-type vi-type--header-regular">Echo food truck roof street poutine. Waistcoat heirloom raw denim literally pop-up tumblr. Brunch echo tofu tote bag shabby chic meditation.
      </p>
    </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">Reade more on LinkedIn</a>
  </div>
</div>

No example to show source of.

<!-- 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">Pitchfork locavore tumblr kogi lumbersexual diy loko whatever</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">
              Church-key keffiyeh pork belly pour-over distillery cred. Everyday cold-pressed meh yuccie banh mi lo-fi cray lumbersexual. Venmo asymmetrical scenester ennui truffaut. Pbr&amp;b leggings drinking marfa direct trade keffiyeh tilde. Artisan organic actually asymmetrical disrupt 3 wolf moon direct trade.
            </div>
            <div class="col-lg-6">
              <!-- Form  -->
              <form action="#form-83a6c5" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
                <div class="mb-30 form-group">
                  <label class="sr-only" for="control-441576">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-441576" name="name-09b583" 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>