Figure

Numbered, Captioned Block Like a Paper Figure

01 Preview

02 Usage

Wraps diagrams/screenshots with a FIG. NN caption.

<Figure number="03" caption="Interaction mining pipeline, 2021">
  <img src="…" alt="Interaction mining pipeline" style={{ width: '100%', display: 'block' }} />
</Figure>

03 Props

Prop	Type	Default	Notes
number*	`string`	—	Zero-padded figure number, e.g. "03"
caption*	`string`	—	—
children*	`React.ReactNode`	—	—

Also accepts every attribute of React.HTMLAttributes<HTMLElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Figure } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';