Card

Use Card

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

"use client";

import { FloodRoot, Card, Button, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Card title="Project details" description="Keep your team in sync."
        footer={<Button variant="subtle">Open project</Button>}>
        <Text as="p" size="compact">A calm place for the next idea.</Text>
      </Card>
    </FloodRoot>
  );
}

Design notes

• Card composes Surface with optional title, description, header actions, children and footer. Missing slots add no empty wrapper or reserved space.
• Use Surface for unstructured containment; use Card when its header/body/footer structure is useful. Card is a noninteractive div, not a button or link. Put named actions inside.
• Title uses Heading at headingLevel (2 by default); choose the level according to the page. Supply phrasing content for the title. Description accepts supporting React content.
• Density compact/comfortable controls padding and section rhythm using existing semantic spacing. Header actions wrap naturally; content is never clipped to the radius.
• Root HTMLDivElement ref and native div props/style/className target the surface. The title prop is content, not the native HTML tooltip attribute. Available in 0.2.4.

API reference