nested-card

name	nested-card
description	Creates cards with an outer gradient container and inner content card. Use when building premium card designs with depth, layered card layouts, or cards with image sections and content sections.

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