Skip to main content

Official website

of the Commonwealth of Pennsylvania

    The .gov means it's 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

    In-Page Alert

    An in-page alert keeps users informed of important and sometimes time-sensitive changes.

    Overview

    An in-page alert appears inline within the page content. This type of alert is contextually specific and does not apply across multiple sites.

    When to use

    In-page alerts are used to inform users of information in a prominent way. Use a link to direct users to details, if needed.

    Example of an in-page alert on a desktop agency content page

    Best practices for in-page alerts

    Do

    • Write concise headings and copy, with a maximum of 140 characters.
    • Post time-sensitive alerts temporarily. Only keep them up for the duration of the crisis.
    • Describe the impact on the user.

    Do not

    • Stack in-page alerts. Only use one in-page alert at a time.
    • Use in-page alerts for styling regular content.
    • Provide more than one link. Choose the best single destination for details on the alert.

    Formatting

    Anatomy

    Illustration of the anatomy of an in-page alert, including markers numbering 1-6
    1. Container: The primary element that holds content, color, and icons.
    2. Icon: An information-line icon. This is used in most cases except for the warning state, where alert-line is used.
    3. Heading: Provide a short, informative heading.
    4. Body copy: Used for additional information.
    5. Call-to-action link (optional): Include up to one link with a contextual action.
    6. Close icon (optional): Closes the alert.

    Variants

    An in-page alert has a semantic meaning and uses semantic colors. The options include informational alerts (blue), warning alerts (yellow), and critical alerts (red). 

    Examples of the three in-page alert variants: informational, warning, and critical

    Deciding which alert to use

    Status

    Color

    Icon

    Use

    		Examples

    Information

    		Blue

    ri-information-line

     Sharing important and time-sensitive information.

    		Important dates, recent content updates, new policies, or system notifications.

    Warning

    Yellow

    ri-alert-line

    Telling the user something urgent or helping the user avoid a problem. 

    		Travel information, content trigger notices, or location closures.

    Critical

    Red

    		ri-error-warning-line

    Only use in active emergency situations that could pose a health or safety risk.

    		Severe weather threats or natural disasters.

    Behavior

    In-page alerts do not dismiss automatically. They persist until the user dismisses them or takes action that resolves the notification.

    A small “x” in the top right corner is used to dismiss inline notifications. The close button is optional and should not be included if it is critical for a user to read or interact with the notification.

    Mouse

    A user can close a dismissible notification by clicking the close x. Users can trigger a button or call-to-action link by clicking anywhere within the button container.

    Keyboard

    Users can trigger a button or call-to-action link by pressing enter or space while the button has focus. For actionable notifications, the action gets focus first. Use tab to move between action and the close x. To close notifications, press enter or space while the close x has focus, or use the esc key.