Card

A card is a modular, somewhat flexible container used to house related pieces of information tied together by some combination of a title, description, and image or video.

Usage

Use cards individually to highlight a specific piece of content, or in groups to make aggregated content appear uniform, news stories or events, for example. A card is usually a snippet or representation of a fuller set of information to which it hyperlinks.

Example

<style type="text/css">
	h1,h2,h3,h4,h5,h6 { font-family: 'Proxima Nova', sans-serif; font-weight: 500; }
	h1 { font-size: 42px; line-height: 2.55em; }
	h2 { font-size: 37px; line-height: 2.3em; }
	h3 { font-size: 32px; line-height: 2em; }
	h4 { font-size: 26px; line-height: 1.6em; }
	h5 { font-size: 24px; line-height: 1.5em; }
	h6 { font-size: 22px; line-height: 1.4em; }
	img { display: block; max-width: 100%; }
	.custom_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

</style>
<div class="custom_cards">
	<div class="custom_cards_column">
		<h3>Example 1</h3>
		<img alt="" data-entity-type="" data-entity-uuid="" src="https://harriscenter.org/wp-content/uploads/2017/11/canoeing_Silver_Lake_June2016_Thelen_500x600_acf_cropped-500x600.jpg" /> <a href="#">Lorem ipsum dolor</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat</p>
	</div>
	<div class="custom_cards_column">
		<h3>Example 1</h3>
		<img alt="" data-entity-type="" data-entity-uuid="" src="https://harriscenter.org/wp-content/uploads/2017/11/canoeing_Silver_Lake_June2016_Thelen_500x600_acf_cropped-500x600.jpg" /> <a href="#">Lorem ipsum dolor</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat</p>
	</div>
	<div class="custom_cards_column">
		<h3>Example 1</h3>
		<img alt="" data-entity-type="" data-entity-uuid="" src="https://harriscenter.org/wp-content/uploads/2017/11/canoeing_Silver_Lake_June2016_Thelen_500x600_acf_cropped-500x600.jpg" /> <a href="#">Lorem ipsum dolor</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat</p>
	</div>
</div>
<div class="custom_cards">
	<div class="custom_cards_column">
		<h3>Example 2</h3>
		<a href="#">Lorem ipsum dolor</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.</p>
	</div>
	<div class="custom_cards_column">
		<h3>Example 2</h3>
		<a href="#">Lorem ipsum dolor</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.</p>
	</div>
	<div class="custom_cards_column">
		<h3>Example 2</h3>
		<a href="#">Lorem ipsum dolor</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.</p>
	</div>
</div>
<div class="custom_cards">
	<div class="custom_cards_column">
		<h3>Example 3</h3>
		<img alt="" class="custom_cards_icon" data-entity-type="" data-entity-uuid="" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-email-512.png" />&nbsp;<a href="#">Lorem ipsum dolor</a>
	</div>
	<div class="custom_cards_column">
		<h3>Example 3</h3>
		<img alt="" class="custom_cards_icon" data-entity-type="" data-entity-uuid="" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-email-512.png" />&nbsp;<a href="#">Lorem ipsum dolor</a>
	</div>
	<div class="custom_cards_column">
		<h3>Example 3</h3>
		<img alt="" class="custom_cards_icon" data-entity-type="" data-entity-uuid="" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-email-512.png" />&nbsp;<a href="#">Lorem ipsum dolor</a>
	</div>
</div>