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__visited all Applies the hover / active state styling to links that have been visited.
1
2
3
4
5
6
7
<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>
<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 deschendent 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__inherit .s-anchors Applies the parent element’s text color to all descendent links.
.s-anchors__visited .s-anchors Applies the hover / active state styling 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.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="s-anchors s-anchors__grayscale s-card mb8 fc-orange-700">
    <p>There is a <a href="#">gray link here</a>, and <a href="#">another one</a>.</p>
</div>
<div class="s-anchors s-anchors__muted s-card mb8">
    <p>There is a <a href="#">muted link here</a>, and <a href="#">another one</a>.</p>
</div>
<div class="s-anchors s-anchors__danger s-card mb8">
    <p>There is a <a href="#">dangerous link here</a>, and <a href="#">another one</a>.</p>
</div>
<div class="s-anchors s-anchors__inherit s-card mb8 fc-green-500">
    <p>There is an <a href="#">inheriting link here</a>, and <a href="#">another one</a>.</p>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
<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:

1
2
3
4
5
<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.