diff options
| -rw-r--r-- | scss/_helpers.scss | 1 | ||||
| -rw-r--r-- | scss/helpers/_stacks.scss | 9 | ||||
| -rw-r--r-- | scss/helpers/_vr.scss | 8 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/stacks.md | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/vertical-rule.md | 44 | ||||
| -rw-r--r-- | site/data/sidebar.yml | 1 |
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: |