Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Global Alert

    A global alert displays a prominent message at the top of the screen.

    Overview



    A global alert displays a prominent message at the top of the screen. Global alerts bring a user’s attention to a significant situation, such as a site-wide service disruption or other critical information that will impact most users.

    When to use

    Global alerts appear above the global header bar and apply to the entire site.

    Be mindful of the amount of content in a global alert. Since they appear at the top of the page, they can significantly impact the visibility of other content, especially on smaller mobile screens. Use a link to direct users to further information if needed.

     

    View of a warning state global alert at the top of a screen on desktop

    Best Practices

    Do

    • write concise headings and copy totaling a max of 140 characters
    • consider how tall the global alert will appear on mobile screens
    • post global alerts temporarily and only keep them up for the duration of the crisis
    • describe the impact on the user

     

    Do Not

    • stack global alerts
    • use global alerts just for styling regular content (for emphasis or highlighting)
    • use more than one link

     

    Formatting

    Anatomy

    View of a global alert with markers numbering 1-5
    1. Container
    2. Icon: Along with the color styling, the icon helps indicate the type of alert.
    3. Heading
    4. Body Copy
    5. CTA Link

     

    Variants

    Global alerts always have a semantic meaning and use semantic colors to help indicate the level of urgency. Gray (neutral), yellow (warning), and red (critical) are available as options. Note that the icon also varies across different variants.

    A view of the global alert states: neutral, warning and critical.

    Deciding What to Use

     

    Status

    Usage

    Color

    Icon

    Neutral

    Use neutral alerts for important time-sensitive information. For example, important dates, recent content updates, new policies or system notifications.

    Gray

    ri-information-line

    Warning

    Warning alerts tell the user something urgent or help the user avoid a problem. For example, travel information, content trigger warnings or location closures.

    Yellow

    ri-alert-line

    Critical

    Critical alerts should only be used for active emergency situations that could pose a health or safety risk. For example, severe weather threats or natural disasters.

    Red

    ri-error-warning-line

    Behavior

    Global alerts are not sticky and should scroll with the other content on the page.