nested-card

📁 ainergiz/design-inspirations 📅 9 days ago

总安装量

周安装量

#61506

全站排名

安装命令

npx skills add https://github.com/ainergiz/design-inspirations --skill nested-card

Agent 安装分布

opencode 3

gemini-cli 3

claude-code 3

github-copilot 3

codex 3

kimi-cli 3

Skill 文档

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

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台