Skip link

#Example

<a href="#main" class="skip-link">Skip to content</a>

#Classes

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

.skip-link:focus, .skip-link:focus-visible {
  translate: 0 0;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .625rem 1rem;
  border-radius: var(--m-radius-md);
  font-size: .875rem;
  font-weight: 600;
  color: var(--primary-foreground);
  background: var(--primary);
  box-shadow: var(--m-shadow-md);
  translate: 0 calc(-100% - 1.5rem);
  transition: translate var(--m-duration) var(--m-ease);
}

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

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

<!-- Skip link: start from the base class, then add modifiers -->
<a href="#main" class="skip-link">Skip to content</a>

#Accessibility

• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components