Cards

<!-- 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 -->

<!-- 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>