Cards

Cards are surfaces used to group related information and actions together.

Basic Card

A standard card with a title and description.

Standard Card

Card Title

This is a basic card with some descriptive text inside the body.

<div class="Card">
    <div class="Card-body">
        <h4 class="Card-title">Card Title</h4>
        <p class="Card-description">...</p>
    </div>
</div>

Interactive Card

A card that reacts to hover states, often used as a link.

Interactive Card

Visual Card

Cards can include images to provide more visual interest.

New View details

<a href="#" class="Card Card--interactive">
    <img src="..." class="Card-image" alt="...">
    <div class="Card-body">...</div>
</a>