<div class="card">
<img class="card-img-top" src="/placeholder/pictures/image.svg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>/* _card.scss:5 */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: $card-bg;
background-clip: border-box;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
> hr {
margin-right: 0;
margin-left: 0;
}
> .list-group:first-child {
.list-group-item:first-child {
@include border-top-radius($card-border-radius);
}
}
> .list-group:last-child {
.list-group-item:last-child {
@include border-bottom-radius($card-border-radius);
}
}
}
/* _card.scss:145 */
.card {
margin-bottom: $card-deck-margin;
}
/* _card.scss:154 */
.card {
display: flex;
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
flex-direction: column;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
}
/* _card.scss:190 */
+ .card {
margin-left: 0;
border-left: 0;
}
// Handle rounded corners
@if $enable-rounded {
&:first-child {
@include border-right-radius(0);
.card-img-top,
.card-header {
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
border-bottom-right-radius: 0;
}
}
/* _card.scss:257 */
.card {
margin-bottom: $card-columns-margin;
}
/* _card.scss:267 */
.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
}Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
An online editor for busy developers.
© 2024 Shuffle. All rights reserved.
