Links

Links are lightly styled via the a element by default. In addition, we provide .s-link and its variations. In rare situations, .s-link can be applied to a button while maintaining the look of an anchor.

Links

Link classes

Class	Description	Modifies
`.s-link`	Base link style that is used almost universally.	N/A
`.s-link__grayscale`	A link style modification with our default text color.	`.s-link`
`.s-link__muted`	Applies a visually muted style to the base style.	`.s-link`
`.s-link__danger`	Applies an important, destructive red to the base style.	`.s-link`
`.s-link__inherit`	Applies the parent element's text color.	`.s-link`
`.s-link__underlined`	Adds an underline to the link's text.	`.s-link`
`.s-link__dropdown`	Applies a caret for dropdowns and additional interactivity.	`.s-link`

Single link examples

<a class="s-link" href="#">Default</a>
<a class="s-link s-link__grayscale" href="#">Grayscale</a>
<a class="s-link s-link__muted" href="#">Muted</a>
<a class="s-link s-link__danger" href="#">Danger</a>
<a class="s-link s-link__inherit" href="#">Inherit</a>
<a class="s-link s-link__underlined" href="#">Underlined</a>
<button class="s-link">Button Link</button>
<a class="s-link s-link__dropdown" href="#">Links</a>

Default Grayscale Muted Danger Inherit Underlined Links

Accessibility

Any link with adjacent static text cannot use color alone to differentiate it as a link. If a link is next to static text and the only visual indication that it’s a link is the color of the text, it will require an underline in addition to the color. Reference WCAG SC 1.4.1 for more details.

Anchors

Anchor classes

Class	Description	Modifies
`.s-anchors`	A consistent link style is applied to all descendent anchors.	N/A
`.s-anchors__default`	All descendent links receive s-link's default styling.	`.s-anchors`
`.s-anchors__grayscale`	Applies gray styling to all descendent links.	`.s-anchors`
`.s-anchors__muted`	Applies a visually muted style to all descendent links.	`.s-anchors`
`.s-anchors__danger`	Applies an important, destructive red to all descendent links.	`.s-anchors`
`.s-anchors__underlined`	Applies an underline to all descendent links.	`.s-anchors`
`.s-anchors__inherit`	Applies the parent element's text color to all descendent links.	`.s-anchors`

Anchor examples

Sometimes you need to give all <a> elements inside a container or component the same color, even when it’s impractical or even impossible to give each anchor element an s-link class (e.g. because the markup is generated from Markdown).

In this case, you can add the s-anchors class together with one of the modifiers s-anchors__default, s-anchors__grayscale, s-anchors__muted, s-anchors__danger, or s-anchors__inherit to the container.

<div class="s-anchors">…</div>
<div class="s-anchors s-anchors__grayscale">…</div>
<div class="s-anchors s-anchors__muted">…</div>
<div class="s-anchors s-anchors__danger">…</div>
<div class="s-anchors s-anchors__underlined">…</div>
<div class="s-anchors s-anchors__inherit">…</div>

There is a default link here, , and another one.

There is a grayscale link here, , and another one.

There is a muted link here, , and another one.

There is a danger link here, , and another one.

There is a underlined link here, , and another one.

There is a inherit link here, , and another one.

One additional level of nesting is supported, but even that should be exceedingly rare. More than that is not supported.

<div class="s-anchors s-anchors__danger">
    All <a href="#">links</a> in this <a href="#">outer box</a>
    are <a href="#">dangerous</a>.
    <div class="s-anchors s-anchors__default w70 mt8">
        But all <a href="#">links</a> in this <a href="#">inner box</a>
        have the <a href="#">default</a> link color.
    </div>
</div>

All links in this outer box are dangerous.

But all links in this inner box have the default link color.

An explicit s-link on an anchor overrides any s-anchors setting:

<div class="s-anchors s-anchors__danger">
    All <a href="#">links</a> in this <a href="#">box</a> are <a href="#">dangerous</a>,
    except for <a class="s-link">this one</a> which uses the default color, and
    <a class="s-link s-link__muted">this muted link</a>.
</div>

All links in this box are dangerous, except for this one which uses the default color, and this muted link.