diff options
Diffstat (limited to 'site/content/docs/5.0/components/card.md')
| -rw-r--r-- | site/content/docs/5.0/components/card.md | 34 |
1 files changed, 20 insertions, 14 deletions
diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index 89608628b..48f54f0c2 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -81,9 +81,9 @@ Create lists of content in a card with a flush list group. {{< 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> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> </div> {{< /example >}} @@ -94,9 +94,9 @@ Create lists of content in a card with a flush list group. Featured </div> <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> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> </div> {{< /example >}} @@ -104,9 +104,9 @@ Create lists of content in a card with a flush list group. {{< 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> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> <div class="card-footer"> Card footer @@ -126,9 +126,9 @@ Mix and match multiple content types to create the card you need, or throw every <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <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> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> <div class="card-body"> <a href="#" class="card-link">Card link</a> @@ -174,7 +174,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements. </div> <div class="card-body"> <blockquote class="blockquote mb-0"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> @@ -417,7 +417,7 @@ Cards include various options for customizing their backgrounds, borders, and co ### Background and color -Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to change the appearance of a card. +Use [text color]({{< docsref "/utilities/colors" >}}) and [background utilities]({{< docsref "/utilities/background" >}}) to change the appearance of a card. {{< example >}} {{< card.inline >}} @@ -721,3 +721,9 @@ Just like with card groups, card footers will automatically line up. ### Masonry In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started. + +## Sass + +### Variables + +{{< scss-docs name="card-variables" file="scss/_variables.scss" >}} |