# Cards

Source

Flexible card components for displaying content in contained, structured layouts.

## Basic Card

A basic card with just a body section. Simple and clean.

Another basic card. Cards provide structure and visual separation for content blocks.

## Full Card Structure

### Project Settings

Manage your project configuration

This card has a header with title and subtitle, a body section for content, and a footer with action buttons.

## Using the Component

### Simple Card

Using the what-card component with just a title prop.

### Card with Footer

Using the what-card component with both title and footer props.

Last updated: Today

## Size Variants

### Small Card

Compact padding for smaller content areas.

### Default Card

Standard padding for regular content.

### Large Card

Extra padding for spacious layouts.

## Style Variants

### Elevated

No border, shadow instead for a floating appearance.

### Flat

No border, subtle background for a minimal look.

### Bordered

Thicker border for emphasis and definition.

## Interactive Card

### Hover Me

This card lifts on hover with a shadow effect.

### Click Me

Perfect for clickable list items or selections.

### Select Me

Great for selection-based UIs and dashboards.

## Color Variants

### Primary Card

A card with primary color accent for key information.

### Success Card

A card with success color accent for positive outcomes.

### Warning Card

A card with warning color accent for cautionary notices.

### Danger Card

A card with danger color accent for critical alerts.