MoreLesson 190Preview gratis
Product Card
Lesson ini bagian dari How To · Semua level
Ringkasan
Product card memuat informasi singkat sebuah produk: gambar, nama, deskripsi, harga, dan tombol beli. Komponen ini menjadi blok dasar pada halaman katalog atau toko online. Dengan flexbox dan grid, kumpulan kartu dapat tersusun rapi serta menyesuaikan jumlah kolom sesuai lebar layar.
Poin kunci
- Urutan informasi yang lazim adalah gambar, nama produk, harga, lalu tombol aksi
- Gunakan object-fit: cover agar foto produk tetap proporsional di area gambar
- Susun isi kartu dengan flex-direction: column dan gap agar jarak konsisten
- Grid repeat(auto-fit, minmax(...)) membuat katalog otomatis responsif
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.