Banners are used to notify the user of a contextually relevant piece of information or event.
- 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.
- 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.
- Optional promotional image with width=250 and height=120. It is hidden in mobile.
- Main content for the banner. Inner elements can include
.banner-titleand a description. The banner title has a max character count of 40; the banner description has a max character count of 110.
- 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.
- Data-role for the dismiss button where XXX is a unique identifier for the banner.