Alerts
About this component
Alerts display across the top of all pcc.edu webpages and on the MyPCC login page as part of our emergency notification system to inform our community about emergency or unplanned closure information. To avoid confusion, every attempt is made to keep the text for an alert consistent with the message broadcast via other communication channels.
Alerts are posted by Communications staff upon direction from college administrators. The Web Team acts as a backup in case there are any issues with the system put in place to manage alerts. The Web Team may also post alerts in the case of a technology issue.
Guidelines
In most cases, alerts are used for closures related to weather events. During periods of questionable weather, the Web Team posts a public notice to educate our audience on where to look for closure information. If there’s an imminent large storm, we can post a spotlight, taken down as soon as the storm is past.
Alerts are not displayed for closures due to scheduled events, such as national holidays. College practice is also to not announce openings (e.g., we won’t post a “college open” alert even following a closure).
Styling
When an alert is issued, a notice will appear as a red bar with white text across the top of all pcc.edu webpages and on the MyPCC login page. The alert includes summary text that links to alert.pcc.edu for additional details. There is an exclamation mark warning icon before the text.
How to use for Alerts
Only the Web Team and certain other stakeholders have access to the college alert system.
Development info for Alerts
Stylesheet location:
/_source/styles/components/_alerts.scss
Learn about posting alert messages in Spaces. Once the post is published in the alert system, the red bar with the message will appear after a few minutes.
<div id="alert" role="complementary" aria-label="Test announcement"> <div class="grid-container"> <div class="grid-x grid-margin-x"> <div class="cell small-12 medium-1"> <i class="fa-solid fa-triangle-exclamation"></i> </div> <div class="cell small-12 medium-11"> <p>Alert message</p> </div> </div> </div> </div>
Example of Alerts
See the alert on the MyPCC login page.