Edit Link

Name

Also known as (comma separated)

Brief definition Navigational reference.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Link text", "default": "Read the documentation" }, { "id": "href", "type": "text", "label": "Destination", "default": "https://example.com/docs" }, { "id": "external", "type": "toggle", "label": "Opens in new tab", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<a class=\"link\" href=\"{{href}}\" style=\"--accent:{{accent}};\" {{#if external}}target=\"_blank\" rel=\"noopener noreferrer\"{{/if}}>\n {{label}}{{#if external}}<span class=\"link__icon\" aria-hidden=\"true\">&#8599;</span><span class=\"link__sr\"> (opens in a new tab)</span>{{/if}}\n</a>\n<style>\n.link { font: 14px system-ui, sans-serif; color: #241430; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }\n.link:hover { color: var(--accent); }\n.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.link__icon { margin-left: 3px; font-size: 12px; text-decoration: none; }\n.link__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }\n</style>", "tailwind": "<a class=\"link-tw font-sans text-sm text-[#241430] underline underline-offset-2 decoration-2 hover:text-[color:var(--accent)]\" href=\"{{href}}\" style=\"--accent:{{accent}}; text-decoration-color: {{accent}};\" {{#if external}}target=\"_blank\" rel=\"noopener noreferrer\"{{/if}}>\n {{label}}{{#if external}}<span class=\"ml-0.5 text-xs no-underline\" aria-hidden=\"true\">&#8599;</span><span class=\"absolute w-px h-px overflow-hidden [clip:rect(0,0,0,0)] whitespace-nowrap\"> (opens in a new tab)</span>{{/if}}\n</a>\n<style>\n.link-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n</style>", "react": "export function Link({\n label = \"{{label}}\",\n href = \"{{href}}\",\n external = {{external}},\n accent = \"{{accent}}\",\n}) {\n return (\n <a\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noopener noreferrer\" : undefined}\n style={{ fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", textDecoration: \"underline\", textDecorationColor: accent, textDecorationThickness: 2, textUnderlineOffset: 2 }}\n >\n {label}\n {external && (\n <>\n <span aria-hidden=\"true\" style={{ marginLeft: 3, fontSize: 12, textDecoration: \"none\" }}>&#8599;</span>\n <span style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\", clip: \"rect(0,0,0,0)\", whiteSpace: \"nowrap\" }}> (opens in a new tab)</span>\n </>\n )}\n </a>\n );\n}" }