From 6f4d9fff029a2a285c7cdee749bd7e21ae2c4b18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Fri, 29 May 2020 17:01:40 +0200 Subject: [PATCH] docs(cards): fix card-img-bottom example (#30925) --- site/docs/4.5/components/card.md | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/site/docs/4.5/components/card.md b/site/docs/4.5/components/card.md index 81839612736e..b234eeaa5aa2 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 %} +
+
+ {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %} +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+ {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %} +
+
+ +{% highlight html %}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %} + ...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

@@ -371,10 +390,9 @@ Similar to headers and footers, cards can include top and bottom "image caps"—

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

- {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %} + ...
-{% endcapture %} -{% include example.html content=example %} +{% endhighlight %} ### Image overlays