カード
浮き上がりも影もありません。枠が濃くなり、四隅にトンボが現れます。
バリエーション
プロパティ
▾
コード
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">ホバーしてみてください</p>
<p className="font-body text-meta text-ink-2">枠が濃くなり、四隅にトンボが現れます。浮き上がりはしません。</p>
</div>すべての状態
使い方
使っているトークン
| --surface | … |
|---|---|
| --line | … |
| --ink | … |
| --ink-2 | … |
| --dur-quick | … |
値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。
仕様
- きっかけ
- 長さ
- --dur-quick 160ms
- 動きを減らす設定