How to Create Article Card Links

Best practices for adding web component card links using pure CSS or Tailwind. Crucial tips for web developers!

HTML pseudo element.
HTML pseudo element. ( Photo by Unsplash / Markus Spiske )

How to add anchor links to card components or other web components, following best practices, requiring links within a div element block?

A concise and straightforward answer is like this:

<a href="#">
  <div class="card">
    
  </div>
</a>

Another question arises, can you place a div inside an anchor tag <a> with this code structure?

The answer is yes, if you’re using HTML 5.

In the past, in HTML 4, placing a div element inside an <a> tag wouldn’t result in a functional link when rendered by the browser.

In most cases of creating website themes or templates, beginner front-end developers often wrap a card containing a link like this:

<a href="#">

  <div class="card">
    <img src="/image.jpg" alt="image">

    <div class="card-body">
    
      <h2>Lorem ipsum dolor sit amet</h2>
    
      <a href="#" class="btn">Read More</a>
    
    </div>
  </div>

</a>

They directly wrap the card with a link using the <a> tag.

However, there’s a more elegant solution to address links wrapped within a card element. An elegant way to enclose the link within a div block card element.

This approach is commonly used by senior front-end developers to wrap HTML link cards using the CSS pseudo-element ::before like this:

<style>
  /* CSS for before link (pseudo-element ::before) */
  a.link-gaib::before {
    content: " "; /* Adding empty content to the pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Placing the pseudo-element behind the original content */
    pointer-events: auto;
  }
</style>

And the HTML code structure changes as follows:

<article class="card relative">

  <img src="/image.jpg" alt="image">

  <div class="card-body">
  
    <h2>Lorem ipsum dolor sit amet</h2>
  
    <a class="link-gaib btn" href="#">Read More</a>
  
  </div>

</article>

With this approach, the code is cleaner and more semantic, and the link will encompass the entire card.

One more thing, if a front-end developer is using the TailwindCSS framework, do they need to add custom CSS pseudo-elements like the one above?

The answer is up to you!

For developers using Tailwind CSS, using pseudo-elements like before: and relevant Tailwind classes is a great way to achieve the desired result without adding custom CSS.

Isn’t the TailwindCSS framework already very comprehensive and provides built-in pseudo-element classes, so using Tailwind’s default classes is an excellent way to achieve the desired result without adding custom CSS.

Let me show you how. First, let’s look at the common card code structure using TailwindCSS:

<article class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="gambar.jpg" alt="Gambar">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Title Card</div>
    <p class="text-gray-700 text-base">
      Deskripsi singkat dari card ini. Anda dapat menambahkan teks di sini untuk menjelaskan lebih lanjut tentang konten card.
    </p>
  </div>
  <div class="px-6 py-4">
    <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4">
      Read More
    </a>
  </div>
</article>

To enclose the link around the entire card, simply add the before: pseudo-element class to the line of code <a href="#" class="bg-blue-500">Read More</a>, the complete code would look like this:


<article class="relative max-w-sm rounded shadow-lg">
  <img class="w-full" src="gambar.jpg" alt="Gambar">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Title Card</div>
    <p class="text-gray-700 text-base">
      Deskripsi singkat dari card ini. Anda dapat menambahkan teks di sini untuk menjelaskan lebih lanjut tentang konten card.
    </p>
  </div>
  <div class="px-6 py-4">
    <a href="#" class="before:content-[''] before:z-10 before:top-0 before:right-0 before:left-0 before:bottom-0 before:absolute before:pointer-events-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4">
      Read More
    </a>
  </div>
</article>

Don’t forget to add the relative class to the parent container <article>.

There you go! It’s quite easy, isn’t it?

Conclusion

So, that’s how you create links within card components in a more elegant way. You can choose the approach that best suits your needs. Hopefully, these tips and tricks will help junior front-end developers create better and more semantic UI card components.

And, if you find this article helpful, be sure to share these valuable tips with your junior front-end team members to help them rapidly enhance their skills and let them know, “This is the way to craft stylish link cards”!

comments powered by Disqus
Fauzan My avatar

Written by Fauzan My

Iam obsessed with elegant and simple design, whether it involves complex creative processes or simplicity. Here, I combine both: design and coding, searching for best practices.

More from Fauzan My

Smartphone twitter Icon X social media.
Twitter Icon X in SVG Bootstrap
Visual Studio Code.
Problem solving: Hugo WARN Module is not compatible
Social icon.
Complete Guide to Favicon Icons for Browsers, iOS, and Android

Related Post