diff --git a/lib/boxes.typ b/lib/boxes.typ
new file mode 100644
index 0000000..3af6759
--- /dev/null
+++ b/lib/boxes.typ
@@ -0,0 +1,32 @@
+
+#let tag-warning-box = html.elem.with("warning-box")
+
+#let warning-box(
+  title: [⚠️ Warning],
+  color: "red",
+  body
+) = {
+  ```raw-css
+  warning-box {
+    display: block;
+    border-left: .5em solid;
+    padding: 1em;
+    margin: 0.5em;
+
+    h4 {
+      margin-top: 0;
+      font-weight: bold;
+    }
+  }
+  ```
+  tag-warning-box(
+    attrs: (style: "border-left-color: " + color + ";"),
+  {
+    if title != none {
+      html.h4(
+        style: "color: " + color + ";", title
+      );
+    }
+    body
+  })
+}
diff --git a/lib/main.typ b/lib/main.typ
index 20cd1c1..44820f1 100644
--- a/lib/main.typ
+++ b/lib/main.typ
@@ -4,6 +4,7 @@
 #import "./summary.typ": summary, card-list
 #import "./states.typ": current-page-label, state-page-summaries
 #import "./pyscript.typ": state-use-pyscript, state-pyscript-data-list, state-pyscript-version, state-pyscript-interpreters, state-pyscript-default-interpreter, pyscript-show, pyscript-data
+#import "boxes.typ": *
 #import "./rss.typ": rss
 #import "./icons.typ"