Flexible content containers with optional headers, bodies, and footers.
The basic card class creates a bordered container perfect for grouping related content.
This is a basic card with just a body. Perfect for simple content grouping.
Use card-elevated for a card with shadow elevation effect.
This card has a subtle shadow for a floating effect.
Use card-outlined for a card with a more prominent border.
This card has a more prominent border style.
Cards can include header, body, and footer sections for structured content.
This card demonstrates all three sections: header, body, and footer.
The body contains the main content.
Product Designer
A high-quality widget for your next project.
Combine cards with grid utilities for responsive layouts.
Description of feature one.
Description of feature two.
Description of feature three.
h2, h3) for card titlesaria-label or aria-labelledby for context