Links

Svelte

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__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__dropdown" href="#">Links</a>

Default Grayscale Muted Danger Inherit Underlined 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, 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 use the s-anchors class together with one of the optional modifiers 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 s-card">
    All <a href="#">links</a> in this <a href="#">outer box</a>
    are <a href="#">dangerous</a>.
    <div class="s-anchors s-anchors__default s-card 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 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.