Use the example shortcode in more places

Now, it's safe to do use it since it covers more cases
twbs · Nov 19, 2020 · 052f72d · 052f72d
1 parent 764184f
commit 052f72d
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 176 deletions.
diff --git a/site/content/docs/4.5/components/card.md b/site/content/docs/4.5/components/card.md
@@ -352,28 +352,9 @@ Cards include a few options for working with images. Choose from appending "imag
 
 Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
 
-<div class="bd-example">
-  <div class="card mb-3">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
-    <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-  </div>
-  <div class="card">
-    <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-    {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
-  </div>
-</div>
-
-```html
+{{< example >}}
 <div class="card mb-3">
-  <img src="..." class="card-img-top" alt="...">
+  {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -386,9 +367,9 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
-  <img src="..." class="card-img-bottom" alt="...">
+  {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
 </div>
-```
+{{< /example >}}
 
 ### Image overlays
 

diff --git a/site/content/docs/4.5/content/images.md b/site/content/docs/4.5/content/images.md
@@ -10,13 +10,9 @@ toc: true
 
 Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
 
-<div class="bd-example">
-  {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
-</div>
-
-```html
-<img src="..." class="img-fluid" alt="Responsive image">
-```
+{{< example >}}
+{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+{{< /example >}}
 
 {{< callout warning >}}
 ##### SVG images and Internet Explorer
@@ -28,47 +24,28 @@ In Internet Explorer 10 and 11, SVG images with `.img-fluid` are disproportionat
 
 In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
 
-<div class="bd-example bd-example-images">
-  {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
-</div>
-
-```html
-<img src="..." alt="..." class="img-thumbnail">
-```
+{{< example >}}
+{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
+{{< /example >}}
 
 ## Aligning images
 
 Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
 
-<div class="bd-example bd-example-images">
-  {{< placeholder width="200" height="200" class="rounded float-left" >}}
-  {{< placeholder width="200" height="200" class="rounded float-right" >}}
-</div>
-
-```html
-<img src="..." class="rounded float-left" alt="...">
-<img src="..." class="rounded float-right" alt="...">
-```
-
-<div class="bd-example bd-example-images">
-  {{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
-</div>
-
-```html
-<img src="..." class="rounded mx-auto d-block" alt="...">
-```
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded float-left" >}}
+{{< placeholder width="200" height="200" class="rounded float-right" >}}
+{{< /example >}}
 
-<div class="bd-example bd-example-images">
-  <div class="text-center">
-    {{< placeholder width="200" height="200" class="rounded" >}}
-  </div>
-</div>
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
+{{< /example >}}
 
-```html
+{{< example >}}
 <div class="text-center">
-  <img src="..." class="rounded" alt="...">
+  {{< placeholder width="200" height="200" class="rounded" >}}
 </div>
-```
+{{< /example >}}
 
 
 ## Picture