Split .vr from stacks as a new helper

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index 13fb1bbb5d95f0b23a2f11ab9d87d96d6c9b0573..4a989f5a5c5614789bc8d06ca03f9b4077e7b692 100644 (file)
--- 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 bb0d4d55a832920277fbfb4e543024de64abbda9..6cd237ae6d654ed9ee710c9a04208e52afe3d634 100644 (file)
--- 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 (file)
index 0000000..37f8647
--- /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 41c0ac5462569d751e0aa5861e73120a45a4ea01..a93a80046079942f5c7d91c9fac072b5874309ea 100644 (file)
--- 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 (file)
index 0000000..8d0d614
--- /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 fa37b81972841deca4c1fb214571d21e129d8d9d..b4f63bfae027982ed52eb0382e77466883e8c134 100644 (file)
--- 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: