25 lines
1.3 KiB
HTML
25 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Radii</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 24px 28px; box-sizing: border-box; display: flex; gap: 18px; align-items: flex-end; font-family: var(--font-sans); }
|
|
.cell { text-align: center; }
|
|
.box { width: 84px; height: 84px; background: var(--surface-container); }
|
|
.k { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--on-surface); }
|
|
.v { font-size: 11px; color: var(--on-surface-variant); letter-spacing: 0.04em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="cell"><div class="box" style="border-radius:0"></div><div class="k">none</div><div class="v">0</div></div>
|
|
<div class="cell"><div class="box" style="border-radius:6px"></div><div class="k">sm</div><div class="v">6px</div></div>
|
|
<div class="cell"><div class="box" style="border-radius:12px"></div><div class="k">md · default</div><div class="v">12px</div></div>
|
|
<div class="cell"><div class="box" style="border-radius:20px"></div><div class="k">lg</div><div class="v">20px</div></div>
|
|
<div class="cell"><div class="box" style="border-radius:9999px"></div><div class="k">full</div><div class="v">—</div></div>
|
|
</div>
|
|
</body>
|
|
</html>
|