Back to Details

card

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Components: Card Layout

组件：Card Layout

Guides card layout design for scannable, responsive content display. Cards are self-contained containers that group related content; used in grids for blog posts, products, templates, tools, features, galleries, and integrations.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
指导卡片布局设计，以实现易扫描、响应式的内容展示。卡片是将相关内容归为一组的独立容器，以网格形式用于博客文章、产品、模板、工具、功能、图库和集成内容的展示。
调用规则：首次使用时，如果对用户有帮助，可以先用1-2句话介绍该技能的覆盖范围和价值，再提供核心输出。如果是后续使用或者用户要求跳过介绍，则直接提供核心输出。

Card Anatomy

卡片结构

ElementPurpose
ContainerBorder, background, shadow; consistent padding
Image / ThumbnailVisual anchor; consistent aspect ratio (1:1, 4:3 common)
TitleClear; keyword-rich where relevant
Description / MetadataSupporting text; date, author, category
CTAAction button or link; "View," "Use," "Connect," etc.
Principle: One card = one topic. Keep each card focused for scannability.
元素用途
容器边框、背景、阴影；统一内边距
图片 / 缩略图视觉锚点；统一宽高比（常用1:1、4:3）
标题清晰易懂；相关场景下可包含关键词
描述 / 元数据辅助文本；日期、作者、分类等信息
CTA操作按钮或链接；例如“查看”、“使用”、“连接”等
设计原则：一张卡片对应一个主题。保持每张卡片内容聚焦，方便用户快速扫描。

Card Types by Use Case

按使用场景划分的卡片类型

TypeTypical ElementsPage Skill
Product cardImage, name, price, CTA (Add to cart, View)products-page-generator
Template cardThumbnail, name, short description, "Use" or "Preview" CTAtemplate-page-generator
Tool cardName, one-line benefit, CTA to tool pagetools-page-generator
Feature cardName, benefit, optional screenshotfeatures-page-generator
Gallery / Showcase itemThumbnail, title, creator, linkshowcase-page-generator
Integration cardLogo, name, short description, "Connect" or "Install"integrations-page-generator
Blog / Article cardCover image, title, excerpt, date, authorblog-page-generator, article-page-generator
Resource cardThumbnail, title, format (guide, webinar), CTAresources-page-generator
类型典型元素关联页面技能
Product card图片、名称、价格、CTA（加入购物车、查看详情）products-page-generator
Template card缩略图、名称、简短描述、“使用”或“预览”CTAtemplate-page-generator
Tool card名称、一行介绍的优势、指向工具页面的CTAtools-page-generator
Feature card名称、优势、可选截图features-page-generator
Gallery / Showcase item缩略图、标题、创作者、链接showcase-page-generator
Integration cardLogo、名称、简短描述、“连接”或“安装”CTAintegrations-page-generator
Blog / Article card封面图、标题、摘要、日期、作者blog-page-generator、article-page-generator
Resource card缩略图、标题、格式（指南、网络研讨会）、CTAresources-page-generator

Layout & Responsiveness

布局与响应式适配

  • Grid: CSS Grid 
    repeat(auto-fill, minmax())
    or Flexbox; columns adapt to viewport
  • Mobile: Single column on small screens; 2–4 columns on desktop
  • Consistency: Same padding, spacing, and aspect ratios across cards
  • Hover: Subtle elevation (shadow, translate-y); avoid scale that causes layout shift (CLS)
  • Grid：CSS Grid 
    repeat(auto-fill, minmax())
    或 Flexbox；列数随视口大小自适应
  • 移动端：小屏幕下为单列布局；桌面端为2-4列布局
  • 一致性：所有卡片的内边距、间距和宽高比保持统一
  • 悬停效果：微妙的层级变化（阴影、y轴偏移）；避免使用缩放效果导致布局偏移（CLS）

Design Principles

设计原则

PrinciplePractice
Visual hierarchyTitle > description > CTA; clear flow
ScannabilityMinimal text; benefit-led copy
ConsistencySame structure across all cards in a grid
Action clarityOne primary CTA per card; avoid choice overload
原则实践方法
视觉层级标题 > 描述 > CTA；流程清晰
易扫描性文本精简；文案突出收益
一致性同一网格内所有卡片的结构保持一致
操作清晰度每张卡片仅设置一个主要CTA；避免选择过载

SEO & Schema

SEO与Schema

  • Cards themselves: No specific schema; layout is UI
  • Content in cards: Use appropriate schema for the page (Product, Article, ItemList, etc.); see schema-markup
  • Images: Alt text on thumbnails; see image-optimization
  • Links: Descriptive anchor text; internal linking; see internal-links
  • 卡片本身：无特定schema；属于UI布局组件
  • 卡片内的内容：根据页面类型使用对应的schema（Product、Article、ItemList等）；参考 schema-markup 技能
  • 图片：缩略图添加alt文本；参考 image-optimization 技能
  • 链接：锚点文本描述清晰；内部链接建设；参考 internal-links 技能

Grid vs List vs Masonry vs Carousel

Grid vs List vs Masonry vs Carousel

LayoutBest forSkill
GridVisual content (products, templates, gallery); equal emphasisgrid
ListText-heavy (blog index, docs); compact; scan by titlelist
MasonryVarying heights; image gallery, portfoliomasonry
CarouselLimited space; testimonials, logos, featured rotationcarousel
布局类型适用场景关联技能
Grid视觉内容（产品、模板、图库）；内容权重均等grid
List文本密集内容（博客索引、文档）；紧凑；可按标题快速扫描list
Masonry高度不统一的内容；图片库、作品集masonry
Carousel空间有限的场景；用户评价、Logo展示、精选内容轮播carousel

Related Skills

关联技能

  • products-page-generator: Product cards, grid layout, category pages
  • template-page-generator: Template cards, gallery structure
  • tools-page-generator: Tool cards, toolkit hub
  • features-page-generator: Feature grid/list
  • showcase-page-generator: Gallery grid, per-item format
  • integrations-page-generator: Catalog grid, integration cards
  • category-page-generator: Product grid, consistent layout
  • grid: Grid layout for card display; when to use grid
  • list: List layout; cards in list format
  • masonry: Masonry for varying-height cards (gallery)
  • carousel: Carousel for card slides (testimonials, featured)
  • hero-generator: Hero vs card—hero is single above-fold; cards are repeated units
  • brand-visual-generator: Typography, spacing, visual consistency
  • image-optimization: Card thumbnail optimization, alt text, LCP
  • products-page-generator：产品卡片、网格布局、分类页面
  • template-page-generator：模板卡片、图库结构
  • tools-page-generator：工具卡片、工具集合中心
  • features-page-generator：功能网格/列表
  • showcase-page-generator：图库网格、单项内容格式
  • integrations-page-generator：目录网格、集成卡片
  • category-page-generator：产品网格、统一布局
  • grid：卡片展示的网格布局；网格适用场景
  • list：列表布局；列表格式的卡片
  • masonry：适配高度不统一卡片的瀑布流布局（图库）
  • carousel：卡片轮播实现（用户评价、精选内容）
  • hero-generator：Hero与卡片的区别——Hero是首屏单个模块；卡片是可重复单元
  • brand-visual-generator：排版、间距、视觉一致性
  • image-optimization：卡片缩略图优化、alt文本、LCP