Anchor Links

Anchors can be added to almost any text content in Govstack. This includes text, text/image, banner, call to action, and many other components, as well as their intro sections.

Do not place anchors in the text inside accordions. If you want to link to accordion content use the anchored accordion option outlined below.

To add an anchor to a text area follow these steps:

1. In the back office navigate to the text area you want to link to
2. Place your cursor in the text where you would like to add your anchor
3. Select the 'Anchor' tool on the text editor tool bar
   
4. Enter your anchor name in the dialogue box. Anchor names should be as simple as possible. Use lower case letters, numbers, and dashes (-) only. Copy your anchor to your system clipboard or note it somewhere. You'll need it to create the link later
5. Select 'Submit' to complete the process

Your anchor will be marked with a bookmark icon in your content. If you select this icon and click the 'Anchor' tool again you'll be able to edit your anchor name.

Pro tip

The link destinations for text anchors are often slightly offset. When you test your anchor, you may find you need to move it up or down in the text block to adjust where the link lands.

You can target components directly with anchors, creating links that land you at the top of a specific piece of content.

If you have the option, targeting components with anchors is preferred to adding anchors to text. Component-based anchors will be far more accurate.

To add an anchor to a component follow these steps:

1. In the back office navigate to the component you want to link to
2. Open the target component's settings and select the 'Advanced' tab
3. Enter your anchor name in the 'Anchor name' field. Keep anchor names simple. Use lower case letters, numbers, and dashes (-) only. Copy your anchor to your system clipboard or note it somewhere. You'll need it to create the link later
4. Select 'Submit' to complete the process

Pro tip

Some components, like many of the sub-components found inside pods and split components, don't have the option to include an anchor. In most cases, you can set an anchor on the parent component instead.

Anchored Accordions allow you to use anchors to jump to and open an accordion. However, you won't need to create the anchor directly. Instead, the anchor is automatically generated based on the 'Heading' field of the target accordion.

To determine the anchor name for the targeted accordion, use one of these options:

• If the page with the target accordion has been published, you can click the accordion on the live website. The target anchor will automatically be added to the page URL in the browser address bar. Copy the section of the link following the '#'
• If the page has not been published, you can determine the anchor by removing all the spaces from the accordion's heading. For example if the accordion's heading is "Example Accordion 1" the anchor would be #ExampleAccordion1

Copy this anchor to your system clipboard or note it somewhere. You'll need it to create the link later.