Komponen Features — Tampilkan Keunggulan Produk dengan Icon

Apa itu: Komponen untuk menampilkan daftar keunggulan atau fitur produk, dilengkapi icon, judul, dan deskripsi per item. Kapan pakai: Saat kamu ingin menjelaskan "kenapa pilih produk ini" — value proposition, keunggulan layanan, atau daftar benefit dalam format visual yang mudah dipindai.

Apa itu Features?

Features adalah komponen yang membantu kamu menyajikan daftar keunggulan produk atau layanan dalam format yang rapi dan menarik secara visual. Setiap item bisa dilengkapi icon (dari library Lucide atau emoji), judul singkat, dan deskripsi penjelas.

Komponen ini cocok untuk seksi "Mengapa Pilih Kami", "Apa yang Kamu Dapatkan", atau "Keunggulan Produk" — seksi yang hampir selalu ada di landing page yang efektif karena menjawab pertanyaan calon pembeli sebelum mereka bertanya.

Kapan Pakai Features?

• "Why choose us" section — 3–6 poin keunggulan kompetitif
• Value proposition — benefit utama produk atau layanan
• Daftar apa yang didapat — terutama untuk produk digital atau course
• Perbandingan layanan — fitur yang membedakan paket satu dengan lainnya

Properties

Property	Tipe	Default	Penjelasan
Layout	Pilihan	Grid	Cara item ditampilkan: Grid, List, atau Cards
Columns	Pilihan (1–4)	3	Jumlah kolom per baris (hanya berlaku di Grid dan Cards)
Items	Daftar item	—	Daftar fitur yang ingin ditampilkan

Per Item

Setiap item di daftar Features punya field berikut:

Field	Tipe	Default	Penjelasan
Icon	Lucide picker / Emoji	—	Icon yang mewakili fitur ini
Title	Teks singkat	—	Nama fitur atau keunggulan
Description	Rich text	—	Penjelasan singkat 1–3 kalimat

Layout: Grid / List / Cards

Layout	Tampilan	Cocok untuk
Grid	Icon + teks dalam kolom equal-width	Kebanyakan kasus — rapi dan fleksibel
List	Icon + teks berjajar vertikal, full width	Daftar panjang atau item dengan deskripsi panjang
Cards	Setiap item dalam card terpisah dengan border/bg	Tampilan premium, bisa diberi hover effect

Columns

Nilai 1–4. Untuk mobile, kolom otomatis dikurangi agar tidak terlalu sempit. Rekomendasi:

Kolom	Gunakan ketika
2	Item dengan deskripsi panjang, atau jumlah item 4
3	Paling umum — sweet spot antara kepadatan dan keterbacaan
4	Item singkat (hanya icon + judul tanpa deskripsi), atau layar lebar

Icon Styles

Grup properti ini mengontrol tampilan icon secara global untuk semua item.

Property	Tipe	Default	Penjelasan
Show Icons	Toggle	Aktif	Tampilkan atau sembunyikan icon semua item
Icon Shape	Pilihan	Circle	Bentuk background icon: Circle, Square, Rounded, None
Icon Color	Color picker	—	Warna icon (foreground)
Icon Background	Color picker	—	Warna latar icon
Icon Glow Intensity	Pilihan	None	Efek glow di sekitar icon: None, Soft, Medium, Strong
Icon Glow Color	Color picker	—	Warna glow (biasanya sama dengan Icon Color)

Card Styles (Hanya untuk Layout Cards)

Properti berikut hanya aktif saat Layout dipilih Cards:

Property	Tipe	Penjelasan
Hover Effect	Toggle	Card sedikit naik saat kursor di atasnya
Glass Effect	Toggle	Background card transparan bergaya glassmorphism
Card Background	Color picker	Warna background card
Border	Color picker + radius	Tampilan border card
Border Radius	Slider	Kelengkungan sudut card

Title Color & Description Color

Dua color picker global yang mengatur warna teks judul dan deskripsi semua item sekaligus. Berguna untuk menyesuaikan dengan tema warna halaman tanpa mengubah satu per satu.

Style Universal

Features mendukung semua properti style umum (margin, padding, background, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — "Kenapa Pilih Kami" (Grid 3 Kolom, Lucide Icons)

Enam item keunggulan ditampilkan dalam Layout Grid 3 kolom. Setiap item menggunakan Lucide icon (ShieldCheck, Truck, Star, Zap, Headphones, Award) dengan Icon Shape Circle, Icon Color oranye brand (#F57C00), dan Icon Background oranye muda (#FFF3E0). Hasilnya adalah seksi fitur yang rapi, seragam, dan langsung terbaca dalam hitungan detik.

Contoh 2 — Fitur Produk Digital (Cards Layout, Emoji Icons)

Empat modul course online ditampilkan dalam Layout Cards 2 kolom dengan Hover Effect aktif. Menggunakan emoji sebagai icon (🎯 📊 🎨 🚀) karena lebih ekspresif untuk konten edukatif. Setiap kartu terangkat sedikit saat di-hover, memberi kesan interaktif dan premium.

Contoh 3 — Benefit List (Layout List, Icons Off)

Tiga benefit layanan konsultasi ditampilkan dalam Layout List dengan Show Icons dimatikan — murni judul bold dan deskripsi teks berjajar vertikal penuh lebar. Cocok untuk deskripsi layanan yang lebih panjang atau konten profesional yang tidak memerlukan dekorasi ikon.

Tips & Gotchas