Cards

Judul Kartu

Ini adalah cara menggunakan kartu dengan ikon dan tautan. Mengklik kartu ini membawa Anda ke halaman Kolom.

Card Example

<Card title="Click on me" icon="text" href="/components/columns">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

Kartu horizontal

Tambahkan properti horizontal untuk menampilkan kartu secara horizontal.

Kartu Horizontal

Ini adalah contoh kartu horizontal

Kartu gambar

Tambahkan properti img untuk menampilkan gambar di bagian atas kartu.

Kartu Gambar

Ini adalah contoh kartu dengan gambar

Kartu tautan

Anda dapat menyesuaikan CTA dan apakah akan menampilkan panah pada kartu atau tidak. Secara default, panah hanya akan ditampilkan untuk tautan eksternal.

Kartu tautan

Ini adalah cara menggunakan kartu dengan ikon dan tautan. Mengklik kartu ini membawa Anda ke halaman Kolom.

Klik di sini

Card Example

<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

Mengelompokkan kartu

Anda dapat mengelompokkan kartu dalam columns.

Kartu Pertama

Ini adalah kartu pertama.

Kartu Kedua

Ini adalah kartu kedua.

Props

title · string · required

Judul kartu

icon · string or svg

Ikon Font Awesome icon, Lucide icon, atau kode SVG dalam icon={}

iconType · string

Salah satu dari regular, solid, light, thin, sharp-solid, duotone, brands

color · string

Warna ikon sebagai kode hex

href · string

URL yang akan dinavigasi pengguna saat mengklik kartu

horizontal · boolean

Membuat kartu lebih ringkas dan horizontal

img · string

URL atau path lokal ke gambar yang akan ditampilkan di bagian atas kartu

cta · string

Label untuk tombol aksi

arrow · boolean

Mengaktifkan atau menonaktifkan ikon panah tautan