Link
Text that takes you somewhere: another page, a setting, a site outside Ascern. Brand green and always underlined, so it reads as a link without colour alone.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { Link } from '@/ui/link';<Link href="#connections"> Manage the blocklist in Connections</Link>Inline
Inside prose and settings descriptions. The link is weight 500 on 400 text, brand green, with the underline 2px below the baseline.
Ascern reads mail from people you work with. Manage the blocklist in Connections
import { Link } from '@/ui/link';
export default function LinkInline() {
return (
<p className="max-w-sm text-body leading-body text-text">
Ascern reads mail from people you work with. <Link href="#connections">Manage the blocklist in Connections</Link>
</p>
);
}External
external leaves Ascern in a new tab. A 12px arrow follows the text, and a screen reader hears "opens in a new tab".
import { Link } from '@/ui/link';
export default function LinkExternal() {
return (
<p className="text-body leading-body text-text">
<Link href="https://halcyonbank.com/careers" external>
Halcyon Bank careers page
</Link>
</p>
);
}Subtle
variant="subtle" takes the subtle text colour for quiet links, such as a footnote or a breadcrumb. It stays underlined.
Fees are shown before VAT. How fees are worked out
import { Link } from '@/ui/link';
export default function LinkSubtle() {
return (
<p className="max-w-sm text-body-small leading-body-small text-text-subtle">
Fees are shown before VAT. <Link href="#fees" variant="subtle">How fees are worked out</Link>
</p>
);
}States
Hover, press and Tab to it. Hover darkens the green and thickens the underline to 2px over 160ms. Pressed keeps the darker green on a 1px underline, with no scale. Keyboard focus draws the 2px brand ring with a 2px gap and a 4px radius. There is no disabled link.
import { Link } from '@/ui/link';
export default function LinkStates() {
return (
<p className="text-body leading-body text-text">
<Link href="#cvs-sent">View all CVs sent</Link>
</p>
);
}