diff options
| author | Gaël Poupard <ffoodd@users.noreply.github.com> | 2020-05-29 18:01:40 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-05-29 18:01:40 +0300 |
| commit | 6f4d9fff029a2a285c7cdee749bd7e21ae2c4b18 (patch) | |
| tree | 2c02c3595e662ce1ab2fd95754faafc0ee461f81 /site/docs | |
| parent | daa01aacb522553521f942ed8ab93e9282c03c88 (diff) | |
docs(cards): fix card-img-bottom example (#30925)
Diffstat (limited to 'site/docs')
| -rw-r--r-- | site/docs/4.5/components/card.md | 28 |
1 files changed, 23 insertions, 5 deletions
diff --git a/site/docs/4.5/components/card.md b/site/docs/4.5/components/card.md index 8183961273..b234eeaa5a 100644 --- a/site/docs/4.5/components/card.md +++ b/site/docs/4.5/components/card.md @@ -356,9 +356,28 @@ 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. -{% capture example %} +<div class="bd-example"> + <div class="card mb-3"> + {% include icons/placeholder.svg 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> + {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %} + </div> +</div> + +{% highlight html %} <div class="card mb-3"> - {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %} + <img src="..." class="card-img-top" alt="..."> <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> @@ -371,10 +390,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> - {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %} + <img src="..." class="card-img-bottom" alt="..."> </div> -{% endcapture %} -{% include example.html content=example %} +{% endhighlight %} ### Image overlays |