Card
You might say
Make each product a clickable card with the image on top and the name and price underneath.
Keep information about one item in a single blockA card usually groups an image, title, summary, and actions for the same object. It works well for browsing similar items. Make it clear whether the whole card is clickable; if only parts perform actions, keep links and buttons separate.
You can say this to an AI Agent
Make each marketplace template an independent card with cover, name, author, and price, with the main area opening its detail page. Avoid nested cards and verify inner buttons do not trigger navigation.
When to use it
- Browse products or articles
- Summarize projects or filesRevenue¥ 86.4wOrders12,846
- Group an item's image and metadataNotification settingsEmail notificationsSMS notifications
- Build a responsive content grid
When NOT to use it
- Wrap every small piece of content in another cardAnnual summary reportLong-form content already forms its own section; an extra card boundary interrupts reading
- Make the whole card clickable when it contains conflicting controlsOuter cardInner card
- Mix unrelated information in one blockAccount & security›Notifications›Privacy settings›
- Use cards when a compact list or table is easier to scanEven the page’s only content is boxed in
Anatomy
Introduction to AI illustrated books
One card for each component, and you can understand each one in 3 minutes.
A self-contained unit of related content
Optional media that helps identify the card’s subject
The card’s primary label
Supporting context, such as a summary or description
Optional actions that apply to this card
Variants
Basic
Team Knowledge Base
Contains 47 documents, updated weekly.
When a group of text needs to be understood as one unit
With Cover
Introduction to AI illustrated books
When the image is the primary identifying information, place the cover at the top of the card
Flat
Quick entry
Weaken the border and blend into the background.
When the page background already separates the content area, use a subtler card border
With Actions
Website refresh v2
Users want to preview or edit directly on the card
Typical use cases
Product gallery
An illustrated guide to AI
Each concept explained in one card, in about three minutes.
How I organize my desk
A practical setup for everyday gear and storage.
Summer city walk
A two-hour weekend photo walk.
Article feed
Monthly sales
¥ 864K
↑ 12.5%
Orders
12,846
↑ 8.3%
Refund rate
2.1%
↓ 0.4%
Project dashboard
Notification settings
Email notifications
Text notifications
Privacy settings
Public profile
Template browser
Wireless Headphones Pro
¥ 29920% off
Cat-Paw Mechanical Keyboard
¥ 199New
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check