Link

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.

<a class="bux-link" href="#">
  <span class="bux-link__text">inline link</span>
</a>

<a
    class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}"
    href="{{ link_url }}"
    {% for attribute in attributes %}
        {{attribute.label}}="{{attribute.value}}"
    {% endfor %}
    {% if isExternal %}
        target="_blank"
    {% endif %}
><span class="bux-link__text">{{ link_text }}</span></a>

Inline Link — Alternate

Here is an example of an inline link within a paragraph on a light non-white background.

<a class="bux-link bux-link--alt" href="#">
  <span class="bux-link__text">inline link</span>
</a>

<a
    class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}"
    href="{{ link_url }}"
    {% for attribute in attributes %}
        {{attribute.label}}="{{attribute.value}}"
    {% endfor %}
    {% if isExternal %}
        target="_blank"
    {% endif %}
><span class="bux-link__text">{{ link_text }}</span></a>

Inline Link — Reverse

Here is an example of an inline link within a paragraph on a dark background.

<a class="bux-link bux-link--reverse" href="#">
  <span class="bux-link__text">inline link</span>
</a>

<a
    class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}"
    href="{{ link_url }}"
    {% for attribute in attributes %}
        {{attribute.label}}="{{attribute.value}}"
    {% endfor %}
    {% if isExternal %}
        target="_blank"
    {% endif %}
><span class="bux-link__text">{{ link_text }}</span></a>

Inline Link — Scarlet

Here is an example of an inline link within a paragraph on a scarlet background.

<a class="bux-link bux-link--scarlet" href="#">
  <span class="bux-link__text">inline link</span>
</a>

<a
    class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}"
    href="{{ link_url }}"
    {% for attribute in attributes %}
        {{attribute.label}}="{{attribute.value}}"
    {% endfor %}
    {% if isExternal %}
        target="_blank"
    {% endif %}
><span class="bux-link__text">{{ link_text }}</span></a>

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.

Go to Page 1

<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).

<a class="bux-link bux-link--before" href="#">
  <span class="bux-link__text">Title of Download (Spanish, PDF, 1.2MB)</span>
</a>

<a
    class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}"
    href="{{ link_url }}"
    {% for attribute in attributes %}
        {{attribute.label}}="{{attribute.value}}"
    {% endfor %}
    {% if isExternal %}
        target="_blank"
    {% endif %}
><span class="bux-link__text">{{ link_text }}</span></a>

Icon After Link

This is an External Link.

<a class="bux-link bux-link--after" href="#">
  <span class="bux-link__text">External Link</span>
</a>

<a
    class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}"
    href="{{ link_url }}"
    {% for attribute in attributes %}
        {{attribute.label}}="{{attribute.value}}"
    {% endfor %}
    {% if isExternal %}
        target="_blank"
    {% endif %}
><span class="bux-link__text">{{ link_text }}</span></a>

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.

References

• BUX Design Principle: Design Elements