Stacks

Single link

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.
`.s-link__dropdown`	`.s-link`	Applies a caret for dropdowns and additional interactivity.

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>
<a class="s-link s-link__dropdown" href="#">Links</a>

Default Grayscale Muted Danger Inherit Underlined Visited Links

Accessibility

Section titled 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 (often blue-400), it will require an underline in addition to the color. Reference WCAG SC 1.4.1 for more details.

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.

<div class="s-anchors s-anchors__default">…</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 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.
`.s-block-link__danger`	`.s-block-link`	Applies danger state styling.

Block link examples

Section titled Block link examples

<a class="s-block-link" href="#">…</a>
<a class="s-block-link is-selected" href="#">…</a>

Block link Selected block link

Block link right/left examples

Section titled Block link right/left examples

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

Selected block link right Selected block link left

Block link danger examples

Section titled Block link danger examples

<a class="s-block-link s-block-link__danger" href="#">…</a>
<a class="s-block-link s-block-link__danger is-selected" href="#">…</a>
<a class="s-block-link s-block-link__danger s-block-link__right is-selected" href="#">…</a>
<a class="s-block-link s-block-link__danger s-block-link__left is-selected" href="#">…</a>

Block danger link Selected block danger link Selected block danger link right Selected block danger link left