Announcements

By Ken Hawkins

news notifications announcements Requires EBI Visual Framework 1.3.0

Show important messages at the top of your content area.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how

Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<!-- Your message will be injected into the #main-content-area (or #main-content) -->
<div id="main-content-area"></div>
JS
/**
 * Once an announcement has been matched to the current page, show it (if there is one).
 * @param {Object} message - The message you wish to show on the page.
 * @param {string} message.headline - The headline to show (text)
 * @param {string} message.message - The contents of the message (HTML)
 * @param {string} [message.priority = 'callout'] - Optional class to add to message box. 'alert', 'warning', 'industry-background white-color'
 * @example
 *   ebiInjectAnnouncements({ headline: 'Your headline here', message: 'this', priority: 'alert' });
 */

ebiInjectAnnouncements({ headline: 'Your announcement here', message: 'Your message here', priority: 'alert' });

Similar Building Blocks

control

Animations
control

Analytics custom events
control

Conditional elements