A NSW Government website
NSW GovernmentNSW GovernmentEmail Toolkit

Link

An inline text link: bold, in the primary blue, underlined 4px below the text, with the legacy's 10% tint behind it on hover. Every value it draws comes from link in lib/link.ts; resolveLink validates the props, the link, its accessible name and its target among them.

Examples

Link

A text link on its own, after an arrow and before one.

12.7 KB built. Open the built email (opens in a new tab)

const href = 'https://email.designsystem.nsw.gov.au';

<NswLayout title='Link'>
  <NswColumns background='white'>
    <NswColumn>
      <NswSpacer height={16} />
      <NswText>
        <NswLink href={href}>Get started</NswLink>
      </NswText>
      <NswSpacer height={16} />
      <NswSpacer height={16} />
      <NswText>
        <span aria-hidden='true' style={{ fontWeight: 700 }}>
          &rarr;
        </span>{' '}
        <NswLink href={href}>Get started</NswLink>
      </NswText>
      <NswSpacer height={16} />
      <NswSpacer height={16} />
      <NswText>
        <NswLink href={href}>Get started</NswLink>{' '}
        <span aria-hidden='true' style={{ fontWeight: 700 }}>
          &rarr;
        </span>
      </NswText>
      <NswSpacer height={16} />
    </NswColumn>
  </NswColumns>
</NswLayout>

Props

Props of NswLink, read from the component
PropTypeDefaultDescription
titlestring—Advisory text shown on hover by the clients that show it. Not a substitute for descriptive link text: screen readers read it inconsistently.
relstring—The link's relationship to its page, written as rel (such as noopener noreferrer).
classNamestring—Class(es) added to the link's own, for a document's own stylesheet (a @media rule, a tracking hook).
refRef<HTMLAnchorElement>—The rendered <a>, for a tool that needs the element itself (an editor's selection).
defaultsTextDefaults—The email's text settings (<NswLayout text>), handed down by the layout to every text-bearing primitive beneath it; the block's own props win. The walk reaches the package's own primitives wherever they stand in the tree, in children and in props that hold elements, but it cannot see inside a component of your own: give such a component the same settings you gave the layout (text, checked by resolveTextDefaults) as a prop, and hand them to the primitives it renders. A link takes the email's link colour from it; its face is the text's it sits in, inline as it is.
hoverstringthe colour's (see color)The hover class drawn in place of the tint the link's colour takes, or '' for none; a callout hands its links its own tint through it. Default the colour's (see color).
href (required)string—Where the link goes: an https:, http:, mailto: or tel: address, a merge tag the sending platform fills in, or a #fragment. Required; any other scheme (javascript:, data:), a relative address, a web address without a full domain, or a blank one throws (see resolveHref).
aria-labelstring—The link's accessible name, when its text alone does not say where it goes (a "Read more" among several). Written as aria-label; an empty one throws.
target(typeof linkTargets)[number]—Where the link opens: _blank, _self, _parent or _top. Left out, the client decides — email clients open links in the browser themselves.
colorColorValueprimary-800The link colour: a theme colour name or a hex literal; 'transparent' and anything else throws. Its hover tint follows the colour drawn, named or as a hex: a colour family's 800 (grey-800) takes that 800 at 10%, white white at 10%, and another colour none. Default primary-800.
fontWeightnumber700The weight: a multiple of 100 from 100 to 900. Default 700.
fontStyle'normal' | 'italic'normalnormal or italic. Default normal.
letterSpacingnumber | 'normal'normalThe letter spacing: a number of pixels, like -0.5, or 'normal'. Default normal.
fontSizenumber—The font size in whole px. Left out, the link takes its text's size.
lineHeightnumber—The line height in whole px. Left out, the link takes its text's, which Windows Outlook honours only in px.