Skip to main content

Banners

Version: 0.9.0
Edit

Content component that can be utilized as a full-width block or be incorporated within the content of a page. The text is overlaid on an image or background pattern and is often found in the subcontent of OU v3 pages.

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/banners.scss#L14

Banner Title

Bacon ipsum dolor amet lorem cow veniam, ad sint ut sunt. Ham brisket in adipisicing non spare ribs.

Call To Action 
<!-- banner -->
<div class="c-banner o-media-overlay o-media-overlay--justify-start">
  <div class="c-banner__media o-media-overlay__media">
    <img class="o-media-overlay__image" src="https://picsum.photos/2560/853" alt="" />
    <div class="o-media-overlay__image-overlay u-image--3x1" aria-hidden="true" focusable="false"><!--overlay--></div>
  </div>
  <div class="c-banner__content o-media-overlay__content o-grid">
     <div class="o-grid__item">
       <h2 class="c-banner__title">Banner Title</h2>
       <p class="c-banner__copy">Bacon ipsum dolor amet lorem cow veniam, ad sint ut sunt. Ham brisket in adipisicing non spare ribs.</p>
       <a class="c-button" href="#">Call To Action</a>
     </div>
  </div>
</div>