Proposal

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 6c6cc677f967c6de27c0a1370c3d6e78ec1dba75..25385cf8e05d12d9bbea175cba6dab88c3fb0e58 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -134,7 +134,7 @@
   background-color: rgba(var(--bd-violet-rgb), .15);
 }
 
-.bd-example-flex div {
+.bd-example-flex div:not(.vr) {
   background-color: rgba(var(--bd-violet-rgb), .15);
   border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }

diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md
index b8133ba4541289d33faf0c60f75e29e39d7acd16..2be6b30b4c0b7caf6b00b9304740972e45b90fd0 100644 (file)
--- a/site/content/docs/5.3/helpers/stacks.md
+++ b/site/content/docs/5.3/helpers/stacks.md
@@ -17,11 +17,11 @@ Heads up! Support for gap utilities with flexbox was recently added to Safari, s
 
 Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items.
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="vstack gap-3">
-  <div class="bg-body-tertiary border">First item</div>
-  <div class="bg-body-tertiary border">Second item</div>
-  <div class="bg-body-tertiary border">Third item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
@@ -29,32 +29,32 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul
 
 Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items.
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="hstack gap-3">
-  <div class="bg-body-tertiary border">First item</div>
-  <div class="bg-body-tertiary border">Second item</div>
-  <div class="bg-body-tertiary border">Third item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
 Using horizontal margin utilities like `.ms-auto` as spacers:
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="hstack gap-3">
-  <div class="bg-body-tertiary border">First item</div>
-  <div class="bg-body-tertiary border ms-auto">Second item</div>
-  <div class="bg-body-tertiary border">Third item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
 And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="hstack gap-3">
-  <div class="bg-body-tertiary border">First item</div>
-  <div class="bg-body-tertiary border ms-auto">Second item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2">Second item</div>
   <div class="vr"></div>
-  <div class="bg-body-tertiary border">Third item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 

diff --git a/site/content/docs/5.3/helpers/vertical-rule.md b/site/content/docs/5.3/helpers/vertical-rule.md
index f10a16d08e0b293ec0173d24785e54aab812715e..334eb3e0a45710196ab8e21d68f3bcd7819e7390 100644 (file)
--- a/site/content/docs/5.3/helpers/vertical-rule.md
+++ b/site/content/docs/5.3/helpers/vertical-rule.md
@@ -35,11 +35,11 @@ Vertical rules scale their height in flex layouts:
 
 They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="hstack gap-3">
-  <div class="bg-body-tertiary border">First item</div>
-  <div class="bg-body-tertiary border ms-auto">Second item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2 ms-auto">Second item</div>
   <div class="vr"></div>
-  <div class="bg-body-tertiary border">Third item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}