Komponen / Tata letak
DescriptionList
Pasangan label–nilai untuk detail dokumen: customer, nomor PO, cara penagihan, project, pemilik. Gaya inset grouped — kartu putih radius 12, baris dipisah garis tipis — dirender semantik sebagai <dl>/<dt>/<dd>.
Import
tsx
import { DescriptionList } from '@divistant/circca-react';Props · DescriptionList
Juga menerima atribut <dl>. Isi lewat `items` atau children <DescriptionList.Item>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| items | DescriptionListItemData[] | — | Daftar { label, value, description?, numeric?, layout?, id? }. |
| layout | 'horizontal' | 'vertical' | 'horizontal' | Properti Figma "Layout". Horizontal = label kiri + nilai rata kanan (jarak 12); Vertical = label di atas nilai (jarak 2). |
| variant | 'inset' | 'plain' | 'inset' | Inset = kartu sendiri (bg/default, radius 12, garis tepi 0,5). Plain = tanpa kartu dan padding samping, untuk di dalam Card. |
| columns | 1 | 2 | 3 | 4 | 1 | Kisi atribut responsif (1 kolom di layar sempit). Lebih dari 1: item Vertical tanpa garis pemisah, jarak baris 20, kolom 24. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · DescriptionList.Item
Dirender sebagai <div> berisi <dt> dan <dd>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| label | ReactNode | — | Nama atribut (properti Figma "Label"), Callout fg/muted. |
| value | ReactNode | — | Nilai (properti Figma "Value"), Body fg/default. Kosong → "—". Bisa juga ditulis sebagai children. |
| description | ReactNode | — | Baris kedua di bawah nilai, Footnote fg/muted: tanggal, nomor rujukan, keterangan. |
| numeric | boolean | false | Angka sejajar (tabular-nums) untuk nominal dan jumlah. |
| layout | 'horizontal' | 'vertical' | — | Menimpa layout daftar untuk satu baris (diabaikan dalam kisi `columns`). |
Sumber
Kode komponen ada di packages/react/src/components/description-list. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.