Container card component with surface-200 background, 18px border radius, 6px padding, and elevation-100 shadow
Use DesignCardHeader, DesignCardTitle, and DesignCardDescription for structured card layouts
Card with header and title
{}This is the card content area with proper spacing and structure.
Complete card header with description
{}Card with footer actions
{}Are you sure you want to proceed with this action?
All components combined
{}Default card with surface-200 background
{}This is the inner content area without additional background
Stack multiple items with gap
{ className: "space-y-2" }Wrap buttons in a card layout
{}Override padding with className
{ className: "p-4" }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.
<DesignCard>
<div className="p-4">{/* No bg-* class */}
Content here
</div>
</DesignCard><DesignCard>
<div className="p-4 bg-gray-100">{/* Don't add bg */}
Content here
</div>
</DesignCard>