Split .vr from stacks as a new helper

6 files changed, 55 insertions, 12 deletions

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index 13fb1bbb5..4a989f5a5 100644
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -6,3 +6,4 @@
 @import "helpers/visually-hidden";
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";
+@import "helpers/vr";
diff --git a/scss/helpers/_stacks.scss b/scss/helpers/_stacks.scss
index bb0d4d55a..6cd237ae6 100644
--- a/scss/helpers/_stacks.scss
+++ b/scss/helpers/_stacks.scss
@@ -13,12 +13,3 @@
   align-self: stretch;
 }
 // scss-docs-end stacks
-
-.vr {
-  display: inline-block;
-  align-self: stretch;
-  width: 1px;
-  min-height: 1em;
-  background-color: currentColor;
-  opacity: $hr-opacity;
-}
diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
new file mode 100644
index 000000000..37f864777
--- /dev/null
+++ b/scss/helpers/_vr.scss
@@ -0,0 +1,8 @@
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentColor;
+  opacity: $hr-opacity;
+}
diff --git a/site/content/docs/5.0/helpers/stacks.md b/site/content/docs/5.0/helpers/stacks.md
index 41c0ac546..a93a80046 100644
--- a/site/content/docs/5.0/helpers/stacks.md
+++ b/site/content/docs/5.0/helpers/stacks.md
@@ -42,9 +42,7 @@ Using horizontal margin utilities like `.ms-auto` as spacers:
 </div>
 {{< /example >}}
 
-<div class="d-flex" style="height: 200px;">
-<div class="vr"></div>
-</div>
+And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
 
 {{< example >}}
 <div class="hstack gap-3">
diff --git a/site/content/docs/5.0/helpers/vertical-rule.md b/site/content/docs/5.0/helpers/vertical-rule.md
new file mode 100644
index 000000000..8d0d6141f
--- /dev/null
+++ b/site/content/docs/5.0/helpers/vertical-rule.md
@@ -0,0 +1,44 @@
+---
+layout: docs
+title: Vertical rule
+description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
+group: helpers
+toc: true
+---
+
+## How it works
+
+Vertical rules are inspired by the `<hr>` element, allowing you to create vertical dividers in common layouts. They're styled just like `<hr>` elements:
+
+- They're `1px` wide
+- They have `min-height` of `1em`
+- Their color is set via `currentColor` and `opacity`
+
+Customize them with additional styles as needed.
+
+## Example
+
+{{< example >}}
+<div class="vr"></div>
+{{< /example >}}
+
+Vertical rules scale their height in flex layouts:
+
+{{< example >}}
+<div class="d-flex" style="height: 200px;">
+  <div class="vr"></div>
+</div>
+{{< /example >}}
+
+## With stacks
+
+They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border ms-auto">Second item</div>
+  <div class="vr"></div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index fa37b8197..b4f63bfae 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -92,6 +92,7 @@
     - title: Visually hidden
     - title: Stretched link
     - title: Text truncation
+    - title: Vertical rule
 
 - title: Utilities
   pages: