Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.9)

Note

This page is archived under version 1.9 and is available for reference purposes only. The latest version of Pattern Library is 2.

Cards

Variants

Several card variants are available. Use the controls below to see the available configurations.

Demo

Label Value
Card context title

Card title

Card content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.

Demo controls

Code


<!-- Basic card structure:
     The basic card is built with a <div> tag.
     If a CTA is needed, it can be added in the card-footer or card-body elements. -->
<div class="cui card">
	<div class="card-media">
		...
	</div>
	<div class="card-body">
		...
	</div>
	<div class="card-footer">
		...
	</div>
</div>


<!-- Clickable link card structure:
     When the card is a clickable link, the card must be built with an <a> tag.
     Do not add any other interactive elements like <a>s, <button>s, or <iframe>s. -->
<a class="cui card">
	<div class="card-media">
		...
	</div>
	<div class="card-body">
		...
	</div>
</a>


<!-- With background image -->
<div class="cui card">
	<div class="card-media">
		<!-- A ratio class for the background-image is required: ratio-16x9, ratio-4x3, ratio-1x1, or ratio-4x3 -->
		<!-- By default, the image will be stretched to fill the space.
		If the image should be contained in the space, use the optional class `bg-contain` -->
		<div class="background-image {{ ratio-16x9 | ratio-4x3 | ratio-1x1 | ratio-4x3 }} {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }} {{ bg-contain }}" 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` -->
		<h3 class="card-title">Card title</h3>
		<p>{{ Content }}</p>
	</div>
	<div class="card-footer">
		<a class="cui btn-sm utility-btn" href="{{ URL }}">{{ Link text }}</a>
	</div>
</div>
<!-- End of background image variant -->


<!-- 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` -->
		<h3 class="card-title">Card title</h3>
		<p>{{ Content }}</p>
	</div>
	<div class="card-footer">
		<a class="cui btn-sm utility-btn" href="{{ URL }}">{{ Link text }}</a>
	</div>
</div>
<!-- End of video variant -->


<!-- With cicon -->
<div class="cui card with-icon">
	<div class="card-media spaced">
		<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
	</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` -->
		<h3 class="card-title">Card title</h3>
		<p>{{ Content }}</p>
	</div>
	<div class="card-footer">
		<a class="cui btn-sm utility-btn" href="{{ URL }}">{{ Link text }}</a>
	</div>
</div>
<!-- End of cicon variant -->


<!-- With SVG illutration -->
<div class="cui card">
	<div class="card-media spaced">
		<img class="cimg" src="{{ SVG URL (e.g. image.svg) }}" alt="">
	</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` -->
		<h3 class="card-title">Card title</h3>
		<p>{{ Content }}</p>
	</div>
	<div class="card-footer">
		<a class="cui btn-sm utility-btn" href="{{ URL }}">{{ Link text }}</a>
	</div>
</div>
<!-- End of svg illustration variant -->


<!-- With a data label and value -->
<div class="cui card with-data">
	<div class="card-media spaced">
		<span class="name">
			<span class="{{ Icon class (e.g. cicon-home) }}"></span>Label
		</span>
		<span class="value">Value</span>
	</div>
	<div class="card-body">
		<!-- The card context title and card title are generally not required for this card variant. -->
		<p>{{ Content }}</p>
	</div>
	<div class="card-footer">
		<a class="cui btn-sm utility-btn" href="{{ URL }}">{{ Link text }}</a>
	</div>
</div>
<!-- End of data variant -->

<!-- No media -->
<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` -->
		<h3 class="card-title">Card title</h3>
		<p>{{ Content }}</p>
	</div>
	<div class="card-footer">
		<a class="cui btn-sm utility-btn" href="{{ URL }}">{{ Link text }}</a>
	</div>
</div>
<!-- End of no media variant -->

Layout

When using several cards together, there are two layout options available: equal height or masonry.

Equal height

The equal height layout uses the CSS flexbox model. All cards in a row will be set to equal heights, based on the height of the tallest card in the row.

The call to action buttons inside the .card-footer elements are automatically lined up to the bottom of each card.

Masonry

The masonry layout uses the Masonry JavaScript library to place each card in an optimal position to fill the vertical space, sort of like a mason fitting stones in a wall.

Demo

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque non nulla ac lobortis.

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.

Fusce lacinia lobortis orci nec et tellus

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Maecenas tortor erat tristique eu amet.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque non nulla ac lobortis.

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.

Fusce lacinia lobortis orci nec et tellus

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Maecenas tortor erat tristique eu amet.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque non nulla ac lobortis.

Code


<!-- Equal height layout -->
<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>
	</div>

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


<!-- Masonry layout -->
<!-- See more information on masonry initialiation options at
     https://masonry.desandro.com/options.html -->
<script src="js/masonry.pkgd.4.2.2.min.js"></script>
<script>
	// Initialize masonry layout
	$( '.row-masonry' ).masonry({
		itemSelector: '[class*="col-"]',
		columnWidth: '[class*="col-"]',
		percentPosition: true
	});
</script>

<div class="row row-masonry">
	<!-- Customize the column classes for your scenario -->
	<div class="col-sm-6 col-lg-4">
		<div class="cui card">
			...
		</div>
	</div>
	<!-- Repeat as necessary -->
	<div class="col-sm-6 col-lg-4">
		<div class="cui card">
			...
		</div>
	</div>
	...
</div>

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

Links

The entire card may become a link by changing the html tag type to <a> instead of <div>. When doing so, no other interactive elements may be placed inside the card including other links, buttons, or videos.