Primitive
Link CSS-only
Variants of <a> beyond the default — subtle, plain (no underline), destructive, with leading/trailing icon, standalone block. The base <a> uses the classless default; reach for .ren-link when you need one of the variants.
About
Overview
Most links should just be <a href> — the base classless styling already handles color, hover and focus. Use .ren-link when you specifically need one of the variants below.
Live
Demo
<a href="/contact" class="ren-link">Get in touch</a>
<a href="/policy" class="ren-link-subtle">Privacy policy</a>
<a href="/delete" class="ren-link-destructive">Delete account</a>Reference
API
| Class | Effect |
|---|---|
.ren-link | Standard link styling. Use when the inherited classless style needs explicit control. |
.ren-link-subtle | Quieter — secondary text color, underline only on hover. |
.ren-link-plain | No underline. Use inside cards or list rows where the whole row is clickable. |
.ren-link-destructive | Danger color. For "Delete", "Cancel subscription", etc. |
Inclusive by default
Accessibility
- Always use a real
<a href>. A clickable<span>is not a link. - Don't remove the underline from prose links — it's the primary affordance for color-blind users. Reserve
.ren-link-plainfor self-evident click targets like card surfaces. - Use descriptive link text. "Click here" tells a screen reader user nothing.