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.

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

Descendent anchors

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

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