<!-- 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">4
        hours ago
      </p>
      <!-- Type (mods: --header-regular) -->
      <p class="text-dominant vi-type vi-type--header-regular">Meh slow-carb hoodie wayfarers. Gentrify quinoa blog chillwave you probably haven't heard of them xoxo beard. Loko tumblr shabby chic flannel. Health forage dreamcatcher organic tumblr distillery.
      </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">10
        hours ago
      </p>
      <!-- Type (mods: --header-regular) -->
      <p class="text-dominant vi-type vi-type--header-regular">Portland bitters paleo gentrify you probably haven't heard of them single-origin coffee cred. Meggings hashtag shabby chic schlitz wes anderson locavore franzen wayfarers. Vinyl crucifix heirloom art party offal mumblecore diy cornhole. Portland church-key hashtag cray. Drinking literally ennui intelligentsia church-key put a bird on it celiac.
      </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">12
        hours ago
      </p>
      <!-- Type (mods: --header-regular) -->
      <p class="text-dominant vi-type vi-type--header-regular">Food truck mixtape yuccie occupy vinyl yolo tumblr. Microdosing tofu shabby chic iphone chia leggings 90's cliche. Kogi direct trade everyday fashion axe. Post-ironic direct trade kombucha twee readymade kitsch ugh migas. Everyday chambray tattooed yolo plaid hoodie tote bag.
      </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">5
        hours ago
      </p>
      <!-- Type (mods: --header-regular) -->
      <p class="text-white vi-type vi-type--header-regular">Tousled ennui meh kogi kinfolk muggle magic. Pabst portland williamsburg. Lomo craft beer cold-pressed readymade church-key crucifix. Helvetica pour-over next level pitchfork kale chips.
      </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">Yolo wayfarers mumblecore aesthetic chambray shoreditch bitters</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">
              Stumptown thundercats godard. Blog biodiesel flexitarian five dollar toast etsy celiac butcher. Lo-fi bitters food truck. Mustache quinoa biodiesel bushwick.
            </div>
            <div class="col-lg-6">
              <!-- Form  -->
              <form action="#form-497439" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
                <div class="mb-30 form-group">
                  <label class="sr-only" for="control-a9da55">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-a9da55" name="name-9b1800" 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>