Mors Card

Cards

About

A rounded content card with header, body, footer and media subcomponents for grouping related information in a panel or grid.

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

Code

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

Usage.tsx

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

export default function InteractiveCardDemo() {
  return (
    <div
      className="mors-scope flex min-h-screen w-full items-center justify-center p-10"
      style={{
        background: "var(--mors-color-canvas)",
        color: "var(--mors-color-text)",
      }}
    >
      <div className="grid w-full max-w-2xl gap-6 sm:grid-cols-2">
        <Card hover>
          <CardHeader
            title="Hover"
            subtitle="Optional lift, not a click target"
          />
          <CardBody>
            Use when a card should respond to the pointer without implying it is
            a button.
          </CardBody>
        </Card>
        <Card interactive role="button" tabIndex={0}>
          <CardHeader
            title="Interactive"
            subtitle="Hover and press me"
            actions={
              <span
                style={{
                  padding: "2px 10px",
                  borderRadius: "999px",
                  background: "var(--mors-color-surface-sunken)",
                  color: "var(--mors-color-text-secondary)",
                  fontSize: "var(--mors-text-xs)",
                }}
              >
                New
              </span>
            }
          />
          <CardBody>
            Adds lift on hover; wire your own onClick and role.
          </CardBody>
          <CardFooter>
            <span
              style={{
                fontSize: "var(--mors-text-sm)",
                color: "var(--mors-color-accent)",
              }}
            >
              Open →
            </span>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}