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

Light Mode

<div className="bg-gradient-to-b from-[#e8e8ea] to-[#dcdce0] rounded-3xl p-2 shadow-xl shadow-zinc-400/30 border border-white/60"> {/* Media section /} <div className="relative h-[240px] w-full rounded-2xl overflow-hidden mb-2 border border-white/40"> {/ Image, carousel, or media content */} </div>

{/* Inner content card /} <div className="bg-white rounded-2xl px-5 py-4"> {/ Card content */} </div> </div>

Dark Mode

<div className="bg-gradient-to-b from-zinc-700 to-zinc-800 rounded-3xl p-2 shadow-xl shadow-black/50 border border-zinc-600/40"> {/* Media section /} <div className="relative h-[240px] w-full rounded-2xl overflow-hidden mb-2 border border-zinc-600/30"> {/ Image, carousel, or media content */} </div>

{/* Inner content card /} <div className="bg-zinc-900 rounded-2xl px-5 py-4"> {/ Card content */} </div> </div>

Token Reference

Element Light Mode Dark Mode

Outer card

Background bg-gradient-to-b from-[#e8e8ea] to-[#dcdce0]

bg-gradient-to-b from-zinc-700 to-zinc-800

Border border-white/60

border-zinc-600/40

Shadow shadow-xl shadow-zinc-400/30

shadow-xl shadow-black/50

Border radius rounded-3xl

rounded-3xl

Padding p-2

p-2

Media section

Border border-white/40

border-zinc-600/30

Border radius rounded-2xl

rounded-2xl

Inner card

Background bg-white

bg-zinc-900

Border radius rounded-2xl

rounded-2xl

Padding px-5 py-4

px-5 py-4

Sizing Variations

Preview (compact)

// Outer <div className="rounded-2xl p-1.5 w-[300px]"> {/* Media: h-[140px], rounded-xl /} {/ Inner: rounded-xl, px-3.5 py-3 */} </div>

Detail Page (full)

// Outer <div className="rounded-3xl p-2 max-w-[420px]"> {/* Media: h-[240px], rounded-2xl /} {/ Inner: rounded-2xl, px-5 py-4 */} </div>

Context Outer Radius Inner Radius Padding Media Height

Preview rounded-2xl

rounded-xl

p-1.5

h-[140px]

Detail rounded-3xl

rounded-2xl

p-2

h-[240px]

Full Example

function ProductCardLight() { return ( <div className="bg-gradient-to-b from-[#e8e8ea] to-[#dcdce0] rounded-3xl p-2 w-full max-w-[420px] shadow-xl shadow-zinc-400/30 border border-white/60"> {/* Image section */} <div className="relative h-[240px] w-full rounded-2xl overflow-hidden mb-2 border border-white/40"> <Image src="/images/product.jpg" alt="Product" fill className="object-cover" /> </div>

  {/* Content section */}
  <div className="bg-white rounded-2xl px-5 py-4">
    {/* Header */}
    <div className="flex items-start justify-between gap-3 mb-1.5">
      <h3 className="text-lg font-semibold text-zinc-900">
        Product Title
      </h3>
      <span className="text-sm font-medium text-zinc-700">$99</span>
    </div>

    {/* Description */}
    <p className="text-sm text-zinc-500 mb-4">
      Product description goes here.
    </p>

    {/* Tags or features */}
    <div className="flex items-center gap-2 text-xs text-zinc-500">
      <span>Feature 1</span>
      <span className="text-zinc-300">•</span>
      <span>Feature 2</span>
    </div>
  </div>
</div>

); }

Variations

Without Media Section

<div className="bg-gradient-to-b from-[#e8e8ea] to-[#dcdce0] rounded-2xl p-1.5 border border-white/60"> <div className="bg-white rounded-xl px-4 py-4"> {/* Content only */} </div> </div>

Multiple Inner Sections

<div className="bg-gradient-to-b from-[#e8e8ea] to-[#dcdce0] rounded-3xl p-2 border border-white/60"> {/* Media */} <div className="h-[200px] rounded-2xl overflow-hidden mb-2">...</div>

{/* Stats bar */} <div className="bg-zinc-100 rounded-xl px-4 py-2 mb-2">...</div>

{/* Main content */} <div className="bg-white rounded-2xl px-5 py-4">...</div> </div>

Checklist

• Outer card uses gradient background

• Border radius decreases inward (3xl → 2xl → xl)

• Inner sections have consistent gap (mb-2 or gap-2 )

• Media section has overflow-hidden

• Shadow appropriate for theme

• Border opacity creates subtle depth