1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="_card.css" />
6 <style>
7 .grid {
8 display: grid;
9 grid-template-columns: repeat(5, 1fr);
10 gap: 12px;
11 }
12 .cell {
13 background: var(--alc-bg-elev-1);
14 border: 1px solid var(--alc-hairline);
15 border-radius: 8px;
16 padding: 14px;
17 text-align: center;
18 }
19 .dot {
20 width: 28px;
21 height: 28px;
22 border-radius: 50%;
23 margin: 0 auto 10px;
24 }
25 .label {
26 font-family: var(--alc-font-mono);
27 font-size: 10px;
28 color: var(--alc-fg-3);
29 text-transform: uppercase;
30 letter-spacing: 0.06em;
31 }
32 .name {
33 font-family: var(--alc-font-sans);
34 font-size: 13px;
35 color: var(--alc-fg-1);
36 font-weight: 600;
37 margin-top: 2px;
38 }
39 .hex {
40 font-family: var(--alc-font-mono);
41 font-size: 10px;
42 color: var(--alc-fg-4);
43 margin-top: 2px;
44 }
45 </style>
46 </head>
47 <body>
48 <div class="card">
49 <div class="grid">
50 <div class="cell">
51 <div class="dot" style="background: var(--alc-success)"></div>
52 <div class="label">plan: create</div>
53 <div class="name">Success</div>
54 <div class="hex">#5C7A3E</div>
55 </div>
56 <div class="cell">
57 <div class="dot" style="background: var(--alc-warn)"></div>
58 <div class="label">plan: update</div>
59 <div class="name">Warn</div>
60 <div class="hex">#D49A2A</div>
61 </div>
62 <div class="cell">
63 <div class="dot" style="background: var(--alc-danger)"></div>
64 <div class="label">plan: replace</div>
65 <div class="name">Danger</div>
66 <div class="hex">#B3462E</div>
67 </div>
68 <div class="cell">
69 <div class="dot" style="background: var(--alc-info)"></div>
70 <div class="label">info</div>
71 <div class="name">Info</div>
72 <div class="hex">#4A7A8A</div>
73 </div>
74 <div class="cell">
75 <div class="dot" style="background: var(--alc-muted)"></div>
76 <div class="label">unchanged</div>
77 <div class="name">Muted</div>
78 <div class="hex">#A89572</div>
79 </div>
80 </div>
81 </div>
82 </body>
83</html>