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.
When to use it
- Browse products or articles
- Summarize projects or files
- Group an item's image and metadata
- Build a responsive content grid
When NOT to use it
- Wrap every small piece of content in another card
- Make the whole card clickable when it contains conflicting controls
- Mix unrelated information in one block
- Use cards when a compact list or table is easier to scan
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
Further reading