Card Component System
Master card components that provide comprehensive layout control, responsive behavior, and flexible composition for future applications.
Basic Card Types
Simple Card
A basic card with header and body content.
Card with Badge
This card includes a badge component.
Card with Media
Features an image with video aspect ratio.
Complete Card
A complete card with header, media, body, and footer.
Orientation Examples
Vertical Orientation
This card uses vertical orientation (default). Content flows from top to bottom.
Horizontal Orientation
This card uses horizontal orientation. On mobile it stacks vertically, on desktop it displays side by side.
Size and Style Variations
Small Card
Compact design
Medium Card
Standard size
Large Card
Prominent display
Extra Large
Maximum impact
Interactive Cards
Hover Effect
This card has hover animations and is interactive.
Interactive
This card shows cursor pointer and can handle click events.
Responsive
Smooth transitions and responsive behavior.
Badge Variations
primary
Badge variant: primary
secondary
Badge variant: secondary
accent
Badge variant: accent
info
Badge variant: info
success
Badge variant: success
warning
Badge variant: warning
error
Badge variant: error
neutral
Badge variant: neutral
Media Aspect Ratios
square Ratio
Aspect ratio: square
video Ratio
Aspect ratio: video
portrait Ratio
Aspect ratio: portrait
landscape Ratio
Aspect ratio: landscape