Anchor component
Inserts a tiny piece of code that allows you to link to a specific location within a web page.
Component(s) you might want to use with this one:
- Anchor navigation
- WYSIWYG
- Any component that sets a hyperlink or call to action (Button, Card, Hero)
Guidelines
An anchor is a tiny piece of code that is appended to a hyperlink. The anchor allows you to link to a specific location on the page instead of the top. If a web page URL is like an apartment building address, then the anchor is like your apartment number – a specific location within that address.
Anchor links have 2 parts:
- the anchor id
- the link that points to the anchor
Part I – add the anchor
- Drag the anchor component to the spot on your page.
- Give it a simple url-friendly name (lower-case, no spaces). This is the anchor id.
Part II – add the hyperlink
To link to an anchor on the same page:
- Enter # followed by the anchor id in any hyperlink field, e.g.: #support
Linking to an Anchor from the WYSIWYG component
Linking to an Anchor from the Button component
To link to an anchor from a different page
- In any hyperlink field, use the relative path of the destination page followed by .html#[anchor id]
The page will link to the #support anchor id on ../web/design/component-documentation-2021/anchor.html
Dos (optional section)
- When your link is set, test it. You may have to activate the page to ensure your anchor functions properly.
- Hyperlinks make a promise to your user; ensure the context of your content is clear so that someone landing at that anchor (perhaps mid-page) clearly understands where they are.
Don'ts (optional section)
- Don't use same-page anchors on relatively short pages that are simple to navigate.
- In general, avoid linking to an Anchor on another page because the change in context may confuse the visitor.
Need support?
The Web team is here to help.