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

    In-Page Alert

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

    Overview

    An in-page alert keeps users informed of important and sometimes time-sensitive changes. It appears inline within the page content and is contextually specific to a local experience and does not apply across multiple sites. It can have both an icon-only close button and a button with a contextual action to take.

    When to use

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

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

    Best Practices

    Do

    • write concise headings and copy totaling a max of 140 characters
    • post time-sensitive alerts temporarily and only keep them up for the duration of the crisis
    • describe the impact on the user

     

    Do Not

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

     

    Formatting

    Anatomy

    View of an in-page alert with markers numbering 1-6
    1. Container: Primary element that holds content, color, and icons.
    2. Icon: An information-line icon, except for the warning state where alert-line is used.
    3. Heading: Short, call-to-action text.
    4. Body Copy: Used for additional information
    5. CTA Link (Optional): There should never be more than one button with a contextual action in an alert banner.
    6. Close Icon (Optional): Closes the alert

    Variants

    An in-page alert always has a semantic meaning and uses semantic colors. Blue (informative), yellow (warning), and red (critical) are available as options.

    View of the three in-page alert variants: info, warning, and critical

    Deciding what to use

    Status

    Usage

    Color

    Icon

    Info

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

    Blue

    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

    In-page alerts do not dismiss automatically. They persist on the page 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. Including 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 CTA link by clicking anywhere within the button container.

    Keyboard

    Users can trigger a button or CTA 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.