Skip to content
JSON Resume Styleguide
GitHub

Typography

Link

Brand-red underlined links for running text; neutral links for navigation lists and footers.

import { Link } from '@jsonresume/ui'Source(opens in a new tab)

Playground

Change the props and copy the result.

Read the schema
jsx
<Link tone="brand">Read the schema</Link>

Examples

Tones and external links

Read the schema before you start.

Browse themes

JSON Resume on GitHub(opens in a new tab)

link/tones.tsx
import { Link, Stack, Text } from '@jsonresume/ui';

export default function LinkTones() {
  return (
    <Stack gap={3}>
      <Text>
        Read the <Link href="https://jsonresume.org/schema">schema</Link> before
        you start.
      </Text>
      <Text>
        <Link tone="neutral" href="https://jsonresume.org/themes">
          Browse themes
        </Link>
      </Text>
      <Text>
        <Link href="https://github.com/jsonresume" external>
          JSON Resume on GitHub
        </Link>
      </Text>
    </Stack>
  );
}

Usage

Do

  • Link the words that describe the destination.
  • Use asChild to style a Next.js <Link>.

Don’t

  • Write "click here".
  • Remove the underline from links inside paragraphs.

Accessibility

  • Links in text are underlined, so color is not the only cue.
  • external adds "(opens in a new tab)" for screen readers and a visible icon.

Props

<Link>

Also accepts the attributes of the element Link renders.
PropTypeDefaultDescription
asChildbooleanfalseStyle a router link (e.g. Next.js Link) passed as the only child.
externalbooleanfalseMarks the link as leaving the site: opens a new tab and adds an icon.
tonebrandneutralbrandStyle variant.