Examples

<div class="vega-link v-font-p2-short">
    <div class="v-mb-size-8 v-text-primary">
        Default: <a href="#">Text of Link</a>
    </div>
    <div class="v-mb-size-8  v-text-primary">
        Underline: <a href="#" class="v-underline">Text of Link</a>
    </div>
    <div class="v-mb-size-8  v-text-primary">
        Bold Text: <a href="#" class="v-underline v-font-h5">Text of Link</a>
    </div>
</div>

Usage

The vega-link component exists as a simple class that can be added to an HTML <a> tag or its parent (such as a <div>). The purpose of using the vega-link class is to ensure that a consistent color is applied to elements across the design system. For this reason there are no properties or attributes associated with this component. The style of the text being used can be handled separately through CSS. In our system, we prefer the use of Tailwind CSS. For example, to underline a link, simply use the Tailwind class v-underline along with the vega-link class.

For more details, view in Storybook.

Accessibility

• Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
• Ensures every id attribute value is unique.
• Ensure that links with the same accessible name serve a similar purpose.
• Ensures links have discernible text.

Best Practices

Links are best used for inline text. For usability purposes, we use the standard blue underlined link, as it is the most commonly used and recognizable pattern for links. While some users have a hard time perceiving color, the underlining of links will help them identify clickable links. Also recommended for links is using a clear hover effect, but not in place of underlining them.

When linking text, it is wise to consider the following:

• Link meaningful text, and not just the words “click here.”
• Avoid using blue text along with links, as it will confuse users and make them think that all of the text is clickable.
• Be sure that links are obvious.