Card
No lift and no shadow. The border darkens and four registration marks appear at the corners.
Variant
Controls
▾
Code
import { } from "app/globals.css (.card-blueprint)";
<div className="card-blueprint border border-line bg-surface p-5">
<p className="font-label text-meta text-ink">Hover me</p>
<p className="font-body text-meta text-ink-2">The border darkens and four registration marks appear. Nothing lifts.</p>
</div>Every state
Usage
Tokens it uses
| --surface | … |
|---|---|
| --line | … |
| --ink | … |
| --ink-2 | … |
| --dur-quick | … |
Values are read live from the stylesheet, so they follow the site theme.
Spec
- Trigger
- Duration
- --dur-quick 160ms
- Reduced motion