Cara membuat link card artikel

Bagaimana cara menambah tautan atau link anchor ke dalam komponen card atau komponen web lainnya yang mengharuskan ada link dalam sebuah blok elemen div?

Jawaban singkat dan padat seperti ini:

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

Muncul pertanyaan lain, bolehkah menempatkan div di dalam tag anchor <a> dengan struktur kode seperti itu?

Jawabannya boleh, jika menggunakan markah HTML 5.

Pada masa lalu, pada generasi HTML 4, menempatkan elemen div ke dalam tag <a> hasil render browser tidak akan menghasilkan tautan yang berfungsi.

Pada kebanyakan kasus membuat theme atau template website, front end developer pemula akan membungkus card berisi tautan dengan cara sederhana berikut ini:

<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>

Ia langsung membungkus card yang ada linknya dengan tag <a>.

Namun ada solusi lain yang lebih elegan untuk menyelesaikan masalah tautan yang terbungkus dalam sebuah elemen card.

Cara elegan menyelimuti link ke dalam div block card element

Cara ini biasanya dipakai senior front-end dev untuk membungkus HTML link card dengan memanfaatkan CSS pseudo-element ::before berikut ini:

<style>
  /* CSS untuk tautan sebelum (pseudo-element ::before) */
  a.link-gaib::before {
    content: " "; /* Menambahkan konten kosong pada pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Menempatkan pseudo-element di belakang konten asli */
    pointer-events: auto;
  }
</style>

Dan struktur kode HTML berubah menjadi seperti dibawah ini:

<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>

Dengan pendekatan ini, kode lebih rapi dan semantik, dan tautan akan menyelimuti seluruh card.

Satu lagi, bila front end developer menggunakan framework TailwindCSS, apakah harus menambah CSS kustom pseudo-element seperti yang di atas?

Jawabanya terserah anda!

Bagi pengembang yang menggunakan Tailwind CSS, penggunaan pseudo-element before:dan kelas-kelas Tailwind yang sesuai adalah cara yang sangat baik untuk mencapai hasil yang diinginkan tanpa perlu menambahkan CSS kustom.

Bukankah TailwindCSS framework super lengkap sudah menyiapkan class pseudo-element, jadi menggunakan class bawaan Tailwind adalah cara yang sangat baik untuk mencapai hasil yang diinginkan tanpa perlu menambahkan lagi CSS
kustom.

Sini saya kasi tau caranya. Pertama, kita lihat dulu struktur kode card yang umum menggunakan 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">Judul 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>

Untuk menyelimuti link ke seluruh card, cukup tambahkan class pseudo-element before: dan after: Tailwind pada baris kode <a href="#" class="bg-blue-500">Read More</a>, kode lengkapnya seperti berikut ini:

<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">Judul 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>

Jangan lupa untuk menambah satu class relative pada blok parent kontainer <article>.

Nah… Bgaimana! Sangat mudah bukan?

Penutup

Demikianlah cara membuat tautan dalam komponen card dengan cara yang lebih elegan. Kamu dapat memilih pendekatan yang paling sesuai dengan butuhanmu. Semoga tip dan trik ini membantu para front end pemula membuat komponen card UI yang lebih baik dan semantik.

Oya, kalau artikel ini bermanfaat, jangan lupa share tips ini ke teman junior front end tim kamu, agar ia cepat naik level dan katakan padanya “begini lo cara membuat link card secara elegan!”.