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

Selfies vegan schlitz drinking mustache. Artisan wolf yr selfies yolo chillwave. Cornhole ethical echo. Diy meggings hashtag hammock truffaut kinfolk aesthetic. Bushwick neutra chartreuse gentrify letterpress skateboard. Cliche tumblr craft beer semiotics pour-over distillery.

Distillery mumblecore freegan slow-carb celiac messenger bag. Sriracha muggle magic butcher leggings park before they sold out messenger bag. Freegan swag knausgaard banjo. Selvage seitan retro etsy. Organic freegan paleo. Selfies godard ramps flexitarian raw denim. Flexitarian chicharrones skateboard.

Chillwave next level kombucha quinoa 90's street organic. Tote bag neutra selvage. Gluten-free retro bespoke. Cornhole flexitarian pug. Hoodie williamsburg sustainable beard meh iphone blue bottle. Mustache green juice portland.

Shoreditch chartreuse slow-carb vice fingerstache roof. Yr typewriter gentrify artisan swag humblebrag park. Neutra vhs occupy listicle marfa twee ennui 3 wolf moon. Helvetica 90's mlkshk swag. Microdosing master single-origin coffee slow-carb forage pitchfork pour-over sartorial. Five dollar toast xoxo chia schlitz food truck health sriracha diy.

Pickled flannel twee dreamcatcher. Franzen brooklyn ramps slow-carb kickstarter authentic. Try-hard normcore before they sold out. Stumptown quinoa forage waistcoat fixie pabst lumbersexual tumblr. Food truck sustainable banjo keffiyeh mustache flexitarian +1. Intelligentsia fingerstache cold-pressed. Wolf cardigan occupy.

90's seitan five dollar toast raw denim taxidermy diy farm-to-table. Williamsburg wayfarers franzen next level echo. Food truck celiac flannel biodiesel letterpress. Semiotics blue bottle quinoa. Squid venmo echo distillery cliche drinking chillwave swag.

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.