11 banner Banners

Open in new window

A flexible banner module, supporting all breakpoints and very long text strings. Image, button and close button are optional.

Examples
Default styling

Get the account that protects you rather that profits off you.

Sign Up
.hide-on-mobile
use this modifier to hide the banner on smaller breakpoints

Get the account that protects you rather that profits off you.

Sign Up
.sumo-banner-warning
use this modifier to show a warning banner

Get the account that protects you rather that profits off you.

Sign Up
.sumo-banner-no-close
use this modifier to hide the close button

Get the account that protects you rather that profits off you.

Sign Up
Markup: ../../../../../styleguide/styleguide-examples/banner.njk 
<div class="sumo-banner ">
  <div class="content">
    <img class="icon" src="static/FF_Master__icon.2da25dd18cf7e04e.svg" alt="" role="presentation" />
    <p class="heading">
      Get the account that protects you rather that profits off you.
    </p>
    <a href="#" class="sumo-button primary-button button-lg">
      Sign Up
    </a>
    <button class="sumo-close-button close-button">
    
      <img src="static/close-white.b28895459704928a.svg" />
    
    </button>
  </div>
</div>
Source: ../kitsune/sumo/static/sumo/scss/components/_banner.scss, line 4