Card

Definition

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; }
	body { font-family: 'Proxima Nova', sans-serif; font-weight: 400; }
	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; margin-bottom: 10px; max-width: 100%; }
	.custom_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
	.custom_card_title { font-size: 22px; font-weight: 600; line-height: 1.4em; margin: 0; }
	.custom_card_text { font-size: 16px; font-weight: 400; }
</style>
<h2>Example 1</h2>

<div class="custom_cards">
<div class="custom_card"><img alt="" data-entity-type="" data-entity-uuid="" src="https://visualidentity.columbia.edu/sites/visualidentity.columbia.edu/files/content/Brand%20Guide/Colors/Typography/trajan.png" />
<h3 class="custom_card_title"><a href="#">Lorem ipsum dolor</a></h3>

<p class="custom_card_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat</p>
</div>

<div class="custom_card"><img alt="" data-entity-type="" data-entity-uuid="" src="https://visualidentity.columbia.edu/sites/visualidentity.columbia.edu/files/content/Brand%20Guide/Colors/Typography/trajan.png" />
<h3 class="custom_card_title"><a href="#">Sit amet consectetur</a></h3>

<p class="custom_card_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat</p>
</div>

<div class="custom_card"><img alt="" data-entity-type="" data-entity-uuid="" src="https://visualidentity.columbia.edu/sites/visualidentity.columbia.edu/files/content/Brand%20Guide/Colors/Typography/trajan.png" />
<h3 class="custom_card_title"><a href="#">Adipiscing elit</a></h3>

<p class="custom_card_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat</p>
</div>
</div>

<h2>Example 2</h2>

<div class="custom_cards">
<div class="custom_card">
<h3 class="custom_card_title"><a href="#">Lorem ipsum dolor</a></h3>

<p class="custom_card_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.</p>
</div>

<div class="custom_card">
<h3 class="custom_card_title"><a href="#">Sit amet consectetur</a></h3>

<p class="custom_card_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.</p>
</div>

<div class="custom_card">
<h3 class="custom_card_title"><a href="#">Adipiscing elit</a></h3>

<p class="custom_card_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.</p>
</div>
</div>

<h2>Example 3</h2>

<div class="custom_cards">
<div class="custom_card"><img alt="" class="custom_cards_icon" data-entity-type="" data-entity-uuid="" src="https://visualidentity.columbia.edu/sites/visualidentity.columbia.edu/files/content/Brand%20Guide/Colors/PMS%207686c.png" />
<h3 class="custom_card_title"><a href="#">Lorem ipsum dolor</a></h3>
</div>

<div class="custom_card"><img alt="" class="custom_cards_icon" data-entity-type="" data-entity-uuid="" src="https://visualidentity.columbia.edu/sites/visualidentity.columbia.edu/files/content/Brand%20Guide/Colors/PMS%20287C.png" />
<h3 class="custom_card_title"><a href="#">Sit amet consectetur</a></h3>
</div>

<div class="custom_card"><img alt="" class="custom_cards_icon" data-entity-type="" data-entity-uuid="" src="https://visualidentity.columbia.edu/sites/visualidentity.columbia.edu/files/content/Brand%20Guide/Colors/pms284c%20.jpeg" />
<h3 class="custom_card_title"><a href="#">Adipiscing elit</a></h3>
</div>
</div>