30 lines
1.8 KiB
HTML
30 lines
1.8 KiB
HTML
<!-- @dsCard group="Spacing" viewport="700x150" name="Radii & elevation" subtitle="Tight corners; border-led elevation on dark" -->
|
|
<!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:22px 24px;display:flex;gap:30px}
|
|
.grp{display:flex;gap:14px;align-items:flex-end}
|
|
.box{width:60px;height:60px;background:var(--ctv-surface-2);border:1px solid var(--border-hairline);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
|
|
.v{font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);color:var(--text-disabled)}
|
|
.sep{width:1px;background:var(--border-hairline);align-self:stretch}
|
|
</style></head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="grp">
|
|
<div class="box" style="border-radius:var(--radius-xs)"><span class="v">3</span></div>
|
|
<div class="box" style="border-radius:var(--radius-sm)"><span class="v">5</span></div>
|
|
<div class="box" style="border-radius:var(--radius-md)"><span class="v">7</span></div>
|
|
<div class="box" style="border-radius:var(--radius-lg)"><span class="v">10</span></div>
|
|
<div class="box" style="border-radius:var(--radius-pill);width:80px"><span class="v">pill</span></div>
|
|
</div>
|
|
<div class="sep"></div>
|
|
<div class="grp">
|
|
<div class="box" style="border-radius:var(--radius-md);box-shadow:var(--shadow-sm)"><span class="v">sm</span></div>
|
|
<div class="box" style="border-radius:var(--radius-md);box-shadow:var(--shadow-md)"><span class="v">md</span></div>
|
|
<div class="box" style="border-radius:var(--radius-md);box-shadow:var(--shadow-pop)"><span class="v">pop</span></div>
|
|
<div class="box" style="border-radius:var(--radius-md);box-shadow:var(--shadow-lg)"><span class="v">lg</span></div>
|
|
</div>
|
|
</div>
|
|
</body></html>
|