← Back to Design System 2. Components Card

Basic Card

Card Title This is a description for the card. Cards are flexible containers that combine header, content, and actions.
Cancel Save

Slot Combinations

Header Only
Title Description text appears below the header.
Input Form
With Actions Action buttons for user interactions.
Confirm Cancel

Close Button Patterns

Dismissible Card Card can be dismissed with close button.
Icon Close Using icon button for close action.

Real-World Patterns

Settings
Confirmation Dialog Are you sure you want to delete this item? This action cannot be undone.
Cancel Delete
Welcome to Smoothie A comprehensive design system for building consistent user interfaces.
Learn More Get Started
Download Complete File "design-tokens.json" (245 KB) downloaded successfully.
Show in Folder Done

Slot Guide

Card Slots

  • header — Card title or heading (appears in top-left with flex layout)
  • close — Optional close button or icon (appears in top-right)
  • description — Text description or supporting content
  • input — Form input, text field, or custom input element
  • actions — Action buttons (footer area)