diff options
| author | Mark Otto <markdotto@gmail.com> | 2020-09-23 02:33:18 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2020-09-23 23:30:11 +0300 |
| commit | 3b8c17029f605726bdb65bd277ac142aec0d37ae (patch) | |
| tree | 1992b858185084515ccf1e3e3ad42c80bc38d02a /site/content/docs/5.0/helpers | |
| parent | fe38a85839056d951d37fa3092eb5125b50a678d (diff) | |
Move styles to docs CSS
Diffstat (limited to 'site/content/docs/5.0/helpers')
| -rw-r--r-- | site/content/docs/5.0/helpers/ratio.md | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md index 6feaab248e..10ea9bc39c 100644 --- 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 >}} |