Cards
Basic card
A card can be composed of a context title, a title, text, a call to action link, and an image or video (or neither).
Example title lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.
Nulla vitae iaculis lorem dapibus lacinia ipsum cursus at
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.
Quisque ac nulla pharetra tempus mi at bibendum pretium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.
Quisque odio ex laoreet sit amet sem eget
Lorem ipsum dolorsit amet, consectetur adipiscing elit. Aliquam at porttitor sem.
Vivamus nec tellus ac quam pulvinar consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.
Information about card images
The images used for the cards on this page are set on a <div class="background-image">. The image is set as the background-image via inline CSS.
A ratio class must also be applied to the div to set the dimensions. 4 ratio classes are currently built into Pattern Library: ratio-16x9 (widescreen landscape), ratio-4x3 (landscape), ratio-1x1 (square), and ratio-3x4 (portrait).
Example markup for the background image div:
<div class="background-image ratio-16x9" style="background-image: url( 'image.jpg' );"></div>
See more details about background images.
The background-image div is used rather than the <img> tag to provide visual height consistency across cards. In conjunction with the ratio classes, any image can be set as the background image and it will be constrained to the ratio, regardless of the image’s dimensions. The <img> tag may still be used in your application or website if desired.
Code
<!-- Text only -->
<div class="cui card">
<div class="card-body">
<span class="card-context-title">Context title</span>
<h2 class="card-title">Example title lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#" target="_blank">Aliquam at porttitor sem</a>.</p>
</div>
<div class="card-footer">
<a class="cui btn-sm primary" href="#">Small primary button</a>
</div>
</div>
<!-- With image -->
<div class="cui card">
<div class="card-media">
<!-- A ratio class for the background-image is required: ratio-16x9, ratio-4x3, ratio-1x1, ratio-4x3 -->
<div class="background-image ratio-16x9" style="background-image: url( 'image.jpg' );"></div>
</div>
<div class="card-body">
<span class="card-context-title">Context title</span>
<h2 class="card-title">Quisque ac nulla pharetra tempus mi at bibendum pretium</h2>
<p>Lorem ipsum dolor <a href="#">sit amet</a>, consectetur adipiscing elit. Aliquam at porttitor sem.</p>
</div>
<div class="card-footer">
<a class="cui btn-sm primary" href="#">Small primary button</a>
</div>
</div>
<!-- With video -->
<!-- Example javascript to play the video -->
<script type="text/javascript">
$(document).ready(function(){
var videolink = "https://www.youtube.com/embed/PYzflRzOPhI";
$( document ).delegate('#card-youtube-1 .youtubePlayOverlay', 'click', function() {
$(this).hide();
$(this).parent().css('z-index', 3000);
$('#card-youtube-1 iframe:first').show().attr('src', '' + videolink + '?autoplay=1');
});
});
</script>
<div class="cui card">
<div class="card-media">
<div class="video-container" id="card-youtube-1">
<button class="btn-video" aria-label="Play the video">
<span class="video-thumbnail" style="background-image: url( 'image.jpg' );"></span>
</button>
<iframe style="display: none;"></iframe>
</div>
</div>
<div class="card-body">
<span class="card-context-title">Context title</span>
<h2 class="card-title">Vivamus nec tellus ac quam pulvinar consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.</p>
</div>
<div class="card-footer">
<a href="#">Action link</a>
</div>
</div>
Usage
Cards create a consistent experience regardless of device. Use a card layout when displaying content that:
- As a collection, comprises multiple data types, such as images, videos, and text
- Supports content of highly variable length
- Contains interactive content, such as buttons
- Would otherwise be in a grid list but needs to display more content to supplement the image
Video image
The image should be sized to a 16:9 ratio.
Equal height cards
Cards can have equal heights by utilizing the CSS flexbox feature. All cards in a row will be set to equal heights, based on the height of the tallest card in the row.
Note: Equal height cards require the Bootstrap flex grid. Use a row as the main wrapper element and col-* classes to wrap around individual cards. Apply the class row-equal-height-cards to the row, as seen in the code block below.
In the examples below, the call to action button is aligned to the bottom in each of the cards. This is done by placing the button inside a div with the class card-footer.
Example title lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque non nulla ac lobortis. Etiam ultricies ante vitae tellus eleifend in laoreet.
Quisque ac nulla pharetra tempus mi at bibendum pretium
Fusce lacinia lobortis orci, nec convallis urna iaculis dignissim. Maecenas tortor erat, tristique eu metus in, tempus venenatis diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Nulla vitae iaculis lorem dapibus lacinia ipsum cursus at
Donec eget nulla sit amet justo tempor eleifend sit amet et tellus. Praesent ligula sapien, efficitur in eleifend ac, bibendum eu quam.
Code
<!-- Equal height cards require the Bootstrap flex grid -->
<div class="row row-equal-height-cards">
<div class="col-sm-6 col-lg-4">
<div class="cui card">
<div class="card-media">
<!-- A ratio class for the background-image is required: ratio-16x9, ratio-4x3, ratio-1x1, ratio-4x3 -->
<div class="background-image ratio-16x9" style="background-image: url( 'image.jpg' );"></div>
</div>
<div class="card-body">
<span class="card-context-title">Context title</span>
<h2 class="card-title">The article title goes here</h2>
<p>Content goes here</p>
</div>
<div class="card-footer">
<a href="#">Action link</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="cui card">
<div class="card-media">
<!-- A ratio class for the background-image is required: ratio-16x9, ratio-4x3, ratio-1x1, ratio-4x3 -->
<div class="background-image ratio-16x9" style="background-image: url( 'image.jpg' );"></div>
</div>
<div class="card-body">
<span class="card-context-title">Context title</span>
<h2 class="card-title">The article title goes here</h2>
<p>Content goes here</p>
</div>
<div class="card-footer">
<a href="#">Action link</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="cui card">
<div class="card-media">
<!-- A ratio class for the background-image is required: ratio-16x9, ratio-4x3, ratio-1x1, ratio-4x3 -->
<div class="background-image ratio-16x9" style="background-image: url( 'image.jpg' );"></div>
</div>
<div class="card-body">
<span class="card-context-title">Context title</span>
<h2 class="card-title">The article title goes here</h2>
<p>Content goes here</p>
</div>
<div class="card-footer">
<a href="#">Action link</a>
</div>
</div>
</div>
</div>
Article cards
The following card pattern is suitable for displaying an article in a card layout. The entire card is a clickable link that should direct to the full article page.
See the equal height cards above to display all cards in a row with equal heights.
Code
<!-- NOTE: Add a background-image ratio class: `ratio-16x9`, `ratio-3x4`, `ratio-1x1`, or `ratio-4x3`
to the `<div class="background-image">` element to set the image ratio -->
<a class="cui card" aria-label="Article title">
<div class="card-media">
<div class="background-image ratio-4x3" style="background-image: url( 'image.jpg' );"></div>
</div>
<div class="card-body">
<h2 class="card-title">Article title</h2>
<p>Description or teaser</p>
</div>
</a>