WIP0002

Card Layouts

Content cards with various configurations, hover states, and layouts.

Basic Cards

Simple content containers with borders and padding.

Basic Card

A simple card with title and text content. Cards are versatile containers.

Another Card

Cards can contain any content and are great for organizing information.

Interactive Cards

Cards with hover effects for clickable content.

Cards with Media

Cards featuring images or media content.

16:9

Media Card

Cards with images for visual content.

16:9

Featured Content

Showcase featured items with imagery.

Horizontal Cards

Cards with horizontal layout for compact displays.

1:1

Horizontal Layout

Image and content side by side.

1:1

Compact Display

Efficient use of horizontal space.

1:1

List Style

Perfect for listing items.

Cards with Actions

Cards with footer actions for user interaction.

Project Alpha

A card with action buttons in the footer.

Project Beta

Multiple actions for different user flows.

Stats Cards

Cards optimized for displaying metrics and statistics.

Total Users12,847+12.5%
Revenue$48,290+8.2%
Orders1,423-2.4%
Conversion3.24%+0.8%

Feature Cards

Cards for showcasing features or benefits.

Fast

Optimized for speed with sub-second load times.

🔒

Secure

Enterprise-grade security built in from the start.

📱

Responsive

Works perfectly on any device or screen size.

Elevated Cards

Cards with shadow for depth and visual hierarchy.

Elevated Style

Subtle shadow creates depth and draws attention.

Hover Elevation

Shadow increases on hover for interactive feedback.