Adaptive Card

Cards

About

A surface container with header, title, description, body and footer slots for grouping related content, supporting elevated, grouped, nested and plain variants plus an optional interactive button mode.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Adaptive Card to your project and fits it to your theme.

Code

How Adaptive Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Card, {
  CardHeader,
  CardTitle,
  CardDescription,
  CardBody,
  CardFooter,
} from "@/components/ui/card";

export default function CardDemo() {
  return (
    <div className="may-root" style={{ padding: 32, minHeight: 320 }}>
      <div style={{ maxWidth: 420 }}>
        <Card>
          <CardHeader>
            <CardTitle>Cloud Storage</CardTitle>
            <CardDescription>18.4 GB of 50 GB used</CardDescription>
          </CardHeader>
          <CardBody>
            Photos and documents account for most of your storage. Upgrading
            gives every device on your account more room.
          </CardBody>
          <CardFooter>
            <button
              type="button"
              style={{
                background: "none",
                border: 0,
                font: "inherit",
                color: "var(--may-color-tint)",
                fontWeight: 600,
                padding: "var(--may-space-2) var(--may-space-3)",
                cursor: "pointer",
              }}
            >
              Not Now
            </button>
            <button
              type="button"
              style={{
                background: "var(--may-color-tint)",
                color: "var(--may-color-on-primary)",
                border: 0,
                borderRadius: "var(--may-radius-sm)",
                font: "inherit",
                fontWeight: 600,
                padding: "var(--may-space-2) var(--may-space-4)",
                cursor: "pointer",
              }}
            >
              Upgrade
            </button>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}