Warning: This block does not replace Foundation’s Interchange; you should definitely use Interchange to make sure your banner looks good (and loads well) at all screen sizes. To learn more about Foundation's Interchange, see their documentation.

Banner

There are a few configurations for this block, but the setup is simple. In its most basic configuration, it is a plain, full-width banner. However, each configuration alters or adds to the style of the banner. You can make the banner fit your needs, wants, and style.

Basic Banner

<div class="banner">
  <img class="banner__image" src="" alt="">
</div>

Banner with a Simple Overlay

<div class="banner">
  <img class="banner__image" src="" alt="">
  <div class="banner__overlay">&nbsp;</div>
</div>

Banner with a Text Overlay

<div class="banner">
  <img class="banner__image" src="" alt="">
  <div class="banner__overlay">
    <h1 class="banner__title">Title</h1>
    <p class="banner__subtitle">Subtitle</p>
  </div>
</div>

Repositioning the Text Overlay

By default, the text overlay will be centered both vertically and horizontally. You can alter the position by applying the following modifiers to thebanner__overlay:

Modifier	Effect
--top	Moves the text to the top
--right	Moves the text to the right
--bottom	Moves the text to the bottom
--left	Moves the text to the left

<div class="banner">
  <img class="banner__image" src="" alt="">
  <div class="banner__overlay --left --bottom">
    <h1 class="banner__title">Title</h1>
    <p class="banner__subtitle">Subtitle</p>
  </div>
</div>

Other Modifiers

Modifier	Element	Effect
--blurred	banner__image	Blurs the image. Best used when using the overlay.
--primary	banner__overlay	Changes the overlay color to match the theme.
--weber	banner__overlay	Changes the overlay color to Weber Purple.
--light	banner__overlay	Changes the overlay color to white instead of the default black.
--transparent	banner__overlay	Changes the overlay color to transparent.