Banners

<div class="banner"> <div class="banner-figure"> <img src="https://placehold.it/250x120" alt="" width="250" height="120" /> </div> <div class="banner-column banner-body"> <h4 class="banner-title">Banner Title</h4> <p class="banner-description">Banner Description</p> </div> <div class="banner-column banner-actions"> <a class="button button--marketing">Learn More</a> <p><a href="#" data-role="data-gsc-dismiss-XXX">Dismiss</a></p> </div> </div>

Usage:

1. .banner

• Default banners are similar to alerts, in that they are intended to notify the user of a contextually relevant piece of information or event. The Banner includes the media-table object as defined by the SASS Library. This is similar to the OOCSS media object, but displays like a table to allow vertical centering of its content.

2. .banner-column

• Banners can be divided into multiple sections which vertically align all of its content to the middle. The vertical alignment is a setting, and can be changed.

3. .banner-figure

• Optional promotional image with width=250 and height=120. It is hidden in mobile.

4. .banner-body

• Main content for the banner. Inner elements can include .banner-title and a description. The banner title has a max character count of 40; the banner description has a max character count of 110.

5. .banner-actions

• Call-to-actions for the banners lives in here. Can included call to action links and/or the dismiss button for the banner.
• To have the dismiss button be on a second line, add a paragraph tag to the dismiss button. If not, the two buttons will be on the same line.

5. data-role=data-gsc-dismiss-XXX

• Data-role for the dismiss button where XXX is a unique identifier for the banner.