Caution with css and html

Author: bobvan

assets/css/style.scss

@@ -108,3 +108,29 @@
   }
 }
 
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.alert-caution {
+  color: #856404;
+  background-color: #fff3cd;
+  border-color: #ffeeba;
+}
+.alert-info {
+  color: #0c5460;
+  background-color: #d1ecf1;
+  border-color: #bee5eb;
+}
+.alert-success {
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
+.alert-danger {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}

index.md

@@ -24,8 +24,9 @@ on your MCU.
 
 ### Install
 
-> [!CAUTION]
-> Installing MicroPython will erase everything in the the MCU flash chip.
+<div class="alert alert-danger">
+    <strong>Caution:</strong>Installing MicroPython will erase everything in the the MCU flash chip.
+</div>
 
 After completing the pre-install checklist above,
 select a build for a generic board with your flash and RAM size, or for a specific board: