Cards

Cards contain content and actions about a single subject. M3 introduces three types of cards: Elevated, Filled, and Outlined.

Surface containers!

Material 3 Variants

Three core surfaces

Elevated

Filled

Outlined

Use .card-elevated for cards that need to stand out. Use .rounded-4 (16px) corner signatures.

Step 1: Define your surface

HTML

<!-- M3 Elevated Card -->
<div class="card card-elevated shadow-sm border-0 rounded-4">
  <div class="card-body">Elevated Card</div>
</div>

<!-- M3 Filled Card -->
<div class="card border-0 rounded-4" style="background-color: #f3f6f5;">
  <div class="card-body">Filled Card</div>
</div>

<!-- M3 Outlined Card -->
<div class="card border rounded-4 bg-white">
  <div class="card-body">Outlined Card</div>
</div>

Complex Example

Our Changing Planet

Explore the most significant shifts happening across our globe today.

Combine cards with M3 tonal buttons and pill shapes for a cohesive experience.

Perfect M3 alignment!