1<!doctype html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Radii</title>
6 <link rel="stylesheet" href="_card.css" />
7 <style>
8 .grid {
9 display: grid;
10 grid-template-columns: repeat(6, 1fr);
11 gap: 12px;
12 }
13 .cell {
14 text-align: center;
15 }
16 .box {
17 width: 72px;
18 height: 72px;
19 background: var(--alc-bg-elev-1);
20 border: 1px solid var(--alc-hairline-2);
21 margin: 0 auto 8px;
22 }
23 .name {
24 font-family: var(--alc-font-mono);
25 font-size: 11px;
26 color: var(--alc-fg-1);
27 }
28 .px {
29 font-family: var(--alc-font-mono);
30 font-size: 10px;
31 color: var(--alc-fg-4);
32 margin-top: 2px;
33 }
34 </style>
35 </head>
36 <body>
37 <div class="card">
38 <div class="grid">
39 <div class="cell">
40 <div class="box" style="border-radius: 2px"></div>
41 <div class="name">xs</div>
42 <div class="px">2</div>
43 </div>
44 <div class="cell">
45 <div class="box" style="border-radius: 4px"></div>
46 <div class="name">sm</div>
47 <div class="px">4</div>
48 </div>
49 <div class="cell">
50 <div class="box" style="border-radius: 8px"></div>
51 <div class="name">base</div>
52 <div class="px">8</div>
53 </div>
54 <div class="cell">
55 <div class="box" style="border-radius: 10px"></div>
56 <div class="name">md</div>
57 <div class="px">10</div>
58 </div>
59 <div class="cell">
60 <div class="box" style="border-radius: 12px"></div>
61 <div class="name">lg</div>
62 <div class="px">12</div>
63 </div>
64 <div class="cell">
65 <div class="box" style="border-radius: 16px"></div>
66 <div class="name">xl</div>
67 <div class="px">16</div>
68 </div>
69 </div>
70 </div>
71 </body>
72</html>