Move styles to docs CSS

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 4f031eec5c241f7c088be9c3384fe0973f271c57..18b2c192e7e20ec9aea6e0e9a9927e268ed82c95 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -164,10 +164,13 @@
     margin-top: .5rem;
     margin-bottom: .5rem;
   }
+}
 
-  // Responsive embed helpers
+// Ratio helpers
+.bd-example-ratios {
   .ratio {
     display: inline-block;
+    width: 10rem;
     color: $gray-600;
     background-color: $gray-100;
     border: $border-width solid $border-color;

diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md
index 6feaab248ec22eecdeaa95cdf0b2958de9a45b3a..10ea9bc39c79b377c229f6a7e58329d10dad2136 100644 (file)
--- a/site/content/docs/5.0/helpers/ratio.md
+++ b/site/content/docs/5.0/helpers/ratio.md
@@ -28,17 +28,17 @@ Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an asp
 
 Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
 
-{{< example html >}}
-<div class="ratio ratio-1x1" style="width: 10rem;">
+{{< example class="bd-example-ratios" >}}
+<div class="ratio ratio-1x1">
   <div class="ratio-item">1x1</div>
 </div>
-<div class="ratio ratio-4x3" style="width: 10rem;">
+<div class="ratio ratio-4x3">
   <div class="ratio-item">4x3</div>
 </div>
-<div class="ratio ratio-16x9" style="width: 10rem;">
+<div class="ratio ratio-16x9">
   <div class="ratio-item">16x9</div>
 </div>
-<div class="ratio ratio-21x9" style="width: 10rem;">
+<div class="ratio ratio-21x9">
   <div class="ratio-item">21x9</div>
 </div>
 {{< /example >}}
@@ -49,8 +49,8 @@ Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the se
 
 For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`.
 
-{{< example html >}}
-<div class="ratio" style="--aspect-ratio: 50%; width: 10rem;">
+{{< example class="bd-example-ratios" >}}
+<div class="ratio" style="--aspect-ratio: 50%;">
   <div class="ratio-item">2x1</div>
 </div>
 {{< /example >}}