Cards

Basic cards

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 URL (e.g. 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.

<!-- Text only -->
<div class="cui card">
    <div class="card-body">
        <span class="card-context-title">{{ Context title }}</span>
        <!-- The card title can be any heading element as long as it has the class `card-title` -->
        <h2 class="card-title">{{ Title }}</h2>
        <p>{{ Content }}</p>
    </div>
    <div class="card-footer">
        <a class="cui btn-sm primary" href="{{ URL }}">{{ Link text }}</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 | ratio-4x3 | ratio-1x1 | ratio-4x3 }}" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
    </div>
    <div class="card-body">
        <span class="card-context-title">{{ Context title }}</span>
        <!-- The card title can be any heading element as long as it has the class `card-title` -->
        <h2 class="card-title">{{ Title }}</h2>
        <p>{{ Content }}</p>
    </div>
    <div class="card-footer">
        <a class="cui btn-sm primary" href="{{ URL }}">{{ Link text }}</a>
    </div>
</div>

<!-- With video -->
<!-- Example javascript to play the video when the thumbnail is clicked -->
<script src="js/jquery-2.2.4.min.js"></script>
<script>
    $( document ).ready( function() {
        $( '.video-container .btn-video' ).on( 'click', function() {
            var iframe = $( this ).siblings( 'iframe' );
            var videoSrc = iframe.attr( 'data-src' ) + '?autoplay=1';
            $( this ).hide().parents( '.video-container' ).css( 'z-index', 10 );
            iframe.attr( 'src', videoSrc ).show();
        });
    });
</script>

<div class="cui card">
    <div class="card-media">
        <div class="video-container">
            <button class="btn-video" aria-label="Play video">
                <span class="video-thumbnail" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></span>
            </button>
            <iframe data-src="{{ Youtube embed URL }}" allowfullscreen></iframe>
        </div>
    </div>
    <div class="card-body">
        <span class="card-context-title">{{ Context title }}</span>
        <!-- The card title can be any heading element as long as it has the class `card-title` -->
        <h2 class="card-title">{{ Title }}</h2>
        <p>{{ Content }}</p>
    </div>
    <div class="card-footer">
        <a href="{{ URL }}">{{ Link text }}</a>
    </div>
</div>

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.

<!-- Equal height cards require the Bootstrap flex grid -->
<div class="row row-equal-height-cards">
    <!-- Customize the column classes for your scenario -->
    <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 | ratio-4x3 | ratio-1x1 | ratio-4x3 }}" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
            </div>
            <div class="card-body">
                <span class="card-context-title">{{ Context title }}</span>
                <h2 class="card-title">{{ Title }}</h2>
                <p>{{ Content }}</p>
            </div>
            <div class="card-footer">
                <a class="cui btn-sm primary" href="{{ URL }}">{{ Button text }}</a>
            </div>
        </div>
    </div>

    <!-- Repeat as necessary -->
    <div class="col-sm-6 col-lg-4">
        <div class="cui card">
            ...
        </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.

<a class="cui card" aria-label="{{ Accessible card label }}">
    <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 | ratio-4x3 | ratio-1x1 | ratio-4x3 }}" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
    </div>
    <div class="card-body">
        <span class="card-context-title">{{ Context title }}</span>
        <!-- The card title can be any heading element as long as it has the class `card-title` -->
        <h2 class="card-title">{{ Title }}</h2>
        <p>{{ Content }}</p>
    </div>
</a>

Usage

General guidelines

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, video