The elements on this page are features that work with any card type defined here.
For cards representing a form of media with a duration, it may improve the user experience to give an indication of how much time participating in said media will take. This is where media labels come in handy.
The card-stamp object works by setting an absolute value on its position, placing it firmly in the bottom right corner of a card's image element (this works on both default and overlay cards).
The span tag within usually denotes the duration it takes to consume that piece of media. An example of this data, properly formatted, would be 1 hr 23 mins 45 sec.
The svg icon can be any media type you require, found here with the prefix of media-.
<div class="card">
<a class="relative" href="#">
<div class="card-stamp bg-charcoal text-white">
<span class="font-size-smallest">14 min 43 sec</span>
<svg class="icon" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#media-article"></use>
</svg>
</div>
<img src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" data-optimize-img />
</a>
<div class="card-block hard soft-quarter-top">
<a class="text-gray font-size-smaller font-family-base-mid text-uppercase" href="#">
Card topic
</a>
<h3 class="component-header flush"><a href="#">Card title</a></h3>
<p class="card-text soft-quarter-top">
<a class="text-gray-light font-size-smaller" href="#">Author McArthur</a>
</p>
</div>
</div>The class .card-img-caption should wrap the card's image and a .img-caption element to enable a caption overlay on the card image. The caption's content should be placed inside the .img-caption element.
For left alignment on cards, adding a .img-caption--left to the .img-caption element will align the caption to the left, with 1rem of padding.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<div class="card">
<div class="card-img-caption">
<img alt="Card image caption" class="card-img-top img-responsive" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" ix-initialized="ix-initialized" />
<div class="img-caption">Card image caption</div>
</div>
<div class="card-block text-center">
<h4 class="card-title">Card title</h4>
<h5 class="card-subtitle">Card subtitle</h5>
<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 class="card-link" href="#">Go somewhere</a>
</div>
</div>Cards can use utility classes to modify their appearance. Here, the text has been centered using .text-center.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<div class="card">
<img alt="Card image caption" class="card-img-top img-responsive" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" ix-initialized="ix-initialized" />
<div class="card-block text-center">
<h4 class="card-title">Card title</h4>
<h5 class="card-subtitle">Card subtitle</h5>
<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 class="card-link" href="#">Go somewhere</a>
</div>
</div>