Links

The Link component allows you to customize anchor elements with theme colors and typography styles.

To ensure links carry the Unifi theme, use the Link component in the React user interface as opposed to <a>. The link will then use the primary color and inherit the theme font. If using a plain <a> outside a paragraph context, you may need to add additional CSS to allow it to gain desired styling such as color and underline.

Accessibility

• When providing the content for the link, avoid generic descriptions like "click here" or "go to". Instead, use specific descriptions.
• For the best user experience links should stand out from the text on the page.
• If a link doesn't have a meaningful href, it should be rendered using the Button component.

Standard Link

<Link href="#" underline="always">
  Public Service Loan Forgiveness
</Link>

Inline Links

Unifi theme will apply a standardized blue - #397a9c - and enforce an underline for inline-links detected within the Typography variant of paragraph.

Also, inline links will become a standardized purple - #8963af - when the browser designates them as :visited, and will have their underline removed on hover to accessibly indicate state.

<Typography paragraph>
  Read more about <Link href="#">Public Service Loan Forgiveness</Link> requirements and access the
  Employment Certification Form (ECF).
</Typography>

Note: You may need to apply the inline style inheritance to other elements selectively, such as content within td. This is not done globally to prevent greedy application. For this, you can use the following within createStyles()

const colorHref = '#397a9c';
const colorHrefVisited = '#8963af';

const linkStates = {
  '& a': {
    color: colorHref,
    textDecoration: 'underline',
  },
  '& a:hover': {
    textDecoration: 'none',
  },
  '& a:visited': {
    color: colorHrefVisited,
    textDecoration: 'none',
  },
};

// createStyles()
fooClass: {
  ...linkStates
}

Typography Variants

Links can make use of Typography variants since Typography is the base component.

<Link href="#" variant="h4" underline="always">
  Typography variant h4
</Link>