Button & Link Styles

Link Hierarchy

The UT web design system offers a hierarchy of link styles so you can choose the right one for each context and level of emphasis. We like to describe these styles in terms of volume—quiet, medium, and loud!

Quiet

Text Links
This is the subtlest link style. Text links are for optional, supplementary actions a user might take, such as finding more information on a subject. Use text links within running copy to help users browse related topics (see what we did there?).

To employ this link style, simply highlight the text that you wish to link, and use the paragraph editor popup to add a URL to the selected text.

As you can see, we are getting very clever with our examples

Medium

Single Link
When a link should stand apart from running text but doesn’t need to stand out too much, you can call on the single link. Use this link style for actions that are important but shouldn’t distract from other on-page elements, like promoting a new informational path at the end of a paragraph. There’s a small orange arrow to the left of the single link that moves slightly on hover. Limit link text to 30 characters or fewer to keep it looking “clickable.”

This link style is a custom WordPress block.

Link Group
The link group pattern collects links in either two or three responsive columns, and provides a means of grouping similar but distinct links. Users should be able to scan the link group text quickly and choose their next move with confidence. As with single links, there are small orange arrows to the left of each link that move slightly on hover, and each link includes a bottom border to keep things separated.

The link group is a WDS pattern, and you can find more information about it on its component page.

Loud

The CTA link style is a custom WordPress block.

Button
Use buttons for the final step of direct actions or tasks the user can take, such as submitting a form, or as a control to let them change the state of the content on their screen (e.g., opening a modal). Keep button text short and “clickable,” 20 characters or fewer.

The button link style is a custom WordPress block.


Writing Good Links: Best Practices

Keep It Short

Studies show that website users read only about the first 11 characters of links and headlines when they scan a page. Front-load your link text so that the first part is the most important, and keep the text brief and to the point.

Be Descriptive

Use clear, descriptive link text to sets appropriate user expectations for what will happen when they choose to follow the link. Generic link text like “click here” or “learn more” are unhelpfully vague for all users and is an accessibility problem for users who navigate with a screen reader.

Tell Them What to Expect

Consequently, make sure the destination page or place for the link is a close match for what the link text is promising. If the connection is vague, users can feel confused or like they’re in the wrong place. It’s also a good idea to provide a warning if the link destination requires a login, is in a different file format (e.g. a pdf or other document), or is a different/external website.