mirror of
https://github.com/awizemann/scarf.git
synced 2026-05-10 10:36:35 +00:00
17 lines
1.4 KiB
HTML
17 lines
1.4 KiB
HTML
|
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Spacing scale</title>
|
||
|
|
<link rel="stylesheet" href="_preview.css"></head>
|
||
|
|
<body>
|
||
|
|
<div class="card-root">
|
||
|
|
<div class="label">Spacing · 4-base scale</div>
|
||
|
|
<div class="col" style="gap:6px">
|
||
|
|
<div class="row" style="gap:10px"><div style="width:4px;height:14px;background:var(--accent)"></div><div class="mono">4 · 1 · inline gaps</div></div>
|
||
|
|
<div class="row" style="gap:10px"><div style="width:8px;height:14px;background:var(--accent)"></div><div class="mono">8 · 2 · button padding y</div></div>
|
||
|
|
<div class="row" style="gap:10px"><div style="width:12px;height:14px;background:var(--accent)"></div><div class="mono">12 · 3 · card padding</div></div>
|
||
|
|
<div class="row" style="gap:10px"><div style="width:16px;height:14px;background:var(--accent)"></div><div class="mono">16 · 4 · view padding</div></div>
|
||
|
|
<div class="row" style="gap:10px"><div style="width:20px;height:14px;background:var(--accent)"></div><div class="mono">20 · 5 · section gap</div></div>
|
||
|
|
<div class="row" style="gap:10px"><div style="width:24px;height:14px;background:var(--accent)"></div><div class="mono">24 · 6 · header gap</div></div>
|
||
|
|
<div class="row" style="gap:10px"><div style="width:32px;height:14px;background:var(--accent)"></div><div class="mono">32 · 8 · page-level</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body></html>
|