* revert #23108, which had no bug but was a problem with the example code
* add example to the docs for future proofing
* move it up
</div>
{% endexample %}
+{% example html %}
+<div class="card" style="width: 20rem;">
+ <div class="card-header">
+ 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>
+ </ul>
+</div>
+{% endexample %}
+
### 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.
.list-group-flush {
.list-group-item {
border-right: 0;
- border-bottom: 0;
border-left: 0;
border-radius: 0;
-
- &:first-child {
- border-top: 0;
- }
}
&:first-child {