a
The anchor element creates hyperlinks to web pages, files, email addresses, locations within the same page, or any other URL.
Progressive Enhancement
The anchor element is the fundamental building block of the web. It works in every browser with zero CSS or JavaScript.
- HTML-first: Links function without any styling - the browser provides default blue/purple colors and underlines
- CSS-enhanced: Vanilla Breeze adds visual polish (interactive colors, hover effects, focus rings) without changing functionality
- No JavaScript required: All link functionality is native browser behavior
When to Use
- Navigation: Links in site navigation, menus, and breadcrumbs
- In-page links: Table of contents linking to sections
- External resources: Linking to external sites and references
- Downloads: Use with
downloadattribute for downloadable files - Contact links: Use
mailto:andtel:protocols
When NOT to Use
- Buttons: Use
<button>for actions that don't navigate - Form submission: Use
<button type="submit">instead - JavaScript actions: Use buttons for toggles, modals, or state changes
Auto-Detection
Vanilla Breeze automatically detects and adds visual indicators to special link types. This is CSS-only with no JavaScript required.
External Links
Links starting with http automatically show an external indicator (arrow).
Visit Example.com for more information.
Download Links
Links with the download attribute show a download indicator.
Email Links
Use <icon-wc name="mail"> inside email links for a clean mail icon:
Phone Links
Use <icon-wc name="phone"> inside phone links:
Custom Link Icons
Any Lucide icon can be used inside links for visual context:
Tip: Use data-no-icon on external/download links when using custom icons to suppress the auto-inserted arrow.
Suppressing Auto-Icons
Use data-no-icon to suppress automatic icons when they're not appropriate.
Visit Example.com (no icon).
Note: Links inside <nav> and <header> elements automatically suppress icons - no data-no-icon needed.
Variants
Use data-variant to change link appearance.
Default Link
Standard link with underline and interactive color.
This is a default link in a paragraph.
data-variant="muted"
Less prominent link using muted text color. Good for footer links or secondary navigation.
This is a muted link that is less prominent.
data-variant="plain"
No underline by default, reveals underline on hover.
This is a plain link without default underline.
Button-Styled Links
Use class="button" on a link to make it look like a button. This is for links that navigate to another page but need the visual weight of a button — hero CTAs, sign-up links, prominent calls to action.
All button variants and sizes work: .secondary, .ghost, .small, .large, and .full-width.
Variants
Sizes
Full Width
Note: For actions that don't navigate (toggles, form submission, dialogs), use <button> instead. The .button class is for links that go somewhere.
Links Wrapping Content
When links wrap images, pictures, figures, or cards, the underline is automatically removed. This uses the CSS :has() selector for detection.
Image Links
Card Links
Key Attributes
| Attribute | Description |
|---|---|
href |
The URL the link points to (required for functional link) |
target |
Where to open the link (_blank for new tab) |
rel |
Relationship between pages (e.g., noopener, noreferrer) |
download |
Prompts download instead of navigation |
hreflang |
Language of the linked document |
data-variant |
Visual variant: muted | plain |
data-no-icon |
Suppress auto-detected link type icons |
CSS Properties
| Property | Value |
|---|---|
color |
var(--color-interactive) |
text-decoration |
underline |
text-decoration-thickness |
1px (default), 2px (hover) |
text-underline-offset |
0.15em |
transition |
var(--duration-fast) var(--ease-default) |
Link States
Hover
Underline thickness increases from 1px to 2px on hover.
Focus
A visible focus ring appears when navigating via keyboard (uses :focus-visible).
Tab to this link to see the focus ring.
Visited
Vanilla Breeze deliberately does not style :visited links. This is a privacy decision - browsers restrict what CSS properties can be applied to visited links to prevent history sniffing attacks. Rather than provide inconsistent styling, we leave visited links the same color as unvisited.
Active
No special :active state is applied. The hover state provides sufficient feedback.
Accessibility
- Descriptive link text: Avoid "click here" or "read more" - use meaningful text that describes the destination
- Visual distinction: Links have underlines by default - color alone is not sufficient to identify links
- Focus visibility: Links have visible focus rings for keyboard navigation
- New tab warning: When links open in new tabs, consider informing users
- Skip links: Use anchor links to create "skip to content" navigation
External Link Best Practice
For links that open in a new tab, add a visually hidden notice for screen reader users.
Related Elements
<button>- For actions that don't navigate<nav>- For wrapping navigation links<foot-notes>- For footnote reference links