18 lines
1.8 KiB
HTML
18 lines
1.8 KiB
HTML
|
<!doctype html><html><head><meta charset="utf-8"><title>Spacing</title><link rel="stylesheet" href="_card.css"></head><body>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="t-label">4px grid · sp-1 → sp-12</div>
|
|||
|
|
<div class="card-row" style="align-items:flex-end;gap:10px">
|
|||
|
|
<div style="text-align:center"><div style="width:4px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">4</div></div>
|
|||
|
|
<div style="text-align:center"><div style="width:8px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">8</div></div>
|
|||
|
|
<div style="text-align:center"><div style="width:12px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">12</div></div>
|
|||
|
|
<div style="text-align:center"><div style="width:16px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">16</div></div>
|
|||
|
|
<div style="text-align:center"><div style="width:20px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">20</div></div>
|
|||
|
|
<div style="text-align:center"><div style="width:24px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">24</div></div>
|
|||
|
|
<div style="text-align:center"><div style="width:32px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">32</div></div>
|
|||
|
|
<div style="text-align:center"><div style="width:40px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">40</div></div>
|
|||
|
|
<div style="text-align:center"><div style="width:48px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">48</div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="t-meta">Card padding 16–20 · row vertical 8–10 · section gap 24–32 · modal padding 24.</div>
|
|||
|
|
</div>
|
|||
|
|
</body></html>
|