Anchor
Introduction
The Anchor component is a styled hyperlink wrapper (<a>) used for smooth internal site routing and safe external web navigation. It automatically manages accessibility security standards (such as appending target safety tags for external links) and coordinates color pallets.
This component is fully integrated as a link block inside the Page Builder, allowing content writers and CMS administrators to construct, arrange, and style text links, icon links, or call-to-actions directly.
Usage
These configurations represent exactly how page-builder block items are constructed.
1. Simple Navigation Link (Underline Variant)
A standard textual hyperlink featuring the default underline indicator style. Ideal for inline copy links, footers, and generic secondary navigation lists.
{
"blockType": "link",
"href": "/docs",
"variant": "underline",
"colorPalette": "blue",
"children": [
{
"blockType": "text",
"content": "Go to Documentation"
}
]
}
2. Unstyled Plain Action Link
Renders a link with default text coloring and removes the standard underline style, preserving layout styling for custom menus, header items, or sidebars.
{
"blockType": "link",
"href": "/blog",
"variant": "plain",
"colorPalette": "slate",
"children": [
{
"blockType": "text",
"content": "Read our Blog"
}
]
}
3. Safe External Tab Link (Purple Accent)
Safely opens external websites in a new browser tab. The underlying engine automatically injects mandatory security attributes to protect the user's browser scope.
{
"blockType": "link",
"href": "https://github.com",
"target": "_blank",
"colorPalette": "purple",
"children": [
{
"blockType": "text",
"content": "Open GitHub Profile ↗"
}
]
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Link Destination (href) | string | - | The target path, localised route, or fully qualified external URL. |
Link Target (target) | select | - | Target window selection. Use "_blank" to launch the link destination inside a new browser tab. |
Visual Variant (variant) | select | "underline" | Controls text styling. • "underline" — Bold text with a color-matched animated bottom border. • "plain" — Inherits parent text layout styling with no default underline. |
Color Theme (colorPalette) | select | "blue" | Visual theme applied to text coloring and hover outlines. • Options: blue, green, red, purple, orange, amber, cyan, slate. |
Child Content (children) | list | - | Nested page blocks rendering inside the anchor. Can contain text leaves, icons, or custom sub-blocks. |
Developer Notes & Accessibility
- Safe Target Handling: When navigating with
target="_blank", the component automatically appendsrel="noopener noreferrer". This guarantees absolute security against malicious redirection scripts executing in parent window scopes (window.opener). - Interactive Router Links: Under the hood, if
asChildis enabled, the anchor styles and safe-target properties are automatically merged directly onto custom router components (e.g., framework<Link>structures) without rendering unnecessary nesting<a>wrapper divs. - Keyboard Access: Because this renders as a native HTML link, full tab-key navigation, hover outlines, and enter-key trigger clicks operate natively across all clients without additional client-side JS.