diff --git a/guide/src/format/mdbook.md b/guide/src/format/mdbook.md
index 2872b2501f..45fb506a1e 100644
--- a/guide/src/format/mdbook.md
+++ b/guide/src/format/mdbook.md
@@ -314,3 +314,51 @@ contents (sidebar) by including a `\{{#title ...}}` near the top of the page.
```hbs
\{{#title My Title}}
```
+
+## HTML classes provided by mdBook
+
+
+
+### `class="left"` and `"right"`
+
+These classes are provided by default, for inline HTML to float images.
+
+```html
+
+```
+
+### `class="hidden"`
+
+HTML tags with class `hidden` will not be shown.
+
+```html
+
This will not be seen.
+```
+
+This will not be seen.
+
+### `class="warning"`
+
+To make a warning or similar note stand out, wrap it in a warning div.
+
+```html
+
+
+This is a bad thing that you should pay attention to.
+
+Warning blocks should be used sparingly in documentation, to avoid "warning
+fatique," where people are trained to ignore them because they usually don't
+matter for what they're doing.
+
+
+```
+
+
+
+This is a bad thing that you should pay attention to.
+
+Warning blocks should be used sparingly in documentation, to avoid "warning
+fatique," where people are trained to ignore them because they usually don't
+matter for what they're doing.
+
+
diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index 7e746d2728..e7d20da725 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -156,6 +156,29 @@ blockquote {
border-block-end: .1em solid var(--quote-border);
}
+.warning {
+ margin: 20px;
+ padding: 0 20px;
+ border-inline-start: 2px solid var(--warning-border);
+}
+
+.warning:before {
+ position: absolute;
+ width: 3rem;
+ height: 3rem;
+ margin-inline-start: calc(-1.5rem - 21px);
+ content: "ⓘ";
+ text-align: center;
+ background-color: var(--bg);
+ color: var(--warning-border);
+ font-weight: bold;
+ font-size: 2rem;
+}
+
+blockquote .warning:before {
+ background-color: var(--quote-bg);
+}
+
kbd {
background-color: var(--table-border-color);
border-radius: 4px;
diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
index 59fcda88f4..10a7590944 100644
--- a/src/theme/css/variables.css
+++ b/src/theme/css/variables.css
@@ -38,6 +38,8 @@
--quote-bg: hsl(226, 15%, 17%);
--quote-border: hsl(226, 15%, 22%);
+ --warning-border: #ff8e00;
+
--table-border-color: hsl(210, 25%, 13%);
--table-header-bg: hsl(210, 25%, 28%);
--table-alternate-bg: hsl(210, 25%, 11%);
@@ -80,6 +82,8 @@
--quote-bg: hsl(234, 21%, 18%);
--quote-border: hsl(234, 21%, 23%);
+ --warning-border: #ff8e00;
+
--table-border-color: hsl(200, 7%, 13%);
--table-header-bg: hsl(200, 7%, 28%);
--table-alternate-bg: hsl(200, 7%, 11%);
@@ -122,6 +126,8 @@
--quote-bg: hsl(197, 37%, 96%);
--quote-border: hsl(197, 37%, 91%);
+ --warning-border: #ff8e00;
+
--table-border-color: hsl(0, 0%, 95%);
--table-header-bg: hsl(0, 0%, 80%);
--table-alternate-bg: hsl(0, 0%, 97%);
@@ -164,6 +170,8 @@
--quote-bg: hsl(226, 15%, 17%);
--quote-border: hsl(226, 15%, 22%);
+ --warning-border: #ff8e00;
+
--table-border-color: hsl(226, 23%, 16%);
--table-header-bg: hsl(226, 23%, 31%);
--table-alternate-bg: hsl(226, 23%, 14%);
@@ -206,6 +214,8 @@
--quote-bg: hsl(60, 5%, 75%);
--quote-border: hsl(60, 5%, 70%);
+ --warning-border: #ff8e00;
+
--table-border-color: hsl(60, 9%, 82%);
--table-header-bg: #b3a497;
--table-alternate-bg: hsl(60, 9%, 84%);
@@ -249,6 +259,8 @@
--quote-bg: hsl(234, 21%, 18%);
--quote-border: hsl(234, 21%, 23%);
+ --warning-border: #ff8e00;
+
--table-border-color: hsl(200, 7%, 13%);
--table-header-bg: hsl(200, 7%, 28%);
--table-alternate-bg: hsl(200, 7%, 11%);