nested-card

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

浅色模式

tsx

<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>

tsx

<div className="bg-gradient-to-b from-[#e8e8ea] to-[#dcdce0] rounded-3xl p-2 shadow-xl shadow-zinc-400/30 border border-white/60">
  {/* 媒体区域 */}
  <div className="relative h-[240px] w-full rounded-2xl overflow-hidden mb-2 border border-white/40">
    {/* 图片、轮播或媒体内容 */}
  </div>

  {/* 内层内容卡片 */}
  <div className="bg-white rounded-2xl px-5 py-4">
    {/* 卡片内容 */}
  </div>
</div>

Dark Mode

深色模式

tsx

<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>

tsx

<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">
  {/* 媒体区域 */}
  <div className="relative h-[240px] w-full rounded-2xl overflow-hidden mb-2 border border-zinc-600/30">
    {/* 图片、轮播或媒体内容 */}
  </div>

  {/* 内层内容卡片 */}
  <div className="bg-zinc-900 rounded-2xl px-5 py-4">
    {/* 卡片内容 */}
  </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`

元素	浅色模式	深色模式
外层卡片
背景	`bg-gradient-to-b from-[#e8e8ea] to-[#dcdce0]`	`bg-gradient-to-b from-zinc-700 to-zinc-800`
边框	`border-white/60`	`border-zinc-600/40`
阴影	`shadow-xl shadow-zinc-400/30`	`shadow-xl shadow-black/50`
圆角	`rounded-3xl`	`rounded-3xl`
内边距	`p-2`	`p-2`
媒体区域
边框	`border-white/40`	`border-zinc-600/30`
圆角	`rounded-2xl`	`rounded-2xl`
内层卡片
背景	`bg-white`	`bg-zinc-900`
圆角	`rounded-2xl`	`rounded-2xl`
内边距	`px-5 py-4`	`px-5 py-4`

Sizing Variations

尺寸变体

Preview (compact)

预览版（紧凑）

tsx

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

tsx

// 外层
<div className="rounded-2xl p-1.5 w-[300px]">
  {/* 媒体区域: h-[140px], rounded-xl */}
  {/* 内层: rounded-xl, px-3.5 py-3 */}
</div>

Detail Page (full)

详情页版（完整）

tsx

// 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]`

tsx

// 外层
<div className="rounded-3xl p-2 max-w-[420px]">
  {/* 媒体区域: h-[240px], rounded-2xl */}
  {/* 内层: rounded-2xl, px-5 py-4 */}
</div>

使用场景	外层圆角	内层圆角	内边距	媒体区域高度
预览	`rounded-2xl`	`rounded-xl`	`p-1.5`	`h-[140px]`
详情	`rounded-3xl`	`rounded-2xl`	`p-2`	`h-[240px]`

Full Example

完整示例

tsx

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>
  );
}

tsx

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">
      {/* 图片区域 */}
      <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>

      {/* 内容区域 */}
      <div className="bg-white rounded-2xl px-5 py-4">
        {/* 标题栏 */}
        <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>

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

        {/* 标签或特性 */}
        <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

无媒体区域

tsx

<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>

tsx

<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">
    {/* 仅含内容 */}
  </div>
</div>

Multiple Inner Sections

多内层区域

tsx

<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>

tsx

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

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

  {/* 主内容 */}
  <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

外层卡片使用渐变背景
圆角从外到内依次减小（3xl → 2xl → xl）
内层区域间距一致（
```
mb-2
```
或
```
gap-2
```
）
媒体区域设置
```
overflow-hidden
```
阴影样式与主题匹配
边框透明度营造微妙层次感