# 极简卡片（Flat Minimal Card）

- 类型 / 材质：`card` / `minimal`（极简）
- 状态：done ｜ 最后提交：2026-10-30
- 灵感来源：去浮起、去模糊，靠排版和留白呼吸
- 依据标准：`/design#material` ｜ 组件页：`/showcase/component/card/minimal` ｜ 条目：`/r/card--minimal.json`
- 必缺状态：（无必缺状态）
- 整页场景：尚未接入

## 规格

- 无浮起、无模糊、无阴影
- 靠排版与留白分层，hover 只提亮边框
- 小圆角 + 直边

## 参数（CSS 变量）

`--color-surface` `--color-text` `--color-text-muted` `--color-text-subtle` `--dur-fast` `--fw-semibold` `--text-2xs`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `title` | `string` | 可选 | — |
| `subtitle` | `string` | 可选 | — |
| `children` | `ReactNode` | 可选 | — |
| `onClick` | `() => void` | 可选 | — |
| `className` | `string` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「极简卡片」— Flat Minimal Card（卡片 / Minimal）
灵感来源：去浮起、去模糊，靠排版和留白呼吸
规格：
- 无浮起、无模糊、无阴影
- 靠排版与留白分层，hover 只提亮边框
- 小圆角 + 直边
参数（CSS 变量）：--color-surface --color-text --color-text-muted --color-text-subtle --dur-fast --fw-semibold --text-2xs
必缺状态：（无必缺状态）
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/card/minimal · 标准 material /design#material · 调研笔记 /showcase/component/card/minimal#notes
```

## 调研笔记

import { type ReactNode } from 'react';

interface Props {
  title?: string;
  subtitle?: string;
  children?: ReactNode;
  onClick?: () => void;
  className?: string;
}

export function MinimalCard({
  title = '极简卡片',
  subtitle = 'Minimal · Subtitle',
  children,
  onClick,
  className = '',
}: Props) {
  return (
    <article
      onClick={onClick}
      className="
        relative
        p-6 rounded-md
        bg-[var(--color-surface)]
        border border-black/5
        transition-colors duration-[var(--dur-fast)]
        hover:border-black/15
        cursor-pointer
        ${className}
      "
    >
      <div className="flex items-center justify-between mb-4">
        <h3
          className="text-base"
          style={{ fontWeight: 'var(--fw-semibold)' }}
        >
          {title}
        </h3>
        <span className="
          size-1.5 rounded-full
          bg-[var(--color-text-subtle)]/50
        " />
      </div>

      <p className="text-xs text-[var(--color-text-muted)] mb-4">
        {subtitle}
      </p>

      <div className="
        py-4 min-h-[60px] flex items-center
        border-t border-black/5
      ">
        {children ?? (
          <div className="w-full space-y-2">
            <div className="h-1.5 rounded-full bg-black/10"></div>
            <div className="h-1.5 rounded-full bg-black/10 w-4/5"></div>
            <div className="h-1.5 rounded-full bg-black/10 w-3/5"></div>
          </div>
        )}
      </div>

      <div className="flex items-center justify-between pt-3 border-t border-black/5">
        <span className="text-[length:var(--text-2xs)] uppercase tracking-[0.18em] text-[var(--color-text-subtle)] font-mono">
          Minimal
        </span>
        <span className="text-xs text-[var(--color-text-muted)]">→</span>
      </div>
    </article>
  );
}