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, .
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>
.jpg)
Banner with a Simple Overlay
<div class="banner">
<img class="banner__image" src="" alt="">
<div class="banner__overlay"> </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. |