1<!doctype html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Callouts</title>
6 <link rel="stylesheet" href="_card.css" />
7 <style>
8 .box {
9 border: 1px solid;
10 border-radius: 8px;
11 padding: 12px 14px;
12 margin-bottom: 10px;
13 display: flex;
14 gap: 10px;
15 }
16 .box .icon {
17 font-family: var(--alc-font-mono);
18 font-weight: 700;
19 flex-shrink: 0;
20 }
21 .box .body {
22 font-family: var(--alc-font-sans);
23 font-size: 13px;
24 line-height: 1.5;
25 color: var(--alc-fg-2);
26 }
27 .box strong {
28 color: var(--alc-fg-1);
29 font-weight: 600;
30 }
31 .tip {
32 border-color: rgba(92, 122, 62, 0.5);
33 background: rgba(92, 122, 62, 0.18);
34 }
35 .tip .icon {
36 color: var(--alc-accent-deep);
37 }
38 .note {
39 border-color: rgba(74, 122, 138, 0.5);
40 background: rgba(74, 122, 138, 0.18);
41 }
42 .note .icon {
43 color: var(--alc-info);
44 }
45 .warn {
46 border-color: rgba(179, 70, 46, 0.5);
47 background: rgba(179, 70, 46, 0.18);
48 }
49 .warn .icon {
50 color: var(--alc-danger);
51 }
52 </style>
53 </head>
54 <body>
55 <div class="card">
56 <div class="box tip">
57 <span class="icon">✓</span>
58 <span class="body"
59 ><strong>Tip.</strong> We recommend Bun for the best development
60 experience, but Node.js works too.</span
61 >
62 </div>
63 <div class="box note">
64 <span class="icon">i</span>
65 <span class="body"
66 ><strong>Note.</strong> By convention, Alchemy looks for
67 <code style="font-family: var(--alc-font-mono)">alchemy.run.ts</code>
68 at the root of your project.</span
69 >
70 </div>
71 <div class="box warn">
72 <span class="icon">!</span>
73 <span class="body"
74 ><strong>Alpha.</strong> alchemy is in alpha and not ready for
75 production use. Expect breaking changes.</span
76 >
77 </div>
78 </div>
79 </body>
80</html>