极简卡片
Minimal style
极简风格 — 去玻璃感、去阴影、靠排版呼吸。
state: idle
Minimal→
card · minimal · 灵感来源：去浮起、去模糊，靠排版和留白呼吸
Minimal style
极简风格 — 去玻璃感、去阴影、靠排版呼吸。
state: idle
Flat Minimal Card · 极简卡片 · 卡片 / Minimal
做一个 Flat Minimal Card（极简卡片）：
- 无浮起、无模糊、无阴影
- 靠排版与留白分层，hover 只提亮边框
- 小圆角 + 直边
用这些 CSS 变量：--color-surface --color-text --color-text-muted --color-text-subtle --dur-fast --fw-semibold --text-2xs
灵感参考：去浮起、去模糊，靠排版和留白呼吸--color-surface --color-text --color-text-muted --color-text-subtle --dur-fast --fw-semibold --text-2xs
（无必缺状态）
（尚未接进整页场景）
/r/card--minimal.json
免外壳的 markdown 版：/llms/components/card--minimal.md变量：--color-surface #ffffff。
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>
);
}
src/components/card/minimal/