Hudl Design System

Last Modified:May 26, 2017

Links

Uniform-UI provides these text link styles, which should account for the vast majority of needs within our interfaces. Uniform defines the design philosophy and usage guidelines for links.

Difference between links and buttons

If you look across our product, you’ll find a lot of anchors functioning as buttons (<a href="#">) and buttons functioning as links (<button>We'll use javascript to take us to another page</button>). Both of these should be avoided. Rather than leveraging javascript to attach behavior or desired results, we should strive to use the semantically correct elements built for the task at hand. Using HTML correctly is an excellent starting point when building an interface, resulting in less code, easier maintenance and better understanding for others diving into our code bases. Additionally, should a user rely on the aid of assitive technology, the screen reader will announce where the link takes them, rather simply announcing that they’ve navigated to a button, with no clarity around the fact that links somehwere.

A Link should take users somewhere else, whether that’s another section of the same page, another page or to an external site. We use a link to link our users to another location.

A Button keeps users within the same context, but provides a new mode of interaction, whether it’s a menu of options, a modal or otherwise.

Default will be the most often used link within your interfaces.

This is text, and this is a default link.

This is text, and this is a default link

Uniform-UI-Component

Documentation →

<Text level="default"> This is text
  <Link type="default"> and this is a default link </Link>
</Text>

# Article Link

Article links are used for linking text within a larger, more long-form block of text (such as an article or a set of instructions).

Capture and bring value to every moment in sports.

<!-- Comment goes here -->
<p class="uni-text--large">Capture and bring value <a class="uni-link--article" href="/">to every moment</a> in sports.</p>


Uniform-UI-Component

Documentation →

<Text level="large"> Capture and bring value
  <Link type="article"> to every moment in sports </Link>
</Text>
Implied links forgo the affordances of Default and Article and are used in those instances where it's contextually apparent a user can click on a piece of type. Examples would be names within a feed card, athlete name, team name, etc.

This is an implied link

Uniform-UI-Component

Documentation →

<Headline level="2">
  <Link type="implied"> This is an implied link </Link>
</Headline>
The wrapper link is used to wrap chunks of content, such as avatars, where the entire component points to one URL.

… Stuff goes in here

… Stuff goes in here

Uniform-UI-Component

Documentation →

<Link type="wrapper" displayType="inline-block">
  <AvatarUser size="xlarge" initials="gs"/>
</Link>

# Link Mixins

Used to create standard links.

@include link($variant: default, $bespoke: null);

Settings

Parameter Type Default Value Description
$variant list-map value default Pass one of three values [ article, default, implied ]
$bespoke --- null The enables you to create links outside the system.