ImageFigure
Responsive imagery with a caption and a visible failure state.
Live — this one is real
Usage
import { ImageFigure } from "mizu-ui";
export function Example() {
return (
<ImageFigure
src="/images/field.svg"
alt="Warm diamonds arranged on a dark measurement field"
caption="Field study 01 — a repeatable spacing rhythm."
width={720}
height={360}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect content/Media.tsx
Source is included in the npm package under src/content/Media.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src / alt | string | — | Resource URL and meaningful image description. |
| caption | ReactNode | — | Optional visible context. |
| ...props | ImgHTMLAttributes | — | Native image attributes, including dimensions and srcSet. |
Accessibility
Native figure/image/caption; lazy by default. Supply dimensions to prevent shifts. Failed images retain the description.
Motion
Static media.