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

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>

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