Global Banner

Global Banner can be customized in Paige to have different backgrounds in Mobile and Desktop. Logic is written such that when there is a mobile background image in paige, then the html is used to reflect that. Otherwise the same image is used for both desktop and mobile.

<a id="" class="global-banner {{#smallImageUrl}}global-banner__switch{{/smallImageUrl}}" data-track="" data-context="global navigation" data-label="{{topLine}}" href="{{ctaLink}}">
  <div class="global-banner__bg global-banner__desktop" style="background-image: url({{subTitle}});">
    <div class="global-banner__content" style="background-image: url({{ctaLabel}});">
    </div>
  </div>
  <div class="global-banner__bg global-banner__mobile" style="background-image: url({{smallImageUrl}});">
    <div class="global-banner__content" style="background-image: url({{imageUrl}});">
    </div>
  </div>
</a>