nested-card
Nested Card Pattern
Build premium card designs with an outer gradient container wrapping an inner content card, creating visual depth and separation between media and content areas.
Structure Overview
┌─────────────────────────────┐ ← Outer card (gradient bg, padding)
│ ┌───────────────────────┐ │
│ │ Image/Media │ │ ← Media section (rounded)
│ └───────────────────────┘ │
│ ┌───────────────────────┐ │
│ │ Content Card │ │ ← Inner card (solid bg)
│ └───────────────────────┘ │
└─────────────────────────────┘
Core Implementation
More from ainergiz/design-inspirations
glassmorphism
Creates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that should appear elevated with a translucent background.
180image-carousel
Creates image carousels with hover-activated auto-advance, touch swipe support, and animated progress indicators. Use when building image galleries, product showcases, or any multi-image display with navigation.
6stacked-cards
Creates horizontally fanned/cascading card stacks with proper z-index ordering and hover lift animations. Use when building album browsers, card fans, stacked previews, or any overlapping card collection.
5expandable-card
Creates expandable/collapsible cards using CSS grid-rows animation with smooth transitions. Use when building accordions, expandable panels, collapsible sections, or show/hide card content.
5create-new-design
Scaffolds a new design in the design-inspirations repo with preview component, detail page, and main page entry. Use when creating a new design, adding a design inspiration, or scaffolding design files.
5dropdown-menu
Creates dropdown menus with proper click-outside detection and z-index stacking for list contexts. Use when building action menus, context menus, or any dropdown that appears in cards/list items.
4