Navigation and overlays

Link

Text links with a soft underline that firms up on hover, a hover only underline, primary, muted and danger colors and an external marker.

Navigation and overlays6 classesNo JavaScriptLight and dark

Example

Full

link.html

<p class="text-sm">Read the <a href="#" class="link link-primary">getting started guide</a>, browse the <a href="#" class="link link-hover">changelog</a> or open the <a href="https://example.com" class="link link-muted link-external">status page</a>.</p>

Classes

6 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class	Type	What it does
	Base	Base class of the link. On an <a> in the example. Sets text color, text style, corner radius, pointer cursor and transition. CSS `.link:hover { text-decoration-color: currentColor; } .link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); border-radius: var(--m-radius-xs); cursor: pointer; transition: color var(--m-duration-fast), text-decoration-color var(--m-duration-fast); }`
	Modifier	Modifier, combined with the link class. On an <a> in the example. Sets text style. CSS `.link-hover { text-decoration-color: transparent; }`
	Modifier	Modifier, combined with the link class. On an <a> in the example. Sets text color. CSS `.link-primary { color: var(--primary); }`
	Modifier	Modifier, combined with the link class. On an <a> in the example. Sets text color. CSS `.link-muted { color: var(--muted-foreground); } .link-muted:hover { color: var(--foreground); }`
	Modifier	Modifier, combined with the link class. Not used in the example above. Sets text color. CSS `.link-danger { color: var(--danger); }`
	Modifier	Modifier, combined with the link class. On an <a> in the example. Sets generated content, inline-block display, width, height, margin and background. CSS `.link-external::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-inline-start: .2em; vertical-align: -.05em; background: currentColor; mask: var(--m-nav-out) center / contain no-repeat; }`

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Link: start from the base class, then add modifiers -->
<p class="text-sm">Read the <a href="#" class="link link-primary">getting started guide</a>, browse the <a href="#" class="link link-hover">changelog</a> or open the <a href="https://example.com" class="link link-muted link-external">status page</a>.</p>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components