26 lines
1.7 KiB
HTML
26 lines
1.7 KiB
HTML
<!-- @dsCard group="Spacing" viewport="700x150" name="4px spacing scale" subtitle="From 2px to 56px on a 4px base grid" -->
|
|
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
|
|
.wrap{padding:24px;display:flex;align-items:flex-end;gap:14px}
|
|
.col{display:flex;flex-direction:column;align-items:center;gap:8px}
|
|
.bar{background:var(--ctv-accent);border-radius:2px;width:20px}
|
|
.v{font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);color:var(--text-secondary)}
|
|
</style></head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="col"><div class="bar" style="height:4px"></div><span class="v">2</span></div>
|
|
<div class="col"><div class="bar" style="height:8px"></div><span class="v">4</span></div>
|
|
<div class="col"><div class="bar" style="height:12px"></div><span class="v">6</span></div>
|
|
<div class="col"><div class="bar" style="height:16px"></div><span class="v">8</span></div>
|
|
<div class="col"><div class="bar" style="height:24px"></div><span class="v">12</span></div>
|
|
<div class="col"><div class="bar" style="height:32px"></div><span class="v">16</span></div>
|
|
<div class="col"><div class="bar" style="height:40px"></div><span class="v">20</span></div>
|
|
<div class="col"><div class="bar" style="height:48px"></div><span class="v">24</span></div>
|
|
<div class="col"><div class="bar" style="height:64px"></div><span class="v">32</span></div>
|
|
<div class="col"><div class="bar" style="height:80px"></div><span class="v">40</span></div>
|
|
<div class="col"><div class="bar" style="height:104px"></div><span class="v">56</span></div>
|
|
</div>
|
|
</body></html>
|