diff options
author | Mark Otto <markdotto@gmail.com> | 2021-06-23 08:22:02 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2021-07-17 01:11:40 +0300 |
commit | aee169d19288d78330be2df0960ea8924353f84f (patch) | |
tree | 57fbb9abac3ccd8443ac54fa07f14f982671aae4 /site/content/docs | |
parent | 2bc6de1f5ea85e2b1e228e56c96b339dc105b1c8 (diff) |
Split .vr from stacks as a new helper
Diffstat (limited to 'site/content/docs')
-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 |
2 files changed, 45 insertions, 3 deletions
diff --git a/site/content/docs/5.0/helpers/stacks.md b/site/content/docs/5.0/helpers/stacks.md index 41c0ac5462..a93a800460 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 0000000000..8d0d6141f8 --- /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 >}} |