Announcement
On this page
Usage
Use an announcement to display an important message across pages.
- To display a message to a specific audience or group
- For an important message or announcement
- To support events or new initiatives
- If content is very long
- If there are multiple messages or announcements
- To advertise secondary or less important content
- If the message does not have a call to action
- As alert feedback as the result of user action
Experience types
An announcement displays content to audiences depending on a set of qualifications.
- Experience A - users who have not registered for the event will see this announcement
- Experience B - users who have registered for the event will see this announcement on the day of the event or after the event
Layout
Minimum elements
Body text, a call to action, and a close button are required at a minimum. From here, you may customize an announcement to your preference.
Positioning
An announcement is usually placed at the top of a page above the navigation. In rare cases, it can be placed below the hero, but this should be avoided when possible.
Customizing
The following is a list of things you can do to customize an announcement.
- Add an inline or background image
- Change text or call to action content
- Remove the close button
Inline image
An announcement may include an icon, logo, or something else that adds context or visual interest.
On small viewport sizes, an inline image can be positioned to the left or on top of body text.
Background image
An announcement includes a background color and may include a background image. A background image can be positioned on the left or right. Do not position a background image on the right if there is a close button. Images should not fill the entire background because that might render some text unreadable.
Close Button
An announcement includes a close button, but you may remove it only if absolutely necessary.
Character counts
Use these guidelines to write content that is short and to the point.
Helpful tip
Character counts are estimates, they could end up being shorter or longer when text is translated to other languages.
| Element | Max characters | Max lines |
|---|---|---|
| Body text | 65 | 1 (2 lines on small viewports) |
| Call to action | 25 | 1 |
Responsive Design
Background images will shift or disappear as viewport sizes get smaller.
Best Practices
Background images
Position a background image away from text that needs to be readable.
Do not use a background image that risks text readability.
Dark theme
Use a dark theme announcement if it has a different background color than the navigation.
Do not use a dark theme announcement if it has the same background color as the navigation.
Alert
Use an alert for alert use cases.
Do not apply alert styling to an announcement.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
