📖 Step 2: Design - UI/UX Basics#42 / 291
Card
Card
📖One-line summary
A boxed UI component bundling an image, text, and buttons.
✨Example
Typical card component
Card title
Cards are a UI pattern that groups related information in a single container.
⚡Vibe coding prompt examples
>_
Build a product card component. Include image, product name, price, discount-rate badge, and wishlist button, and add a hover effect that increases shadow.
>_
Build a profile card. Use a clean design with avatar, name, title, one-liner bio, and SNS link icons.
>_
Build a card grid layout. Make it responsive: 4 columns on desktop, 2 on tablet, 1 on mobile, with 16px gap between cards.
Try these prompts in your AI coding assistant!