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
Example 1
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat
Example 1
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat
Example 1
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat
Example 2
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.
Example 2
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.
Example 2
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam.
<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>
<!-- test -->
<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>
<!-- test -->
<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" /> <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" /> <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" /> <a href="#">Lorem ipsum dolor</a></div>
</div>