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

    Link

    Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.

    Overview

    A link is a reference to a resource. This can be external (e.g. a different web page) or internal (e.g. a specific element in the current document).

    A text link with arrow icon

    When to Use

    Use a list to navigate to a different page within the application, navigate to an entirely different site, jump to an element on the same page, or link to emails and phone numbers.

    When Not to Use

    Use a button instead of a link for actions that will change data or manipulate how it is displayed, change a state, or trigger an action. Buttons should never be used for navigational actions.

    Formatting

    Anatomy

    Accordion anatomy diagram
    1. Link Label
    2. Icon (optional): ri-arrow-right-line

    Variants

    Accordion anatomy diagram
    • Standalone: These links are the default link variant. They are used on their own or directly following content and they do not use underlines. They can be paired with an icon.

    • Inline: Inline links are used within a sentence or paragraph and are styled with an underline. They should not be paired with an icon.

    Content

    Do

    • Keep labels concise
    • Accurately reflect the content users will find at the link destination
    • Have icons the same color as the text

    Don't

    • Use vague labels such as "click here"