Cards

Card digunakan untuk menampilkan kotak informasi dengan ikon, judul, dan konten. Cocok untuk menampilkan ringkasan, fitur, tautan, atau konten yang ingin ditonjolkan.

Preview

Sintaks

Gunakan :::card[Judul] dengan atribut opsional:

:::card[Judul Card]Konten di dalam card.::::::card[Judul Card]{icon="info"}Card dengan ikon dan judul.::::::card[Judul Card]{href="/docs/card"}Card yang bisa diklik.::::::card{icon="star"}Card tanpa judul.::::::cardCard minimalis.:::

Penggunaan

Card Dasar

Card paling sederhana dengan judul dan konten.

Card dengan Ikon

Tambahkan ikon menggunakan atribut icon.

Card Tanpa Judul

Card dengan ikon dan konten, tanpa judul.

Card Minimalis

Card tanpa ikon dan judul, hanya konten.

Card dengan Link

Gunakan atribut href untuk membuat seluruh card menjadi link.

Judul Card

Card ini bisa diklik dan mengarah ke halaman Card.

Atribut

Card menerima properti berikut:

icon

Tipe: string

Wajib: Tidak

Nama ikon yang ditampilkan di header card.

Ikon yang tersedia: star, info, link, book, learn, book-2.

Lihat Icons untuk daftar ikon lengkap.

href

Tipe: string

Wajib: Tidak

URL tujuan. Jika diberikan, seluruh card menjadi link yang bisa diklik.

class

Tipe: string

Wajib: Tidak

Class CSS tambahan untuk kustomisasi styling.

Variasi

Variasi	Sintaks	Struktur
Lengkap	:::card[Judul]{icon="star"}	Ikon + Judul + Body
Tanpa Ikon	:::card[Judul]	Judul + Body
Tanpa Judul	`:::card{icon=“info”}	Ikon + Body
Minimal	:::card	Body saja

Catatan

• Judul ditulis di dalam [] setelah card
• Jika href diberikan, seluruh card menjadi link yang bisa diklik
• Card bersifat block, harus ditulis di baris sendiri
• Ikon akan muncul di atas judul
• Card bisa berisi paragraf, list, code block, atau komponen lain di dalamnya
• Untuk menampilkan beberapa card bersebelahan, gunakan grid atau flexbox manual

Lihat Juga

• Icon — Ikon SVG dengan berbagai ukuran
• Badge — Label kecil dengan warna
• Button — Tombol dengan ikon
• Callout — Menyorot informasi penting