To skin Bootstrap v4+ Cards.
<dl>
<dt>Bootstrap</dt>
<dd>
<div class="card">
<img class="card-img-top" src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
<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>
</div>
</div>
</dd>
<dt>TACC</dt>
<dd>
<div class="card card--plain card--image-top">
<img src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
<h4>Card title</h4>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.card {
max-width: 200px;
}
[class*="card--"] img {
width: 100%;
}
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "bootstrap4/components",
"shouldLoadBootstrap": true,
"shouldLoadCMS": true
}