Container with content and action(s) about a single subject.
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card |
.card |
add padding to content |
.c-card--plain |
.card--plain |
add background* |
.c-card--plain-hr-top |
.card--plain-hr-top |
prepend an <hr> |
.c-card--plain-hr-bottom |
.card--plain-hr-bottom |
append an <hr> |
.c-card--standard |
.card--standard |
add background + border* |
* Colors depend on card context/parent.
To support images at different positions:
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card--image-... |
.card--image-... |
position a single image |
.c-card--image-top |
.card--image-top |
position image to top |
.c-card--image-bottom |
.card--image-bottom |
position image to bottom |
.c-card--image-left |
.card--image-left |
position image to left |
.c-card--image-right |
.card--image-right |
position image to right |
Backup classes if c-card--standard automatic styles fail:
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card--standard-1 |
.card--standard-1 |
teal border, gray background |
.c-card--standard-2 |
.card--standard-2 |
teal border, white background |
.c-card--standard-3 |
.card--standard-3 |
brown border, white background |
<h2>Table of Contents</h2>
<nav class="c-nav">
<ul>
<li><a href="#section--null">Section (Default)</a></li>
<li><a href="#section--light">Section - Light</a></li>
<li><a href="#section--muted">Section - Muted</a></li>
<li><a href="#section--dark">Section - Dark</a></li>
</ul>
</nav>
<section class="o-section">
<h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
<section class="c-card-list">
<h3 id="card-image-transparent-default"><code>transparent</code> Card Image</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - <small>Embedded</small> Media top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - <small>Embedded</small> Media bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - <small>Embedded</small> Media right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - <small>Embedded</small> Media left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-default-link"><code>transparent</code> Card Image <strong>as</strong> Link</h3>
<a class="c-card c-card--transparent c-card--image-top " href="#">
<h3 id="card-image-top">
Card - Image top
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-bottom demo-disabled" href="#">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-right demo-disabled" href="#">
<h3 id="card-image-right">
Card - Image right
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-left demo-disabled" href="#">
<h3 id="card-image-left">
Card - Image left
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-default-link"><code>transparent</code> Card Image <strong>with</strong> Link</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-default-contact"><code>transparent</code> Contact Card with Image</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h4>
Bender Rodríguez
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</article>
<a class="c-card c-card--transparent c-card--image-top " href="#">
<h4>
Bender Rodríguez
</h4>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
<article class="c-card c-card--transparent c-card--image-top ">
<h4>
<a href="#">Bender Rodríguez</a>
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<a href="#">
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-default"><code>plain</code> Card Image</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - <small>Embedded</small> Media top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - <small>Embedded</small> Media bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - <small>Embedded</small> Media right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - <small>Embedded</small> Media left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-default-link"><code>plain</code> Card Image <strong>as</strong> Link</h3>
<a class="c-card c-card--plain c-card--image-top " href="#">
<h3 id="card-image-top">
Card - Image top
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-bottom demo-disabled" href="#">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-right demo-disabled" href="#">
<h3 id="card-image-right">
Card - Image right
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-left demo-disabled" href="#">
<h3 id="card-image-left">
Card - Image left
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-default-link"><code>plain</code> Card Image <strong>with</strong> Link</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-default-contact"><code>plain</code> Contact Card with Image</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h4>
Bender Rodríguez
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</article>
<a class="c-card c-card--plain c-card--image-top " href="#">
<h4>
Bender Rodríguez
</h4>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
<article class="c-card c-card--plain c-card--image-top ">
<h4>
<a href="#">Bender Rodríguez</a>
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<a href="#">
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
</article>
</section>
</section>
<hr>
<section class="o-section o-section--style-light">
<h2 id="section--light">Section - Light</h2>
<section class="c-card-list">
<h3 id="card-image-transparent-light"><code>transparent</code> Card Image</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - <small>Embedded</small> Media top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - <small>Embedded</small> Media bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - <small>Embedded</small> Media right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - <small>Embedded</small> Media left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-light-link"><code>transparent</code> Card Image <strong>as</strong> Link</h3>
<a class="c-card c-card--transparent c-card--image-top " href="#">
<h3 id="card-image-top">
Card - Image top
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-bottom demo-disabled" href="#">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-right demo-disabled" href="#">
<h3 id="card-image-right">
Card - Image right
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-left demo-disabled" href="#">
<h3 id="card-image-left">
Card - Image left
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-light-link"><code>transparent</code> Card Image <strong>with</strong> Link</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-light-contact"><code>transparent</code> Contact Card with Image</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h4>
Bender Rodríguez
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</article>
<a class="c-card c-card--transparent c-card--image-top " href="#">
<h4>
Bender Rodríguez
</h4>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
<article class="c-card c-card--transparent c-card--image-top ">
<h4>
<a href="#">Bender Rodríguez</a>
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<a href="#">
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-light"><code>plain</code> Card Image</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - <small>Embedded</small> Media top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - <small>Embedded</small> Media bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - <small>Embedded</small> Media right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - <small>Embedded</small> Media left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-light-link"><code>plain</code> Card Image <strong>as</strong> Link</h3>
<a class="c-card c-card--plain c-card--image-top " href="#">
<h3 id="card-image-top">
Card - Image top
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-bottom demo-disabled" href="#">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-right demo-disabled" href="#">
<h3 id="card-image-right">
Card - Image right
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-left demo-disabled" href="#">
<h3 id="card-image-left">
Card - Image left
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-light-link"><code>plain</code> Card Image <strong>with</strong> Link</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-light-contact"><code>plain</code> Contact Card with Image</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h4>
Bender Rodríguez
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</article>
<a class="c-card c-card--plain c-card--image-top " href="#">
<h4>
Bender Rodríguez
</h4>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
<article class="c-card c-card--plain c-card--image-top ">
<h4>
<a href="#">Bender Rodríguez</a>
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<a href="#">
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
</article>
</section>
</section>
<hr>
<section class="o-section o-section--style-muted">
<h2 id="section--muted">Section - Muted</h2>
<section class="c-card-list">
<h3 id="card-image-transparent-muted"><code>transparent</code> Card Image</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - <small>Embedded</small> Media top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - <small>Embedded</small> Media bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - <small>Embedded</small> Media right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - <small>Embedded</small> Media left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-muted-link"><code>transparent</code> Card Image <strong>as</strong> Link</h3>
<a class="c-card c-card--transparent c-card--image-top " href="#">
<h3 id="card-image-top">
Card - Image top
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-bottom demo-disabled" href="#">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-right demo-disabled" href="#">
<h3 id="card-image-right">
Card - Image right
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-left demo-disabled" href="#">
<h3 id="card-image-left">
Card - Image left
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-muted-link"><code>transparent</code> Card Image <strong>with</strong> Link</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-muted-contact"><code>transparent</code> Contact Card with Image</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h4>
Bender Rodríguez
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</article>
<a class="c-card c-card--transparent c-card--image-top " href="#">
<h4>
Bender Rodríguez
</h4>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
<article class="c-card c-card--transparent c-card--image-top ">
<h4>
<a href="#">Bender Rodríguez</a>
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<a href="#">
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-muted"><code>plain</code> Card Image</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - <small>Embedded</small> Media top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - <small>Embedded</small> Media bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - <small>Embedded</small> Media right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - <small>Embedded</small> Media left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-muted-link"><code>plain</code> Card Image <strong>as</strong> Link</h3>
<a class="c-card c-card--plain c-card--image-top " href="#">
<h3 id="card-image-top">
Card - Image top
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-bottom demo-disabled" href="#">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-right demo-disabled" href="#">
<h3 id="card-image-right">
Card - Image right
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-left demo-disabled" href="#">
<h3 id="card-image-left">
Card - Image left
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-muted-link"><code>plain</code> Card Image <strong>with</strong> Link</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-muted-contact"><code>plain</code> Contact Card with Image</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h4>
Bender Rodríguez
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</article>
<a class="c-card c-card--plain c-card--image-top " href="#">
<h4>
Bender Rodríguez
</h4>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
<article class="c-card c-card--plain c-card--image-top ">
<h4>
<a href="#">Bender Rodríguez</a>
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<a href="#">
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
</article>
</section>
</section>
<hr>
<section class="o-section o-section--style-dark">
<h2 id="section--dark">Section - Dark</h2>
<section class="c-card-list">
<h3 id="card-image-transparent-dark"><code>transparent</code> Card Image</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - <small>Embedded</small> Media top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - <small>Embedded</small> Media bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - <small>Embedded</small> Media right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - <small>Embedded</small> Media left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-dark-link"><code>transparent</code> Card Image <strong>as</strong> Link</h3>
<a class="c-card c-card--transparent c-card--image-top " href="#">
<h3 id="card-image-top">
Card - Image top
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-bottom demo-disabled" href="#">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-right demo-disabled" href="#">
<h3 id="card-image-right">
Card - Image right
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
<a class="c-card c-card--transparent c-card--image-left demo-disabled" href="#">
<h3 id="card-image-left">
Card - Image left
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-dark-link"><code>transparent</code> Card Image <strong>with</strong> Link</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
<article class="c-card c-card--transparent c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-transparent-dark-contact"><code>transparent</code> Contact Card with Image</h3>
<article class="c-card c-card--transparent c-card--image-top ">
<h4>
Bender Rodríguez
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</article>
<a class="c-card c-card--transparent c-card--image-top " href="#">
<h4>
Bender Rodríguez
</h4>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
<article class="c-card c-card--transparent c-card--image-top ">
<h4>
<a href="#">Bender Rodríguez</a>
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<a href="#">
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-dark"><code>plain</code> Card Image</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</article>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - <small>Embedded</small> Media top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - <small>Embedded</small> Media bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - <small>Embedded</small> Media right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - <small>Embedded</small> Media left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
</div>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-dark-link"><code>plain</code> Card Image <strong>as</strong> Link</h3>
<a class="c-card c-card--plain c-card--image-top " href="#">
<h3 id="card-image-top">
Card - Image top
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-bottom demo-disabled" href="#">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-right demo-disabled" href="#">
<h3 id="card-image-right">
Card - Image right
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
<a class="c-card c-card--plain c-card--image-left demo-disabled" href="#">
<h3 id="card-image-left">
Card - Image left
</h3>
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-dark-link"><code>plain</code> Card Image <strong>with</strong> Link</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h3 id="card-image-top">
Card - Image top
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-bottom ">
<h3 id="card-image-bottom">
Card - Image bottom
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-right ">
<h3 id="card-image-right">
Card - Image right
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
<article class="c-card c-card--plain c-card--image-left ">
<h3 id="card-image-left">
Card - Image left
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p class="
c-message
c-message--type-warning
c-message--scope-inline
">
Narrow images might not fill space available. Just use a wider image.
</p>
<a href="#">
<img src="https://cep.tacc.utexas.edu/media/filer_public/7d/85/7d85cf91-6638-4e95-9c81-f65a1355abd3/spectrum-tall-600px.png" />
</a>
</article>
</section>
<section class="c-card-list">
<h3 id="card-image-plain-dark-contact"><code>plain</code> Contact Card with Image</h3>
<article class="c-card c-card--plain c-card--image-top ">
<h4>
Bender Rodríguez
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</article>
<a class="c-card c-card--plain c-card--image-top " href="#">
<h4>
Bender Rodríguez
</h4>
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
<article class="c-card c-card--plain c-card--image-top ">
<h4>
<a href="#">Bender Rodríguez</a>
</h4>
<p>Planet Express Worker</p>
<p>(Anti-hero in Futurama)</p>
<a href="#">
<img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
</a>
</article>
</section>
</section>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* To make a card with a grid inside span all columns */
.o-section > .c-card:has(.o-grid) {
grid-column: 1/-1
}
/* To prevent cards from stretching to match grid's equal row height */
.o-grid--col-min-width {
grid-auto-rows: unset;
}
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* Rid margin-bottom on last section */
.o-section>:last-child {
margin-bottom: var(--global-space--bootstrap-gap);
}
/* To make a title inside a section… */
.o-section > h2 {
/* …have "better" gap above and below */
margin-bottom: calc(-1* var(--global-space--bootstrap-gap) / 2);
}
/* create a two column grid (cleaner look) */
.c-card-list {
grid-template-columns: 1fr 1fr;
}
/* To make a title inside a card list… */
.c-card-list > h3 {
/* …span all columns */
grid-column: 1/-1;
/* …have "better" gap above and below */
margin-top: 40px;
margin-bottom: calc(-1* var(--global-space--bootstrap-gap) / 2);
}
/* So hover outline shrink-wraps to card */
.c-card-list > .c-card {
height: min-content;
}
/* To show a card must not be used (even if it works) */
.c-card.demo-disabled * {
opacity: 0.5;
}
.c-card.demo-disabled { position: relative; }
.c-card.demo-disabled::after {
content: "Card like this must not be linked. Design does not approve of such a configuration.";
padding: 1rem;
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: black;
color: white;
}
{
"shouldSkipPattern": true,
"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": "components",
"shouldLoadCMS": true,
"📝 shouldLoadCMS": "this pattern is not intended nor expected for use beyond CMS",
"shouldLoadBootstrap": true
}