diff --git a/src/scss/_callouts.scss b/src/scss/_callouts.scss
new file mode 100644
index 000000000..3496a7481
--- /dev/null
+++ b/src/scss/_callouts.scss
@@ -0,0 +1,34 @@
+//
+// Callouts
+//
+
+.callout {
+  --#{$prefix}link-color-rgb: var(--#{$lte-prefix}callout-link);
+  --#{$prefix}code-color: var(--#{$lte-prefix}callout-code-color);
+
+  padding: 1.25rem;
+  color: var(--#{$lte-prefix}callout-color, inherit);
+  background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
+  border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
+
+  h4 {
+    margin-bottom: .25rem;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  + .callout {
+    margin-top: -.25rem;
+  }
+}
+
+// Variations
+@each $name, $color in $theme-colors {
+  .callout-#{$name} {
+    --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
+    --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
+    --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
+  }
+}
diff --git a/src/scss/parts/_core.scss b/src/scss/parts/_core.scss
index f7f1c9baa..d84a89a1d 100644
--- a/src/scss/parts/_core.scss
+++ b/src/scss/parts/_core.scss
@@ -9,4 +9,5 @@
 @import "../app-main";
 @import "../app-footer";
 @import "../dropdown";
+@import "../callouts";
 @import "../docs";