Alert

The Alert is a high-visibility banner for urgent or breaking information. People see it before the main page content. It can carry a short line plus optional longer detail, an optional link, and optional dismiss. It demands attention more strongly than a Toast, which is better for lightweight feedback.

The banner sits above the page so the message is hard to miss. Two visual tones help match seriousness: an urgent treatment for emergencies and time-sensitive warnings, and a calmer treatment for general breaking news when you still need prominence without the same alarm level.

When short and long copy both exist, people can use See more / See less to expand or collapse the longer text so the first line stays scannable. An optional link can sit behind the short message or appear as its own labelled action, depending on how you author it. An optional dismiss control lets people hide the banner for their session when the message does not need to stay fixed on screen.

1. Icon and type: distinguishes emergency style from breaking news style at a glance.
2. Primary message: the short line everyone sees first.
3. Expanded detail: optional; revealed when See more is used.
4. Link: optional action or destination.
5. Dismiss: optional control to close the banner.

Lead with a short first line that states the situation and what people should do or know. Put detail, nuance, and secondary facts in the long message or behind See more so the top of the banner stays readable on phones and in peripheral vision.

If you add a link, make the destination and label match the promise of the copy. Assume the message may be seen out of context (for example in feeds or shared links), so the short line should still make sense on its own.

Coordinate timing, wording, and retirement of the alert with your communications process so banners do not linger after an event is over.

The Alert is meant for site-wide or broad situations, not for routine page-level notes. It is usually placed in fixed areas of the experience (for example the top of the page) rather than dropped into arbitrary content zones. It may not appear in the same component picker as everyday layout blocks; placement is often handled by people who manage templates or global regions.

Whether the banner appears for a given page depends on authoring choices (for example turning display on) and on which page layout is in use. Some shared layouts always surface the alert so key messages stay aligned across those experiences.

• Campus-wide or high-impact situations: safety, security, severe weather, or breaking news that should sit above normal content.
• When you need a strong first line and optional depth without sending people to a separate page immediately.

• Inline or local notices tied to one block of content; consider Status bar or patterns inside the page body.
• Long-form policy or reference text; use an article, detail page, or expandable content instead of a permanent banner.
• Low-urgency reminders; use lighter patterns so you do not train people to ignore the alert.

Do

• Keep the short message tight and action-oriented.
• Plan how and when the alert comes down after the event.
• Test See more, links, and dismiss on mobile and with a realistic keyboard path.

Don't

• Leave an alert enabled without an owner and a clear end state.
• Pack the short line with everything; use the long message or See more for detail.