Banner Gated Content

v0.0.0

following component is currently for TWS use only.

Please note that this element can only be used once per page.

The Banner Gated Content should be placed inside a full width container with relative position.

A data-gated-percentage to set to the Banner Gated Content. The value is a percentage of the height of an element with ID #targeted-gated-area

Some content to display the example

Banh mi selfies brunch blog organic wolf. Thundercats muggle magic biodiesel echo meh authentic intelligentsia deep v. Tote bag lomo truffaut pitchfork park health cold-pressed. Mlkshk fanny pack meggings. Semiotics umami gentrify street green juice cleanse. Knausgaard bicycle rights carry taxidermy.

Franzen keytar selfies marfa. Pbr&b crucifix loko messenger bag yr keffiyeh stumptown farm-to-table. Kale chips direct trade migas dreamcatcher. Dreamcatcher craft beer irony squid hella. Kale chips meditation phlogiston venmo. Gentrify truffaut trust fund mustache tofu skateboard.

Ramps forage etsy austin authentic pork belly listicle single-origin coffee. Slow-carb stumptown tofu tattooed. Sartorial pork belly vinegar biodiesel venmo forage. Try-hard diy roof cold-pressed keytar ethical craft beer. Health skateboard normcore +1 deep v carry. Narwhal cliche lomo. Freegan you probably haven't heard of them vegan kogi.

Church-key put a bird on it brunch. Food truck readymade muggle magic. Authentic ethical direct trade mumblecore schlitz austin. Five dollar toast literally street try-hard 3 wolf moon. Taxidermy paleo bespoke crucifix. Ethical kitsch neutra narwhal. Biodiesel kale chips umami yr celiac sustainable humblebrag.

Pork belly mixtape wolf williamsburg polaroid truffaut hella meh. Diy ethical bicycle rights disrupt food truck echo. Post-ironic iphone squid chillwave tilde beard. +1 schlitz vinyl portland readymade shabby chic pitchfork kitsch. Selfies jean shorts 3 wolf moon photo booth. Meditation marfa meggings microdosing.

Ramps pabst ethical. Ennui retro chillwave dreamcatcher meggings selvage sustainable pork belly. Kogi everyday pbr&b lomo venmo gentrify. Health authentic pour-over. Kale chips bushwick quinoa tousled. Viral semiotics pbr&b put a bird on it. Ramps helvetica fixie neutra chia kogi vice.

This article is for registered members only

Flexitarian stumptown

<div class="position-relative" id="targeted-gated-area">
  <!-- Container (mods: --column) -->
  <div class="vi-container vi-container--column">...</div>
  <!-- Banner Gated Content  -->
  <div class="vi-banner-gated-content" data-gated-percentage="90">
    <div class="vi-banner-gated-content__fade-mask"></div>
    <div class="vi-banner-gated-content__info">
      <div class="vi-banner-gated-content__info-container">
        <hr class="vi-separator vi-separator--dotted">
        <h3>This article is for registered members only</h3>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn">Flexitarian stumptown</a>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Banner Gated Content JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Added

  6 Dec 2022 - Responsive support
  Initial draft


Changed

  28 Apr 2023 - changed z-index per request.