3 files changed, 37 insertions, 0 deletions
diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 6ff316056..7981d4fcf 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -58,6 +58,22 @@
     })
   }
 
+  var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
+  var alertTrigger = document.getElementById('liveAlertBtn')
+
+  function alert(message, type) {
+    var wrapper = document.createElement('div')
+    wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
+
+    alertPlaceholder.append(wrapper)
+  }
+
+  if (alertTrigger) {
+    alertTrigger.addEventListener('click', function () {
+      alert('Nice, you triggered this alert message!', 'success')
+    })
+  }
+
   // Demos within modals
   document.querySelectorAll('.tooltip-test')
     .forEach(function (tooltip) {
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index e831b1609..8fbfc06c5 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -23,6 +23,21 @@
   background-color: rgba(255, 0, 0, .1);
 }
 
+.bd-example-cssgrid {
+  text-align: center;
+
+  .grid + .grid {
+    margin-top: 1rem;
+  }
+
+  .grid > * {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    background-color: rgba(255, 0, 255, .1);
+    border: 1px solid rgba(255, 0, 255, .25);
+  }
+}
+
 .bd-highlight {
   background-color: rgba($bd-purple, .15);
   border: 1px solid rgba($bd-purple, .15);
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index e3066ed2e..8b7bc99a1 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -28,6 +28,12 @@
 @import "../../../scss/variables";
 @import "../../../scss/mixins";
 
+// fusv-disable
+$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
+$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
+// fusv-enable
+@import "../../../scss/grid";
+
 // Load docs components
 @import "variables";
 @import "navbar";