Card
UI ComponentsA contained, flexible component that groups related information and actions, typically with a border, shadow, or background that visually separates it from the page.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Card coming soon.
How It Works in Apps/Websites
Cards are one of the most versatile UI patterns. They create visual containers that group related content—like an image, title, description, and action button—into a single, scannable unit. Cards work well in grids and lists, making them perfect for product catalogs, blog posts, user profiles, and dashboards. They can be clickable (linking to a detail page) or contain interactive elements within them.
How AI Interprets This Term
When you say 'card', AI understands this as a rectangular container with rounded corners (usually 8-16px radius), subtle shadow or border, white/light background (or dark in dark mode), and internal padding. It expects the card to contain structured content like an image at top, title, description text, and possibly action buttons at the bottom.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a card with an image, title, and description
Design a product card with image at top, product name, price, star rating, and 'Add to Cart' button. Include hover state with slight elevation increase.
Show a 3-column grid of cards: one basic card, one with horizontal layout, and one stat card with large number and trend indicator
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Displaying collections of similar items (products, articles, users)
- •Grouping related information that users need to scan quickly
- •Creating visual hierarchy on dense pages
- •Dashboard widgets and stat displays
When NOT to Use
- •For single pieces of content that don't need grouping
- •When space is extremely limited
- •For primary navigation elements