Links

Atomic classes for creating SEO-friendly and accessible links.

Link Overlay

#

The .link--overlay and .link--wrapper classes allow you to make an entire container clickable while keeping semantic HTML for SEO. Based on best practices from Enodo's SEO guide .

Class Description
.link--overlay Creates a clickable overlay. Use on the <a> tag.
.link--wrapper Parent wrapper with position: relative. Automatically elevates secondary links and buttons.

Usage

<article class="link--wrapper p4 bg-light-100 bar-md">
  <h3>
    <a href="/article" class="link--overlay fc-dark">Article Title</a>
  </h3>
  <p>Card content...</p>
  <!-- Secondary links stay clickable -->
  <a href="/category" class="fc-blue-400">Category</a>
</article>

Do

  • Place the link inside a heading tag (h1-h6)
  • Use descriptive anchor text
  • Add link--wrapper to the parent container
  • Keep the anchor text clean and focused

Don't

  • Wrap the entire card in an <a> tag
  • Use generic text like "Click here"
  • Forget link--wrapper on the parent
  • Pollute the anchor with unnecessary elements

SEO Benefits

#

Using .link--overlay instead of wrapping the entire card in an <a> tag provides significant SEO and accessibility advantages:

Clean Anchor Text

✓ Good (with .link--overlay)

<h3>
  <a class="link--overlay">Article Title</a>
</h3>

Google sees: "Article Title"

✗ Bad (wrapping everything)

<a href="...">
  <h3>Article Title</h3>
  <p>Description...</p>
</a>

Google sees: "Article Title Description..."

Semantic HTML

  • Respects block/inline element hierarchy
  • Better screen reader compatibility
  • Cleaner DOM structure for crawlers
  • Easier to maintain and debug

Best Practices

#

1. Use link--wrapper on parent (includes position: relative) 

<article class="link--wrapper">
  <h3><a class="link--overlay">Title</a></h3>
</article>

2. Place link inside semantic heading

<h3>
  <a href="/article" class="link--overlay">Article Title</a>
</h3>

3. Secondary links work automatically

<!-- Secondary links/buttons are automatically elevated -->
<a href="/category">Category</a>
<button>Add to Cart</button>

4. Use descriptive anchor text

✓ Good

Complete guide to chocolate benefits

✗ Bad

Click here, Read more, Learn more

Advanced Usage

#

Multiple Cards in a Grid

<div class="d-grid grid__1 md:grid__2 lg:grid__3 g4">
  <article class="ps-relative link--wrapper p4 bg-light-100 bar-md">
    <h3><a href="/post-1" class="link--overlay">Post 1</a></h3>
    <p>Content...</p>
  </article>
  <article class="ps-relative link--wrapper p4 bg-light-100 bar-md">
    <h3><a href="/post-2" class="link--overlay">Post 2</a></h3>
    <p>Content...</p>
  </article>
</div>

With Image

<article class="ps-relative link--wrapper p4 bg-light-100 bar-md">
  <img src="photo.jpg" alt="Descriptive alt text" class="w100 bar-sm">
  <h3>
    <a href="/article" class="link--overlay">Article Title</a>
  </h3>
  <p>Description...</p>
</article>

E-commerce Product Card

<article class="ps-relative link--wrapper p4 bg-light-100 bar-md">
  <img src="product.jpg" alt="Product name" class="w100">
  <h3>
    <a href="/product" class="link--overlay">Product Name</a>
  </h3>
  <p class="fc-light-700">$29.99</p>
  <button class="p2 bg-blue-400 fc-light">Add to Cart</button>
</article>

How It Works

#

The .link--overlay class uses a CSS pseudo-element to create an invisible layer that covers the parent container. The .link--wrapper class includes position: relative and automatically elevates secondary interactive elements: 

.link--overlay::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.link--wrapper {
  position: relative;
  
  /* Secondary links automatically elevated */
  a:not(.link--overlay),
  button {
    position: relative;
    z-index: 2;
  }
}

💡 Technical Details

  • Pseudo-element overlay: Creates an invisible clickable layer over the parent
  • Position relative: .link--wrapper includes position: relative
  • Z-index management: Overlay is at z-index: 1
  • Secondary elements: All links (except .link--overlay) and buttons get z-index: 2
  • Performance: No JavaScript required, pure CSS solution

Accessibility & SEO

#

Why This Matters for SEO

Google analyzes the text inside <a> tags to understand what the link points to. When you wrap an entire card in a link, Google sees all the content as the anchor text:

❌ Bad anchor (wrapping all content):

"Complete Guide to Chocolate Benefits The chocolate is a source of happiness, reduces stress, anxiety and even depression. Read more Category: Nutrition Tags: chocolate, health Published: 2024-01-15"

✓ Good anchor (with .link--overlay):

"Complete Guide to Chocolate Benefits"

Screen Reader Experience

  • Link is properly nested inside heading: better navigation
  • Clear content hierarchy: heading, paragraph, secondary links
  • Each link has distinct, meaningful text
  • No confusion from nested interactive elements