When you need to call attention to timely information, for example communicating the latest updates to partner programs or a scheduled system maintenance, use the announcement element. Announcements are displayed no longer than 30 days.
It is prominently displayed at the top of the page so that users will see it and depending on the layout, can be placed in the right or left center column of a four column layout.
Announcements in a three-column layout with the browser maximized to the full screen may be problematic as the line length is excessively long. This inhibits legibility, especially when used for information that is important. Keep the announcements to a few lines or use within a four column layout.
Background color
The announcement module's background color was selected to be noticeable without distracting from the rest of the content on the page. If the announcement module is followed by a light blue or gray header bar, allow 1 pixel of space between the announcement module and the module following it.
Title
The title "Announcement" is placed above relevant headline to describe and communicate the type of content in this module.
Heading
The headline can be either mustard (h2) or gray (h3), depending on the level of importance. The mustard heading will be more noticeable.
Text body
Regular body text is used for the body of the announcement. Announcements can also include links that take the user to a different page.
View the code for this element
