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

    Anchor Link component user guide

    Anchor links are used to add anchors to the text, to link users to content on the current page.

     

    Anchors are set through the Text component. Any component with a CTA may be used for the link. For example, the primary CTA in this Hero is an anchor to step 10 below.

    Sample anchor
    Text component user guide

    Authoring Fields

    Adding anchor links to the page

    Note: Anchors may be linked from Text to Text component (as in the example below). They may also link from other components with linking options, such as the Hero. Instructions are the same in all scenarios.

    1. Author both the text that will be linked to, and the table of contents text that will be used to send the user to that part of the page.

    a. Example: on a page describing the three types of elections, there will be three anchor links. The author added the a Text component with the copy that will be linked to (a section on general elections), as well as the table of contents in another Text component.

    Sample text on page shows a list of topics, followed by each in more detail- a candidate for anchor links.,

    2. In the General Elections section, click the edit toolbar.

    3. Highlight the text that should be linked to (“General Elections” heading), then the anchor icon.

    4. Add the name of your anchor. It is recommended to use short, simple names or numbers (ex "1" or "anchor"). If there are many anchor links on a page, it is recommended to keep a log of their names.

    5. Click the checkmark. An anchor symbol now appears next to the linked text.

    6. Return to the table of contents section. Click the edit toolbar.

    7. Highlight the text that should link to the General Elections heading, then the link icon.

    8. In the Path field, add the “#” symbol, then the name of the anchor link.

    9. Click the checkmark.

    10. The text in the table of contents is now blue and underlined. When clicked, the user will jump down the page to the anchored text.

    The sample text from the image above now shows the "General Elections" topic as an anchor link.

    Accessibility

    1. There are no specific accessibility notes for anchor links.