Skip to content

Latest commit

 

History

History
156 lines (120 loc) · 7.15 KB

links.md

File metadata and controls

156 lines (120 loc) · 7.15 KB
layout title description group aliases toc
docs
Links
Use OUDS Web's custom link styles for navigational elements, enabling users to move between pages, sections, or external resources.
components
/docs/components/links/
true

{{< callout info >}} You can find here the OUDS Link design guidelines. {{< /callout >}}

Standard variant

Use OUDS Web .link class to set up styles such as padding and content alignment to display standalone links. Standalone links should not be used inline within a sentence or a paragraph. In that case, use only a <a> tag as described in the [reboot page]({{< docsref "/content/reboot/#links" >}}).

By default, .link defines focus, hover and active styles similar to the <a> tag.

{{< example >}} This is an example of link {{< /example >}}

:visited standalone links don't have any specific styling.

Variants on colored background

OUDS Web offers a few variations to use on [colored backgrounds]({{< docsref "/utilities/background#colored-background" >}}). Their accessibility (readability) is ensured by suitable semi-opaque backgrounds.

{{< callout warning >}} Heads up! Background utilities used to make colored backgrounds, should always be used with the appropriate color theme (see an example below). Please refer to [colored backgrounds documentation]({{< docsref "/utilities/background/#colored-backgrounds" >}}). {{< /callout >}}

{{< example class="p-none">}}

{{< /example >}}

Link chevron

Add .link-chevron to enhance your link with a chevron on the right side. Use the additional .back class to display the chevron on the left side.

{{< example >}}

{{< /example >}}

Icon link

{{< callout info >}} The recommended way of using an icon in a button is through an [SVG sprite file]({{< docsref "/extend/icons/#svg-sprite" >}}). You need to fill it using currentColor to respect the link color scheme (can be set directly inside the SVG sprite). {{< /callout >}}

The .icon-link class modifies the default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default gap value. We style the underline with a custom offset and color. Icons are automatically sized to 1em to best match their associated text's font-size.

If really needed, you can use a font icon associated to the .icon class to set correct parameters for the font-size and line-height.

{{< callout >}} When icons are purely decorative, they should be hidden from assistive technologies using aria-hidden="true", as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding role="img" and an appropriate aria-label="..." to the SVGs, or a .visually-hidden text for a font icon. {{< /callout >}}

Take a regular <a> element, add .icon-link, and insert an icon on the left of your link text. The icon is automatically sized, placed, and colored.

{{< example >}}

{{< /example >}}

{{< bootstrap-compatibility >}} {{< example >}} This is an example of link with icon {{< /example >}} {{< /bootstrap-compatibility >}}

Sizes

Links are available in two sizes. Add .link-sm for small size.

{{< example >}}

{{< /example >}}

Link tags

The .link classes are designed to be used with the <a> element. However, you can also use these classes on <button> elements.

{{< example >}}

Button link
Button link chevron
Small button link icon
{{< /example >}}

Disabled state

Make links look inactive by adding the aria-disabled="true" attribute to any <a> element. Disabled links have pointer-events: none applied to, preventing hover and active states from triggering.

Disabled links using <a> should not include the href attribute. In case you need to keep the href, please refer to disabled link accessibility warning.

{{< example >}}

This is an example of a disabled link
This is an example of a disabled link with chevron
This is an example of a link with an icon
{{< /example >}}

Disabled link accessibility warning

To cover cases where you have to keep the href attribute on a disabled link, the style on [aria-disabled="true"] uses pointer-events: none to try to disable the link functionality of <a>s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to aria-disabled="true", also include a tabindex="-1" attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.

{{< example >}} Disabled link {{< /example >}}