Cards
Material 3 Expressive Card components for grouping related content and actions.
Card Variants
Material 3 provides three card variants: elevated (default), filled, and outlined. Each variant serves different visual hierarchy needs.
Elevated Card
This is an elevated card with subtle shadow elevation. It's the default variant and works well for most use cases.
Filled Card
This is a filled card with a solid background color. Great for dense layouts and secondary content.
Outlined Card
This is an outlined card with a border. Perfect for lists and minimal designs.
<m3-card variant="elevated">
<h3 slot="header">Card Title</h3>
<p>Card content goes here</p>
<div slot="actions">
<m3-button variant="text">Cancel</m3-button>
<m3-button variant="filled">Confirm</m3-button>
</div>
</m3-card>Cards with Media
Cards can include images, videos, or other media content at the top.
Design
Creative Solutions
Beautiful and modern design systems that bring your ideas to life.
Performance
Lightning Fast
Optimized for speed and efficiency in every interaction.
Innovation
Cutting Edge
Pushing boundaries with the latest technologies and approaches.
<m3-card variant="elevated">
<div slot="media">
<!-- Product image -->
</div>
<h3 slot="header">Card Title</h3>
<p>Card content goes here</p>
</m3-card>Clickable Cards
Cards can be made interactive by adding the clickable attribute. They support keyboard navigation and proper accessibility.
Products
Browse our catalog of amazing products
Services
Explore our professional services
Support
Get help from our support team
<m3-card
clickable
aria-label="Navigate to products"
(card-click)="handleClick($event)">
<p>Click anywhere on this card</p>
</m3-card>Width Options
Cards support different width options: auto (default), full, and fixed.
Full Width Card
This card takes up the full width of its container. Perfect for mobile layouts or single-column designs.
Fixed Width
This card has a fixed width of 320px (customizable via CSS).
Auto Width
This card naturally sizes based on its content.
<m3-card variant="elevated" width="full">...</m3-card>
<m3-card variant="filled" width="fixed">...</m3-card>
<m3-card variant="outlined" width="auto">...</m3-card>Card States
Cards support various interaction states including hover, focus, pressed, and disabled.
Normal State
Hover over this card or focus it with keyboard navigation to see state changes.
Disabled State
This card is disabled and cannot be interacted with.
Dragged State
This card shows the dragged state with elevated shadow.
<m3-card variant="filled" disabled>...</m3-card>
<m3-card variant="outlined" dragged>...</m3-card>Complex Card Example
A real-world example of a product card with all features combined.
Premium Headphones
Experience premium sound quality with active noise cancellation, 40-hour battery life, and comfortable over-ear design.
<m3-card variant="elevated">
<div slot="media">
<!-- Product image -->
</div>
<div slot="header">
<h3>Premium Headphones</h3>
<div class="price">$299</div>
</div>
<p>Experience premium sound quality...</p>
<div slot="actions">
<m3-button variant="filled">Add to Cart</m3-button>
</div>
</m3-card>