Components / core
Card
Panel Primitive - Optional Registration Marks
01 Preview
02 Usage
Flat panel - no shadow, no rounding. Depth comes from surface steps.
<Card marks refLabel="REF. A-04"><h3>Project name</h3>…</Card>
<Card interactive onClick={open}>…</Card>marks adds amber crosshairs at corners - reserve for the 1–2 most important panels per page.
03 Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| marks | boolean |
false |
Amber + marks outside each corner. |
| refLabel | string |
— | Tiny reference label in the top-right, e.g. "REF. A-04" |
| interactive | boolean |
false |
Hover: border brightens, surface raises. |
| children* | React.ReactNode |
— | — |
Also accepts every attribute of React.HTMLAttributes<HTMLDivElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.
04 Import
import { Card } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';