diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.5/components/card.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/docs/4.5/components/card.md | 42 |
1 files changed, 37 insertions, 5 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/card.md b/vendor/twbs/bootstrap/site/docs/4.5/components/card.md index 818396127..18e1c0fab 100644 --- a/vendor/twbs/bootstrap/site/docs/4.5/components/card.md +++ b/vendor/twbs/bootstrap/site/docs/4.5/components/card.md @@ -107,6 +107,20 @@ Create lists of content in a card with a flush list group. {% endcapture %} {% include example.html content=example %} +{% capture example %} +<div class="card" style="width: 18rem;"> + <ul class="list-group list-group-flush"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item">Vestibulum at eros</li> + </ul> + <div class="card-footer"> + Card footer + </div> +</div> +{% endcapture %} +{% include example.html content=example %} + ### Kitchen sink Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. @@ -356,9 +370,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 +404,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 |