Link

Source

• Link.css

Example

<a class="x-link" title="">
    Link Default
</a>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/link/props/default.css" layer(theme);
@import "winduum/src/components/link/default.css" layer(utilities);
@import "winduum/src/components/link/interactive.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-link-font-size: 0.875rem;
    --x-link-line-height: calc(1em + 0.25rem);
  }
}

Winduum CSS Code

winduum/src/components/link/props/default.css

:root, :host {
  --x-link-font-size: var(--text-sm);
  --x-link-line-height: calc(1em + 0.25rem);
}

winduum/src/components/link/default.css

.x-link {
  font-family: var(--x-link-font-family);
  font-weight: var(--x-link-font-weight);
  font-size: var(--x-link-font-size);
  line-height: var(--x-link-line-height);
  letter-spacing: var(--x-link-letter-spacing);
  text-wrap: pretty;
}

winduum/src/components/link/interactive.css

.x-link {
  &:where(:any-link, button:enabled, [role="button"]) {
    transition: all var(--default-transition-duration) var(--ease-in-out);

    &:is(:hover, :focus-visible) {
      color: var(--x-link-hover-color, var(--color-accent));
    }
  }
}