Wisp CSS GitHub Logo
Important: Behaviors have been decoupled from components. You need to add one to make it interactive.

Card

Arranges content in a contained card layout.

<div class="c-card c-card--border">
	<img class="c-card__image" src="https://placeholdit.com/420x80/1d4ed8/ffffff" alt="">
	<div class="c-card__body">
		<h1 class="u-type-xl">Heading</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing
			elit. Donec varius mauris sed ullamcorper dapibus.
		</p>
	</div>
</div>

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius mauris sed ullamcorper dapibus.

Modifiers

Border

Applies a thin border around the card.

<div class="c-card c-card--border">
	<img class="c-card__image" src="https://placeholdit.com/420x80/1d4ed8/ffffff" alt="">
	<div class="c-card__body">
		<h1 class="u-type-xl">Heading</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing
			elit. Donec varius mauris sed ullamcorper dapibus.
		</p>
	</div>
</div>

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius mauris sed ullamcorper dapibus.

Round

Applies a border radius around the card.

<div class="c-card c-card--border c-card--round">
	<img class="c-card__image" src="https://placeholdit.com/420x80/1d4ed8/ffffff" alt="">
	<div class="c-card__body">
		<h1 class="u-type-xl">Heading</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing
			elit. Donec varius mauris sed ullamcorper dapibus.
		</p>
	</div>
</div>

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius mauris sed ullamcorper dapibus.