Sections

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 n button while maintaining the look of an anchor.

Single link

Section titled Single link

Single link classes

Section titled Single link classes
Class Applied to Description
.s-link N/A Base link style that is used almost universally.
.s-link__grayscale .s-link A link style modification with our default text color.
.s-link__muted .s-link Applies a visually muted style to the base style.
.s-link__danger .s-link Applies an important, destructive red to the base style.
.s-link__inherit .s-link Applies the parent element’s text color.
.s-link__underlined .s-link Adds an underline to the link’s text.
.s-link__visited all Applies the hover / active state styling to links that have been visited.

Single link examples

Section titled 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__visited" href="#">Visited</a>
Default Grayscale Muted Danger Inherit Underlined Visited

Descendent anchors

Section titled Descendent anchors

Descendent anchor classes

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

Descendent anchor examples

Section titled Descendent 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. 

<a class="s-anchors s-anchors__default" href="#">…</a>
<a class="s-anchors s-anchors__grayscale" href="#">…</a>
<a class="s-anchors s-anchors__muted" href="#">…</a>
<a class="s-anchors s-anchors__danger" href="#">…</a>
<a class="s-anchors s-anchors__underlined" href="#">…</a>
<a class="s-anchors s-anchors__inherit" href="#">…</a>

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

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

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

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

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

There is an inheriting 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 s-card">
    <p>
        All <a href="#">links</a> in this <a href="#">outer box</a>
        are <a href="#">dangerous</a>.
    </p>
    <div class="s-anchors s-anchors__default s-card w70 mt8">
        <p>
            But all <a href="#">links</a> in this <a href="#">inner box</a>
            have the <a href="#">default</a> link color.
        </p>
    </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 s-card">
    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.

Block link

Section titled Block link

Block link classes

Section titled Block link classes
Class Applied to Description
.s-block-link N/A Base block link style
.is-selected .s-block-link Adds the selected state to the base block link style.
.s-block-link__right .s-block-link Applies a border to the right of the selected state.
.s-block-link__left .s-block-link Applies a border to the left of the selected state.

Block link examples

Section titled Block link examples
<a class="s-block-link" href="#">…</a>
<a class="s-block-link is-selected" href="#">…</a>
<a class="s-block-link s-block-link__right is-selected" href="#">…</a>
<a class="s-block-link s-block-link__left is-selected" href="#">…</a>
Block link
Selected block link Selected block link right Selected block link left
Edit on GitHub