Card
Container surface with Paper Cut's 4-level elevation system.
Basic Usage
Default Card uses elevated variant with strong shadow. Use lift to opt into the hover “picked up” feel.
This design system is inspired by the interplay of light and layered paper.
Variants
Four elevation levels for different contexts.
Elevated
Strong shadow. Add lift when you want interactive emphasis.
Strong visual impact for standalone surfaces.
Default
Medium shadow without lift. For general containers and panels.
Balanced presence for functional interfaces.
Outlined
Border only, no shadow. For dense layouts and sidebars.
Minimal visual weight for dense layouts.
Flat
No shadow. For nesting inside other elevated containers.
Outer Card (elevated)
Defers elevation to parent container.
Best Practices
Key principle: Card owns elevation, inner controls use flat variants.
Elevation Budget
Product Card
Premium Headphones
Wireless • Noise Canceling
Pricing Cards
- 5 projects
- Basic analytics
- Unlimited projects
- Advanced analytics
- Everything in Pro
- Custom integrations
Anti-patterns
Avoid nesting elevated Cards. Use flat variant for inner containers.
Inner card with shadow
Inner card defers elevation
API Reference
Card component with 4-level elevation system and optional lift.
Card Props
variant"elevated" | "default" | "outlined" | "flat"Elevation levelliftbooleanEnable hover/focus lift (default: false)Elevation Levels
elevatedStrongLanding, Hero, Featured (default)defaultMediumGeneral containers, dashboardsoutlinedNone (border)Dense layouts, sidebarsflatNoneNested inside containers