Komponen / Tata letak
Card
Wadah isi berjudul di halaman detail dan dashboard: judul + keterangan, aksi di kanan header, isi bebas, dan footer. Contoh: kartu Item, Termin pembayaran, dan "Perlu tindakan Anda" di detail PO.
Import
tsx
import { Card } from '@divistant/circca-react';Props
Juga menerima atribut <section>/<div>. Dengan `title`, kartu dirender sebagai <section aria-labelledby> ke judulnya; tanpa judul sebagai <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul kartu (properti Figma "Title"), gaya Headline. Header tampil bila title atau action diisi. |
| subtitle | ReactNode | — | Keterangan di bawah judul (properti Figma "Subtitle"), Callout fg/muted. |
| action | ReactNode | — | Aksi di kanan header (properti Figma "Action"): IconButton Ghost Small, Button size="sm", tautan, atau tenggat. |
| footer | ReactNode | — | Bagian bawah (properti Figma "Footer"): teks meta Footnote fg/muted, atau tombol. |
| elevation | 'flat' | 'raised' | 'flat' | Flat = garis tepi 0,5 border/muted. Raised = bayangan Elevation/1 tanpa garis tepi. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Tingkat heading judul, sesuaikan dengan struktur halaman. |
| flush | boolean | false | Isi menempel ke tepi kiri-kanan (dan bawah bila tanpa footer) — untuk tabel dan daftar. |
| children | ReactNode | — | Isi kartu (properti Figma "Content"). |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge), mis. lebar kartu. |
Sumber
Kode komponen ada di packages/react/src/components/card. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.