Figure

Use Figure

Figure is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Figure, Surface } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Figure caption="A calm foundation for the next idea."><Surface padding="6">Project preview</Surface></Figure>
    </FloodRoot>
  );
}

Design notes

• Composes native figure and figcaption. The host supplies the image, chart, code or other self-contained content, including its own alt text or accessible name.
• captionPosition controls DOM reading order as well as placement. Caption content may contain links. Native hidden, dir, lang, style and ref target the figure.
• Compatible addition in 0.2.5. Uses existing Flood semantic tokens and relative geometry.

API reference