Banner

The banner markup MUST be located inside the .ui-app__banner element. This allows the banner to be used either in fixed or push-down mode.

Default (push down)

By default, the banner sits at the top of the site, where it pushes down the rest of the content.

<!-- Banner (push down) -->
<div class="ui-banner">
  <div class="ui-banner__left">
    <p class="ui-paragraph ui-paragraph--lg ui-banner__weight--900">...</p>
    <p class="ui-paragraph--md ui-paragraph--medium">...</p>
  </div>

  <div class="ui-banner__right">
    <div class="ui-row ui-row--center">
      <div class="ui-col ui-col--small--shrink ui-col--large--order-last">
        <!-- button -->
        <button class="ui-btn ui-btn--secondary">...</button>

        <!-- instead of a button (above) we can use a link styled as a button (see below) -->
        <!-- <a class="ui-btn ui-btn--secondary" href="#">...</a>-->
      </div>

      <div class="ui-col ui-col--small--expand ui-col--large--align-right">
        <!-- link -->
        <a class="ui-link ui-link--underline" href="#">...</a>
      </div>
    </div>
  </div>
</div>

Fixed (bottom)

We can also show the banner fixed at the bottom of the screen (overlapping the content).

<!-- fixed (bottom) -->
<div class="ui-banner ui-banner--fixed">
  <div class="ui-banner__left">...</div>
  <div class="ui-banner__right">

    <!-- an external link can also be made to look like a button (see below) -->
    <div class="ui-row ui-row--center">
      <div class="ui-col ui-col--small--shrink ui-col--large--order-last">
        <a class="ui-btn ui-btn--secondary" href="#">...</a>
      </div>
      <div class="ui-col ui-col--small--expand ui-col--large--align-right">
        <a class="ui-link ui-link--underline" href="#">...</a>
      </div>
    </div>
  </div>
</div>

Inline (within page)

Banner can also be placed anywhere in the page. It will be displayed where ever the markup sits in the HTML page. In that scenario, the banner HTML markup should not be placed within ".ui-app__banner".

<!-- inline (within page) -->
<div class="ui-banner ui-banner--inline">
  <div class="ui-banner__left">...</div>
  <div class="ui-banner__right">...</div>
</div>

Dark theme

<!-- dark theme -->
<div class="ui-banner ui-banner--dark">
  <div class="ui-banner__left">...</div>
  <div class="ui-banner__right">...</div>
</div>

Red theme

<!-- red theme -->
<div class="ui-banner ui-banner--alert">
  <div class="ui-banner__left">...</div>
  <div class="ui-banner__right">...</div>
</div>

Green theme