Minnesota Department of Transportation

511 Travel Info

Design System

This is an example of a single page message bar.

This is an example of a content specific message bar.

Message bars are a great way to notify visitors of important information. Their use should be limited to important, short-term information. Over-use of these elements will reduce their importance and impact.

Types

Emergency Alert

The emergency alert bar should only be used for the most important information, such as severe weather or last-minute road closures.

Warning Alert

The warning alert bar should be used for important but not emergency level information, such as schedule changes.

Information Alert

The information alert should be used for situations where information is important, but doesn't rise to the level of an emergency or warning. Such situations include upcoming events and status changes.

Locations

Directory wide message bar

The directory wide message bar should be used when the message needs to be displayed on all pages in a directory or with a common navigation.

The directory wide message bar should be placed at the bottom of the main nav Server Side Include (ssi/nav.html) for a directory, after the closing unordered list tag (</ul>).

</ul>

<article>

<p class="emergencyAlert">This is an example of a directory wide message bar.</p>

</article>

Single page message bar

The single page message bar should be used in situations where a message is important to a specific topic, but only needs to be displayed on a single page.

The single page message bar should be placed immediately following the opening section tag (<section class="side-main-content">, before the first article tag (<article>).

<section class="side-main-content">

<div>

<p class="warningAlert">This is an example of a single page message bar.</p>

</div>

<article>

Content-specific message bar

The content-specific message bar should be used in situations where a message should only be displayed for a specific section of content on a page.

Note: The content-specific message bar should not be used as a design element. It should never be used on permanent/long-term information. It's use should be limited to important, short-term messages.

The content specific message bar can be applied to any paragraph.

<p class="informationAlert">This is an example of a content specific message bar.</p>