Pelajari cara membuat komponen yang menarik ini, dan gunakan untuk menambahkan sentuhan profesional pada desain web Anda.

Meskipun komponen kartu mungkin tampak sederhana, ada kriteria khusus yang perlu dipertimbangkan saat membuatnya. Anda akan menemukan berbagai jenis komponen kartu untuk memulai dan, sebagai pengembang web, Anda harus memastikan bahwa antarmuka Anda dapat diakses.

Cari tahu cara membuat komponen kartu menggunakan HTML dan CSS serta pelajari tentang pertimbangan dan penyesuaian aksesibilitas.

Struktur HTML untuk Komponen Kartu

Anatomi kartu mencakup wadah kartu, header, gambar, dan badannya, serta footer kartu opsional.

Anda akan membuat tiga komponen kartu sederhana: konten, produk, dan kartu profil. Ini adalah beberapa jenis kartu yang paling umum ditemukan di web.

Mulailah dengan membuat wadah div, menumpuk tiga tag div lagi dengan atribut kelas untuk setiap kartu di dalamnya, dengan elemen anak yang sesuai untuk masing-masing dari ketiga kartu tersebut. Anda harus menggunakan elemen yang memperhitungkan semua bagian dalam anatomi kartu. Misalnya, kartu konten memiliki tag gambar untuk media, tag h3 untuk judul, dan tag p untuk teks.

instagram viewer 

<divkelas="wadah kartu">
 Kartu Konten 
<divkelas="kartu konten">
<imgsrc=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&otomatis=format&fit=potong&w=200&q=80"alt="Ruang kerja dengan notebook keyboard, secangkir kopi, dan earpiece">
<h3>Judulh3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elite. Iklan
 exceptionuri explicabo molestiae natus magnam rem...P>
<Ahref="#">Baca selengkapnyaA>
div>
 Kartu Produk 
<divkelas="kartu-produk">
<imgsrc=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&otomatis=format&fit=potong&w=200&q=80"alt="Headphone dengan latar belakang kuning">
<h3>Nama Produkh3>
<P>$19.99P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elite.
 Aspernatur, voluptatibus.P>
<Ahref="#"><tombol>Masukkan ke keranjangtombol>A>
div>
 Kartu Profil 
<divkelas="kartu profil">
<imgsrc=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&otomatis=format&fit=potong&w=200&q=80"alt="Seorang pria kulit putih mengenakan kemeja hitam berkancing">
<h3>John Doeh3>
<P>Pengembang WebP>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elite.
 Expedita tempora eos molestias repellat?P>
<Ahref="#"kelas="tautan-profil">Tampilkan profilA>
div>
div>

Inilah yang seharusnya terlihat di browser Anda, secara default, sebelum Anda menerapkan gaya kustom apa pun:

Jika Anda ingin membuat lebih banyak kartu atau menyertakan lebih banyak konten dalam satu kartu, lakukan sebelum melanjutkan.

Gaya CSS untuk Komponen Kartu

Dengan menggunakan CSS, Anda dapat menata setiap kartu secara individual untuk membuatnya menarik secara visual. Gunakan pemilih universal untuk mengatur ulang margin, bantalan, dan posisi menggunakan ukuran kotak. Kemudian tata wadah dengan memberinya bantalan untuk menciptakan ruang.

​​​​​​* {
batas: 0;
lapisan: 0;
ukuran kotak: kotak perbatasan;
}
.card-container {
lapisan: 20px;
}

Selanjutnya, gunakan pemilih berganda untuk semua kartu, berikan margin untuk menyediakan ruang di sekitar setiap kartu, dan atur menampilkan Dan flex-direction untuk tata letak. Juga, atur batas untuk menentukan kartu, radius batas untuk beberapa kurva, dan lebar maksimal untuk daya tanggap.

.isi-kartu,
.produk-kartu,
.profil-kartu {
batas: 20px;
menampilkan: melenturkan;
flex-direction: kolom;
berbatasan: 2pxpadat#ccc;
radius perbatasan: 7px;
max-width: 250px;
}

Sekarang fokus pada setiap kartu, dimulai dengan kartu konten, dan berikan warna latar belakang dan padding. Tambahkan pemilih turunan untuk elemen di kartu konten.

Gaya gambar dengan max-width dan radius perbatasan. Tetapkan margin, font-family, dan ukuran font untuk h3. Untuk tag anchor, hapus hiasan teks, dan atur warna, margin-top, dan ukuran font.

.isi-kartu {
latar belakang: #E9724C;
lapisan: 10px;
}
.isi-kartuimg {
max-width: 100%;
radius perbatasan: 5px;
}


.isi-kartuh3 {
batas: 10px 0;
font-family: monospace;
ukuran huruf: 1.5rem;
}
.isi-kartuA {
dekorasi teks: tidak ada;
warna: #6f2ed8;
batas:12px 0 7px 0;
ukuran huruf: 1rem;
}

Kartu produk akan membutuhkan lebih banyak gaya karena elemen tambahannya. Buat pemilih untuk setiap elemen anak dan sesuaikan gayanya.

Itu tombol elemen berisi atribut gaya paling banyak untuk mencapai efek ajakan bertindak. Sejajarkan hanya tombol ke kanan dengan menyetel align-self ke flex-end di pemilih jangkar.

.produk-kartuimg {
radius perbatasan: 5px 5px 0 0;
lebar: 100%;
}
.produk-kartuh3 {
batas: 5px 10px;
font-family: monospace;
ukuran huruf: 1.5rem;
}


.produk-kartuP {
batas: 5px 10px;
font-family: Georgia, 'WaktuBaruRoma', Waktu, serif;
}


.produk-kartuA {
menyelaraskan diri: flex-end;
}
.produk-kartutombol {
lebar: 100px;
tinggi: 30px;
batas: 10px;
berbatasan: 1pxpadat#8f3642;
radius perbatasan: 4px;
warna latar belakang: #FFC857;
font-berat: 700;
kursor: penunjuk;
}

Terakhir, tata gaya kartu profil. Setel radius batas di kanan atas dan kiri atas gambar agar sesuai dengan penampung. Sesuaikan ukuran gambar dan pas jika perlu. Gunakan setidaknya dua jenis font dan warna pelengkap pada teks untuk definisi. Selain itu, Anda dapat membuat elemen yang dapat ditindaklanjuti—yaitu. tag jangkar—menonjol dengan a berbatasan.

.profil-kartuimg {
radius perbatasan: 5px 5px 0 0;
tinggi: 200px;
sesuai objek: menutupi;
}
.profil-kartuh3 {
batas: 10px;
font-family: monospace;
ukuran huruf: 1.5rem;
}


.profil-kartuP: tipe pertama {
batas:0px 10px;
font-family: 'WaktuBaruRoma', Waktu, serif;
warna: cornflowerblue;
}


.profil-kartuP: tipe terakhir {
batas: 5px 10px;
ukuran huruf: 0.9rem;
}
.profil-kartuA {
dekorasi teks: tidak ada;
batas: 5px 10px 10px 10px;
lapisan: 5px 15px;
menyelaraskan diri: tengah;
berbatasan: 1pxpadatcornflowerblue;
radius perbatasan: 15px;
warna: hitam;
font-family: monospace;
font-berat: 500;
}

Setelah ditata, kartu Anda akan terlihat seperti ini:

Tata Letak Kartu dan Fleksibilitas

Daya tanggap sangat penting untuk memberikan pengalaman yang mulus dengan antarmuka di seluruh perangkat. Kamu bisa gunakan CSS Flexbox atau CSS Grid untuk tata letak. Akhirnya, Anda bisa gunakan kueri media untuk responsif.

Menggunakan CSS Flexbox

Pertama, tambahkan atribut tampilan dan setel ke fleksibel pada pemilih wadah kartu Anda. Terapkan flex-wrap dan atur untuk membungkus, sehingga kartu dapat dibungkus dalam ukuran layar kecil.

Juga, atur menyelaraskan-item Dan membenarkan-konten properti sesuai keinginan Anda.

​​​​​​.card-container {
lapisan: 20px;
menampilkan: melenturkan;
flex-wrap: membungkus;
menyelaraskan-item: tengah;
membenarkan-konten: ruang-merata;
}

Halaman akan terlihat seperti ini:

Itu menyimpulkan daya tanggap pada ukuran layar yang lebih besar. Untuk area pandang yang lebih kecil, seperti ponsel, Anda dapat menggunakan aturan kueri media dan menyetel lebar maksimal.

Di dalam kueri media, tentukan elemen mana yang ingin Anda ubah. Dalam hal ini, wadah kartu akan berubah.

Mengatur flex-direction ke kolom, sehingga kartu menumpuk secara vertikal. Untuk menampilkan kartu di tengah layar, secara horizontal, atur properti justify-content dan align-items ke tengah:

@media layar Dan (lebar maks:480px) {
.card-container {
flex-direction: kolom;
membenarkan-konten: tengah;
menyelaraskan-item: tengah;
 }
}

Untuk melihat efek kueri media, periksa kode di CodePen.

Menggunakan Kotak CSS

Pertama, atur tampilan wadah kartu ke kisi. Menggunakan grid-template-columns untuk memungkinkan kartu menyesuaikan lebarnya secara otomatis. Gunakan celah jaringan untuk jarak antar kartu. Menggunakan membenarkan-item untuk memusatkan kartu.

.card-container {
lapisan: 20px;
menampilkan: kisi;
grid-template-columns: mengulang(pas otomatis, minmax(300px, 1fr));
celah jaringan: 20px;
membenarkan-item: tengah;
}

Halaman akan terlihat seperti ini:

Untuk layar seluler, terapkan kueri media. Di dalam kueri, ubah tata letak kisi untuk area pandang yang lebih kecil. Mengatur grid-template-columns ke 1fr untuk membuat setiap kartu menempati lebar penuh. Juga, pengaturan membenarkan-item Dan menyelaraskan-item properties to center akan memusatkan kartu baik secara horizontal maupun vertikal.

@media layar Dan (lebar maks:480px) {
.card-container {
grid-template-columns: 1fr;
membenarkan-item: tengah;
menyelaraskan-item: tengah;
 }
}

Oleh menggabungkan CSS Grid dan kueri media, kartu akan dibungkus di layar yang lebih besar dan ditumpuk secara vertikal di layar yang lebih kecil, mencapai tata letak kartu yang responsif. Untuk melihat efek kueri media, periksa kode di CodePen.

Pertimbangan Aksesibilitas untuk Komponen Kartu

Penting untuk memastikan bahwa komponen kartu yang Anda buat dapat diakses oleh semua pengguna, termasuk mereka yang memiliki keterbatasan. Berikut adalah beberapa pertimbangan utama untuk membuat komponen kartu lebih mudah diakses:

  • HTML semantik
  • Navigasi keyboard
  • Gaya fokus
  • Label dan peran ARIA
  • Teks alternatif
  • Struktur tajuk yang tepat
  • Kontras warna

Dengan menerapkan pertimbangan aksesibilitas ini, pengembang web dapat memastikan bahwa komponen kartu bersifat inklusif.

Kustomisasi dan Eksplorasi Lebih Lanjut

Anda dapat melangkah lebih jauh dengan menyesuaikan komponen kartu Anda. Berikut ini beberapa ide yang dapat Anda lihat:

  • Transisi dan animasi
  • Gaya gambar
  • Latar belakang dan skema warna
  • Gaya perbatasan
  • Elemen interaktif

Ada banyak cara berbeda untuk menyesuaikan komponen kartu Anda, jadi jangan ragu untuk bereksperimen.

Buat Komponen Kartu yang Menarik Secara Visual dan Responsif

Komponen kartu dapat berperan di hampir semua situs web. Membuatnya dengan HTML dan CSS itu mudah, tetapi mengetahui cara menangani aksesibilitas juga penting.

Ada efek CSS lain yang bisa Anda coba, seperti filter CSS dan mode campuran untuk efek visual. Berlatihlah membuat lebih banyak dengan penyesuaian berbeda untuk daya tarik visual.