Link
Component status:Ready
Links connect a user to a different page or further information.
Links are navigational components that direct visitors to other webpages, either internal pages or external websites.
An Inline Link appears within a paragraph. A Text Link has more visual emphasis than an Inline Link and is outside of a paragraph.
Examples
Inline Link
Here is an example of an inline link within a paragraph.
<div class="bux-link-example">
<p>Here is an example of an <a class="bux-link" href="#">inline link</a> within a paragraph.</p>
</div>
<div class="bux-link-example{% if modifier %} bux-link-example--{{ modifier }}{% endif %}">
<p>This is an <a class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}" href="{{ link_url }}" {% for attribute in attributes %} {{attribute.label}}="{{attribute.value}}" {% endfor %}>{{ link_text }}</a>.</p>
</div>
Inline Link — Alternate
Here is an example of an inline link within a paragraph on a light non-white background.
<div class="bux-link-example bux-link-example--alt">
<p>Here is an example of an<a class="bux-link bux-link--alt" href="#">inline link</a> within a paragraph on a light non-white background..</p>
</div>
<div class="bux-link-example{% if modifier %} bux-link-example--{{ modifier }}{% endif %}">
<p>This is an <a class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}" href="{{ link_url }}" {% for attribute in attributes %} {{attribute.label}}="{{attribute.value}}" {% endfor %}>{{ link_text }}</a>.</p>
</div>
Inline Link — Reverse
Here is an example of an inline link within a paragraph on a dark background.
<div class="bux-link-example bux-link-example--reverse">
<p>Here is an example of an <a class="bux-link bux-link--reverse" href="#">inline link</a> within a paragraph on a dark background..</p>
</div>
<div class="bux-link-example{% if modifier %} bux-link-example--{{ modifier }}{% endif %}">
<p>This is an <a class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}" href="{{ link_url }}" {% for attribute in attributes %} {{attribute.label}}="{{attribute.value}}" {% endfor %}>{{ link_text }}</a>.</p>
</div>
Inline Link — Scarlet
Here is an example of an inline link within a paragraph on a scarlet background.
<div class="bux-link-example bux-link-example--scarlet">
<p>Here is an example of an <a class="bux-link bux-link--scarlet" href="#">inline link</a> within a paragraph on a scarlet background.</p>
</div>
<div class="bux-link-example{% if modifier %} bux-link-example--{{ modifier }}{% endif %}">
<p>This is an <a class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}" href="{{ link_url }}" {% for attribute in attributes %} {{attribute.label}}="{{attribute.value}}" {% endfor %}>{{ link_text }}</a>.</p>
</div>
Text Link
Text links are used on their own directly following content, within Cards, or in Link Lists. They must not be used within sentences or paragraphs.
<a class="bux-text-link" href="#">Go to Page 1</a>
<a class="bux-text-link" href="{{ text_link_url }}">{{ text_link_text }}</a>
Icon Before Link
This is an Title of Download (Spanish, PDF, 1.2MB).
<div class="bux-link-example bux-link-example--before">
<p>This is a <a class="bux-link bux-link--before" href="#">Title of Download (Spanish, PDF, 1.2MB)</a>.</p>
</div>
<div class="bux-link-example{% if modifier %} bux-link-example--{{ modifier }}{% endif %}">
<p>This is an <a class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}" href="{{ link_url }}" {% for attribute in attributes %} {{attribute.label}}="{{attribute.value}}" {% endfor %}>{{ link_text }}</a>.</p>
</div>
Icon After Link
This is an External Link.
<div class="bux-link-example bux-link-example--after">
<p>This is an <a class="bux-link bux-link--after" href="#">External Link</a>.</p>
</div>
<div class="bux-link-example{% if modifier %} bux-link-example--{{ modifier }}{% endif %}">
<p>This is an <a class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}" href="{{ link_url }}" {% for attribute in attributes %} {{attribute.label}}="{{attribute.value}}" {% endfor %}>{{ link_text }}</a>.</p>
</div>
Usage
Dos
- Use an Inline Link within a paragraph
- Use a Text Link following another component (typically following a paragraph)
- Use unique, action-oriented link text
Don’ts
- Don’t stack many Text Links; if three or more links are needed, consider using a Link List
- Don’t use “Click here...” within the link text
Accessibility
- Your link should always describe where it will take users. Users tend to scan text online, and elements that stand out (like links) grab attention. Clear links can help users navigate more quickly.
- For example, instead of "Learn more," use "Learn how to reset your passphrase."
- Never use a link to say, “click here.” A nondescript link forces users to backtrack and read the surrounding text for more context. This is even more problematic for those who rely on screen readers, which can list links for quicker navigation. A list of “click here” links isn’t helpful for anyone.
- Links must have at least 4.5:1 contrast with the background (3:1 for large text) to meet WCAG 2 Level AA
- Text Links must never appear in paragraphs, sentences or phrases. They are the same color as default text and they do not have an underline, making them harder to recognize as links.