IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Link

/

Design

Navigate to a destination outside the current context.

Links are a common interactive element seen throughout our websites and web apps. Use them to take the user somewhere else.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Link documentation and examples.

Type

There are three types of links: default, article and implied.

Pay your bill anytime, or call our billing team with questions.

Default: Neutral underline. Inherits surrounding text color. It blends in while still having a distinct underline affordance.

State

Links exist in a normal, hovered or active state.

Share this video with a message.

Usage

Inheriting Text Color

Default and implied links inherit their text color from the context in which they’re placed (e.g., paragraph, list item). To ensure your link complies with Uniform guidelines, use one of our type elements.

Links vs. Buttons

Links should send the user outside of the current context. To keep the user in the same context, use a button instead.

If you’re worried about the visual weight of a button, try the minimal style.

Don't use a link to initiate an in-page action.

Don'tuse a link to initiate an in-page action.

Do use a link to take the user to another page.

Douse a link to take the user to another page.

One exception: Buttons may replace links in landing pages and in-app promotions where the primary call-to-action will take the user elsewhere (e.g., promoting a trial sign-up in the mobile app).

Just remember to limit the number of links and actions on a single page, especially primary buttons.

Don't force yourself to use one massive link for a primary CTA.

Don'tforce yourself to use one massive link for a primary CTA.

Do use a button in exceptional cases to take the user to a new flow.

Douse a button in exceptional cases to take the user to a new flow.

Implied Type

If one screen features dozens of links, try the implied style.

Don't overwhelm the user with default or article links.

Don'toverwhelm the user with default or article links.

Do use the implied type when natural exploration reveals interactivity.

Douse the implied type when natural exploration reveals interactivity.

External Links

Use the UiNewWindow icon after any link to an external (non-Hudl) website.

Don't display the new window icon next to internal links.

Don'tdisplay the new window icon next to internal links.

Do show the new window icon after any external link.

Doshow the new window icon after any external link.

Microcopy

Pay special attention to the words you wrap. The following guidelines can help.

Avoid “Click Here”

There are better words to link. Think of the children!

Don't cut corners by adding “click here” to your phrase.

Don'tcut corners by adding “click here” to your phrase.

Do wrap your link around a verb and its object—ideally both.

Dowrap your link around a verb and its object—ideally both.

Link Phrases, Not Sentences

Links need not overpower the text.

Don't link entire sentences.

Don'tlink entire sentences.

Do draw attention to the area where a user can take action.

Dodraw attention to the area where a user can take action.

Send Users Somewhere Else

Ideally, your link text should describe or allude to a new destination.

Don't use links to keep users in the current context.

Don'tuse links to keep users in the current context.

Do focus your link text on that destination.

Dofocus your link text on that destination.

Balance the Findability

If your link text is short, but the surrounding context is noisy, reconsider the style or rewrite the link to make it more noticeable.

Don't bury a link in a sea of microcopy (e.g., linking one small word).

Don'tbury a link in a sea of microcopy (e.g., linking one small word).

Do ensure the link stands out.

Doensure the link stands out.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconConfirmation PassIconWarning Warning
  • IconWarningCSS outline property is used unexpectedly. (Stylelint)

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Avoid the use of Links except for actions and destinations that launch Safari to take you out of the Hudl app.
Android
  • Avoid the use of Links except for actions and destinations that launch Chrome to take you out of the Hudl app.