Card Content

Card Content menampilkan potongan informasi dalam format kartu yang ringkas dan terstruktur. Komponen ini biasanya berisi judul, deskripsi singkat, ajakan bertindak (CTA), serta elemen media seperti ilustrasi atau gambar pendukung.

Penggunaan

Gunakan Card Content untuk menampilkan potongan informasi dalam bentuk kartu yang konsisten dan mudah dibaca. Tambahkan elemen seperti judul, deskripsi singkat, ajakan bertindak (CTA), serta ilustrasi atau gambar pendukung bila diperlukan. Komponen ini membantu pengguna mengenali konten dengan cepat, menjaga tampilan tetap rapi, dan membuat urutan informasi lebih jelas di antarmuka.

Anatomi

Varian

Basic Card

Gunakan Basic Card untuk menampilkan kombinasi antara gambar dan teks secara seimbang.

Komponen ini cocok untuk menampilkan daftar konten seperti berita, artikel, atau informasi umum.

•Elemen utama: Gambar, judul, deskripsi singkat, dan tombol CTA.
•Tujuan: Menyajikan informasi dengan proporsi yang harmonis antara media visual dan teks.

Overlay Card

Gunakan Overlay Card untuk menampilkan teks dan tombol aksi di atas gambar dengan efek gradien overlay.

Komponen ini ideal untuk konten visual seperti banner promosi, artikel unggulan, atau preview media.

•Elemen utama: Gambar latar, lapisan overlay gradient, judul, deskripsi singkat, dan tombol CTA.
•Tujuan: Menonjolkan elemen visual utama tanpa mengorbankan keterbacaan teks.

Horizontal Card

Gunakan Horizontal Card untuk menampilkan gambar dan konten dalam satu baris horizontal. Cocok digunakan ketika ruang vertikal terbatas atau untuk menampilkan hubungan visual antarelemen secara sejajar.

•Elemen utama: Gambar di sisi kiri/kanan, judul, deskripsi, tombol CTA, serta elemen tambahan seperti status atau label.
•Tujuan: Memberikan tampilan yang informatif, efisien, dan mudah dipindai untuk konten berdimensi panjang.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan 1–2 baris teks agar konten tetap ringkas dan tidak membuat card terasa berat.

❌ Dihindari

Hindari menumpuk terlalu banyak informasi dalam satu kartu.

✅ Disarankan

Pastikan kontras dan keterbacaan teks pada varian Overlay Card, terutama di atas gambar atau latar gelap.

❌ Dihindari

Jangan gunakan kombinasi warna atau efek yang membuat teks sulit terbaca pada gambar latar.

Penerapan

Landing Page

Gunakan Card Content pada halaman Landing Page untuk menampilkan informasi utama secara visual dan terstruktur.

Setiap card berfungsi sebagai ringkasan singkat dari topik, fitur, atau layanan penting yang dapat diakses pengguna untuk melihat detail lebih lanjut.

Panduan Ukuran (Card With Guideline)

Ukuran kartu disesuaikan agar tetap proporsional dan mudah dibaca di berbagai ukuran layar.

Kartu Vertikal memiliki lebar minimum 240px dan maksimum 400px.

Kartu Horizontal memiliki lebar minimum 320px dan maksimum 720px.

Ukuran ini menjaga proporsi visual agar tetap seimbang dan mudah dibaca di berbagai perangkat.

Gunakan lebar konsisten antar kartu dalam satu deretan grid untuk menjaga keseimbangan visual.

Spesifikasi