Link
The Link component implements the Typography component, but requires an href and will always render an <a> tag.
Examples
Basic link
Ideal for using with either a plain href or a third-party routing library via the as prop.
import { Link } from '@curology/ui-components-web/react/Link';
<Link href="./">A link</Link>
With multiple sizes
Each size of text can be used with the Link.
A D1 linkage
A D2 linkage
An H1 linkage
An H2 linkage
An H3 linkage
A subhead linkage
A body linkage
A large body linkage
A meta linkage
A CTA body linkage
import { Link } from '@curology/ui-components-web/react/Link';
<Link
href="./"
size="{d1|d2|h1|h2|h3|subhead|body|body-lg|meta|cta}"
>A link</Link>
With a router library
import { Link } from '@curology/ui-components-web/react';
import { Link: RouterLink } from 'react-router-dom';
<Link as={RouterLink} to="./">A router link</Link>;
Props
LinkProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <a /> | ||||
italic | false | true | false | No | Display the text with emphasis? |
size | "body" | "h1" | "h2" | "h3" | "meta" | "inherit" | "d1" | "d2" | "subhead" | "body-lg" | "cta" | 'inherit' | No | How large should the text be? This also affects the font-face for display text. |
weight | "md" | "light" | "100" | "300" | "400" | "500" | "700" | "800" | "900" | "thin" | "normal" | "bold" | "extrabold" | "black" | 'normal' | No | How heavy should the text be? |