17 lines
1.2 KiB
HTML
17 lines
1.2 KiB
HTML
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body{margin:0}
|
|
.wrap{background:var(--ground);padding:26px 30px;box-sizing:border-box;display:flex;gap:22px;align-items:flex-end;font-family:var(--font-body)}
|
|
.item{display:flex;flex-direction:column;gap:8px;align-items:center}
|
|
.box{width:78px;height:60px;background:var(--ground-raised);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="item"><div class="box" style="border-radius:2px"></div><span class="lab">xs · 2</span></div>
|
|
<div class="item"><div class="box" style="border-radius:4px"></div><span class="lab">sm · 4</span></div>
|
|
<div class="item"><div class="box" style="border-radius:8px"></div><span class="lab">md · 8</span></div>
|
|
<div class="item"><div class="box" style="border-radius:14px"></div><span class="lab">lg · 14</span></div>
|
|
<div class="item" style="align-self:center"><span class="lab" style="max-width:150px;text-align:left;line-height:1.5">Corners barely soften — much of the chrome is square-edged with hairline rules.</span></div>
|
|
</div>
|
|
</body></html>
|