Card

Wadah untuk mengelompokkan informasi yang saling terkait, dengan ruang header, isi, dan footer.

Dasar

Isi title dan description untuk header sederhana. Slot default menampung isi bebas; bagian yang tidak dipakai tidak dibuat.

Jadwal pickup

Pengangkutan rutin untuk kantor Bekasi.

Senin, 21 September · 09.00–11.00 WIB

Pisahkan sampah sesuai jenisnya sebelum armada tiba.

Variant

Outline memakai border dengan permukaan terangkat. Soft memakai latar surface. Elevated menambahkan bayangan untuk memberi kedalaman.

outline

Ringkasan informasi dalam satu kelompok.

soft

Ringkasan informasi dalam satu kelompok.

elevated

Ringkasan informasi dalam satu kelompok.

Header, footer, dan aksi

Slot header menggantikan title dan description. Susun Badge, teks, dan Button sesuai kebutuhan. Tombol atau link di dalam kartu tetap menjadi target interaksi yang jelas.

Pickup kantor Bekasi

Jadwal berikutnya · 21 September

Terkonfirmasi

Waktu penjemputan: 09.00–11.00 WIB
Jenis layanan: Sampah terpilah

Butuh mengubah jadwal?

Lihat contoh tombol

Padding

Padding diterapkan ke setiap bagian: sm untuk tampilan padat, md (default) untuk umum, dan lg untuk ruang lebih luas. md dan lg menyesuaikan layar kecil.

Padding sm

Ruang di setiap bagian kartu.

Padding md

Ruang di setiap bagian kartu.

Padding lg

Ruang di setiap bagian kartu.

Konten tanpa padding

Gunakan padding="none" ketika konten mengatur ruangnya sendiri, seperti daftar atau tabel. Kartu tidak memotong konten; gambar di tepi perlu diberi radius yang sesuai.

Kertas dan kardus
Botol plastik
Kaleng aluminium

API

Props

Prop	Tipe	Default	Keterangan
as	'div' \| 'article' \| 'section'	'div'	Elemen pembungkus sesuai makna konten.
variant	'outline' \| 'soft' \| 'elevated'	'outline'	Permukaan, border, dan bayangan kartu.
padding	'none' \| 'sm' \| 'md' \| 'lg'	'md'	Ruang dalam header, isi, dan footer. none menyerahkan ruang ke konten.
title	string	—	Judul pada header bawaan.
description	string	—	Penjelasan di bawah judul.
title-tag	'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p'	'h3'	Tingkat judul sesuai struktur halaman; hanya untuk header bawaan.

Slots

Slot	Tipe	Default	Keterangan
default	—	—	Isi utama kartu.
header	—	—	Header khusus; menggantikan props title dan description.
footer	—	—	Aksi atau informasi tambahan di bawah isi.

Tidak ada event khusus. Atribut HTML dan class tata letak diteruskan ke elemen pembungkus.