DesignCard
Container card component with surface-200 background, 18px border radius, and elevation-100 shadow. Includes sub-components for structured layouts: Header, Title, Description, Content, Footer.
Component
Import
tsx
import {
  DesignCard,
  DesignCardHeader,
  DesignCardTitle,
  DesignCardDescription,
  DesignCardContent,
  DesignCardFooter,
} from "@/components/ui/design-card";
import { Separator } from "@/components/ui/separator"; // For footer divider
Components
DesignCard, Header, Title, Description, Content, Footer
Background
surface-200 (no inner bg needed)
Border Radius
18px
Shadow
elevation-100

Component Structure

DesignCard uses composition pattern - combine sub-components as needed

<DesignCard>
  <DesignCardHeader>           {/* padding: 24px 24px 16px 24px */}
    <DesignCardTitle>          {/* text-h5, font-primary */}
      Title
    </DesignCardTitle>
    <DesignCardDescription>    {/* text-body, font-secondary */}
      Description text
    </DesignCardDescription>
  </DesignCardHeader>

  <DesignCardContent>          {/* padding: 0 24px 24px 24px */}
    Main content here
  </DesignCardContent>

  <div className="px-6">             {/* Wrapper for separator */}
    <Separator />
  </div>

  <DesignCardFooter>           {/* padding: 16px 24px 24px 24px, flex gap-2 */}
    <DesignButton>Action</DesignButton>
  </DesignCardFooter>
</DesignCard>

DesignCard Props

Main container component

Props
PropTypeDefaultDescription
childrenReactNode-Card content - use sub-components for structure
classNamestring-Additional CSS classes (e.g., custom padding)

Sub-Component Props

All sub-components accept className and standard HTML div attributes

Props
PropTypeDefaultDescription
DesignCardHeaderComponent-Container for title and description. Padding: 24px 24px 16px 24px
DesignCardTitleComponent-Card title. Typography: text-h5, color: font-primary
DesignCardDescriptionComponent-Card description. Typography: text-body, color: font-secondary
DesignCardContentComponent-Main content area. Padding: 0 24px 24px 24px
DesignCardFooterComponent-Action buttons area. Layout: flex gap-2, padding: 16px 24px 24px 24px
Common Patterns

Simple Card with Content

Basic card without header/footer
<DesignCard className="p-6">
  <h4 className="text-h5 text-[var(--color-font-primary)] mb-2">Card Title</h4>
  <p className="text-body text-[var(--color-font-secondary)]">
    Card content goes here.
  </p>
</DesignCard>

Card with Header and Content

Structured card with title and description
<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Settings</DesignCardTitle>
    <DesignCardDescription>Manage your preferences</DesignCardDescription>
  </DesignCardHeader>
  <DesignCardContent>
    {/* Your form or content here */}
  </DesignCardContent>
</DesignCard>

Card with Footer Actions

Full card with action buttons
<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Confirm Action</DesignCardTitle>
    <DesignCardDescription>Are you sure you want to proceed?</DesignCardDescription>
  </DesignCardHeader>
  <DesignCardContent>
    <p className="text-body text-[var(--color-font-secondary)]">
      This action cannot be undone.
    </p>
  </DesignCardContent>
  <div className="px-6"><Separator /></div>
  <DesignCardFooter>
    <DesignButton variant="primary" leftIcon={<DesignIcon name="check" />}>
      Confirm
    </DesignButton>
    <DesignButton variant="tertiary">Cancel</DesignButton>
  </DesignCardFooter>
</DesignCard>

Stats Card

Display metrics or statistics
<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Analytics</DesignCardTitle>
  </DesignCardHeader>
  <DesignCardContent>
    <div className="space-y-3">
      <div className="flex justify-between items-center">
        <span className="text-body text-[var(--color-font-secondary)]">Total Views</span>
        <span className="text-h5 text-[var(--color-font-primary)]">1,234</span>
      </div>
      <div className="flex justify-between items-center">
        <span className="text-body text-[var(--color-font-secondary)]">Engagement</span>
        <span className="text-h5 text-[var(--color-font-primary)]">5.6%</span>
      </div>
    </div>
  </DesignCardContent>
</DesignCard>

Card as Button Container

Toolbar or action group
<DesignCard className="p-2">
  <div className="flex gap-2">
    <DesignButton variant="primary" size="small" leftIcon={<DesignIcon name="open" />}>
      Publish
    </DesignButton>
    <DesignButton variant="secondary" size="small" leftIcon={<DesignIcon name="date" />}>
      Schedule
    </DesignButton>
  </div>
</DesignCard>
When to Use
1

Settings panel or form container

Use full structure with Header, Content, and Footer

<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Account Settings</DesignCardTitle>
    <DesignCardDescription>Update your profile information</DesignCardDescription>
  </DesignCardHeader>
  <DesignCardContent>
    {/* Form fields */}
  </DesignCardContent>
  <div className="px-6"><Separator /></div>
  <DesignCardFooter>
    <DesignButton variant="primary">Save Changes</DesignButton>
  </DesignCardFooter>
</DesignCard>
2

Dashboard stats widget

Use Header with Title only, Content for data

<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Weekly Performance</DesignCardTitle>
  </DesignCardHeader>
  <DesignCardContent>
    {/* Stats or charts */}
  </DesignCardContent>
</DesignCard>
3

Confirmation dialog content

Full structure with emphasized footer actions

<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Delete Draft?</DesignCardTitle>
    <DesignCardDescription>This cannot be undone.</DesignCardDescription>
  </DesignCardHeader>
  <div className="px-6"><Separator /></div>
  <DesignCardFooter>
    <DesignButton variant="primary">Delete</DesignButton>
    <DesignButton variant="tertiary">Cancel</DesignButton>
  </DesignCardFooter>
</DesignCard>
4

Simple content wrapper

Just DesignCard with className for padding

<DesignCard className="p-4">
  <p className="text-body text-[var(--color-font-secondary)]">
    Simple content without structure.
  </p>
</DesignCard>
Do

Use sub-components for structured layouts

<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Title</DesignCardTitle>
  </DesignCardHeader>
  <DesignCardContent>Content</DesignCardContent>
</DesignCard>

Use Separator before DesignCardFooter for visual divider

<DesignCardContent>...</DesignCardContent>
<div className="px-6"><Separator /></div>
<DesignCardFooter>...</DesignCardFooter>

Override padding via className when needed

<DesignCard className="p-4">
  Custom padded content
</DesignCard>

Keep inner content backgrounds transparent

<DesignCard>
  <div className="p-4">{/* No bg-* class */}
    Content here
  </div>
</DesignCard>
Don't

Don't add background colors to inner containers

// ❌ Bad - creates visual noise
<DesignCard>
  <div className="p-4 bg-gray-100">Content</div>
</DesignCard>

// βœ… Good - transparent inner content
<DesignCard>
  <div className="p-4">Content</div>
</DesignCard>

Don't nest DesignCard inside DesignCard

// ❌ Bad - nested cards
<DesignCard>
  <DesignCard>Nested</DesignCard>
</DesignCard>

// βœ… Good - single card with sections
<DesignCard>
  <div className="border-b">Section 1</div>
  <div>Section 2</div>
</DesignCard>

Don't skip Header and put title directly in Content

// ❌ Bad - inconsistent structure
<DesignCard>
  <DesignCardContent>
    <h3>Title Here</h3>
    Content...
  </DesignCardContent>
</DesignCard>

// βœ… Good - use proper structure
<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Title Here</DesignCardTitle>
  </DesignCardHeader>
  <DesignCardContent>Content...</DesignCardContent>
</DesignCard>

Visual Examples

Interactive examples showing all patterns

Simple Card

Card with custom padding

Card Title

Simple card content without sub-components.

<DesignCard className="p-6">
  <h4 className="text-h5 text-[var(--color-font-primary)] mb-2">
    Card Title
  </h4>
  <p className="text-body text-[var(--color-font-secondary)]">
    Simple card content
  </p>
</DesignCard>

Card with Header

Using DesignCardHeader and DesignCardTitle

Analytics Overview
Your performance this week
Views1,234
Engagement5.6%
<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Analytics Overview</DesignCardTitle>
    <DesignCardDescription>
      Your performance this week
    </DesignCardDescription>
  </DesignCardHeader>
  <DesignCardContent>
    Content area
  </DesignCardContent>
</DesignCard>

Card with Footer

Full structure with action buttons

Confirm Action
Please review before proceeding

Are you sure you want to proceed with this action?

<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Confirm Action</DesignCardTitle>
    <DesignCardDescription>
      Please review before proceeding
    </DesignCardDescription>
  </DesignCardHeader>
  <DesignCardContent>...</DesignCardContent>
  <div className="px-6"><Separator /></div>
  <DesignCardFooter>
    <DesignButton variant="primary">Confirm</DesignButton>
    <DesignButton variant="tertiary">Cancel</DesignButton>
  </DesignCardFooter>
</DesignCard>

Action Card

Card as toolbar container

<DesignCard className="p-2">
  <div className="flex gap-2">
    <DesignButton variant="primary" size="small" leftIcon={<DesignIcon name="open" />}>
      Publish
    </DesignButton>
    <DesignButton variant="secondary" size="small" leftIcon={<DesignIcon name="date" />}>
      Schedule
    </DesignButton>
  </div>
</DesignCard>

Settings Card

Form-like settings panel

Project Settings
Manage your project configuration
Project Name
My Awesome Project
Status
Active
<DesignCard>
  <DesignCardHeader>
    <DesignCardTitle>Project Settings</DesignCardTitle>
    <DesignCardDescription>
      Manage your project configuration
    </DesignCardDescription>
  </DesignCardHeader>
  <DesignCardContent>
    {/* Settings fields */}
  </DesignCardContent>
  <div className="px-6"><Separator /></div>
  <DesignCardFooter>
    <DesignButton variant="primary">Save</DesignButton>
    <DesignButton variant="secondary">Reset</DesignButton>
  </DesignCardFooter>
</DesignCard>

List Card

Card with stacked items

Item 1
Item 2
Item 3
<DesignCard className="p-3 space-y-2">
  <div className="text-sm text-[var(--color-font-primary)]">Item 1</div>
  <div className="text-sm text-[var(--color-font-primary)]">Item 2</div>
  <div className="text-sm text-[var(--color-font-primary)]">Item 3</div>
</DesignCard>

Important Design Guideline

Content containers inside DesignCard should NOT have background colors.

The card itself provides the visual container with surface-200 background. Adding additional background colors to inner content creates visual noise and breaks the design hierarchy.