Cards

Cards are used to visually organize and segment content within a page.

Adding a card to the page requires wrapping your content in a set of two divs that provide visual styling and padding. There are also optional card features, such as a card-specific footer, that may be included when necessary.

The basic construction of a card includes the following:

	
<div class="card card--[theme style]"> <!--applies card style-->
	<div class="card-details"> <!--applies card padding-->
	   ...
	</div>
	<div class="card-footer"> <!--optional (see below)-->
	   ...
	</div>
</div>