Here are my suggestions for the former panel style:
1. Split classes into card-primary-outline and card-primary-fill
SCSS
$primary: #0275d8;
$warning: #f0ad4e;
.card-primary {
&-outline {
border-color: $primary;
}
&-fill {
background-color: $primary;
color: #FFF;
}
}
.card-warning {
&-outline {
border-color: $warning;
}
&-fill {
background-color: $warning;
color: #FFF;
}
}Example https://jsbin.com/kifejew/edit?html,css,output
<div class="card card-primary-outline">
<div class="card-header card-primary-fill">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
2 days ago
</div>
</div>
<div class="card card-warning-outline">
<div class="card-header card-warning-fill">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-warning">Go somewhere</a>
</div>
<div class="card-footer">
2 days ago
</div>
</div>2. Split classes into card-primary-outline and card-primary-fill and add class card-primary-header
card-primary-fill can be added to every color class (like primary, warning etc.) and applies the right color.
SCSS
$primary: #0275d8;
$warning: #f0ad4e;
.card-primary {
&-outline {
border-color: $primary;
}
&-header {
background-color: $primary;
color: #FFF;
}
&-fill {
border-color: $primary;
background-color: $primary;
}
}
.card-warning {
&-outline {
border-color: $warning;
}
&-header {
background-color: $warning;
color: #FFF;
}
&-fill {
border-color: $warning;
background-color: $warning;
}
}Example https://jsbin.com/jixuyo/2/edit?html,css,output
<div class="card card-primary-outline">
<div class="card-header card-primary-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
2 days ago
</div>
</div>
<div class="card card-warning-fill card-inverse">
<div class="card-header card-warning-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-warning">Go somewhere</a>
</div>
<div class="card-footer">
2 days ago
</div>
</div>These are just suggestions.
Open for discussion :)
BTW, in the current v4 code there are some issues, if you use card-primary with card-headeror card-footer:
Here are my suggestions for the former panel style:
1. Split classes into
card-primary-outlineandcard-primary-fillSCSS
Example https://jsbin.com/kifejew/edit?html,css,output
2. Split classes into
card-primary-outlineandcard-primary-filland add classcard-primary-headercard-primary-fillcan be added to every color class (like primary, warning etc.) and applies the right color.SCSS
Example https://jsbin.com/jixuyo/2/edit?html,css,output
These are just suggestions.
Open for discussion :)
BTW, in the current v4 code there are some issues, if you use
card-primarywithcard-headerorcard-footer: