卡片

Card

UI 组件也叫：卡片容器、信息卡、Panel、面板

一句话：一块带边框或阴影的独立矩形区域，把一组相关的图片、标题、说明和操作收在一起，自成一体。

详细解释

卡片是一个有边框、圆角或阴影的矩形容器，里面放围绕同一主题的一组信息，常见结构是顶部封面图，中间标题和简介，底部操作按钮。多张卡片排成网格，就是商品列表、文章推荐、课程列表等常见页面；仪表盘上的每个数据模块也常用卡片包起来。

卡片的长处是视觉突出、每张自成一体，适合以图片为主、数量不多、用户逐个挑选的内容。短处是占空间、字段不对齐：条目同质、数量多、需要逐字段比较时，应该用表格；每条只有标题加说明、需要紧凑浏览时，应该用列表。

卡片里的信息要精简，只放帮助用户判断要不要点进去的关键内容，完整信息留给详情页。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

用卡片网格展示课程，桌面每行 3 张、平板 2 张、手机 1 张，间距 24px。卡片白底、圆角 8px、浅阴影：顶部 16:9 封面图，下方是最多两行的标题、讲师和价格，底部放「立即学习」按钮。悬停时轻微上浮、阴影加深，整张可点击。

由带边框或阴影的容器组成，内部一般分为封面图区、标题与正文区、底部操作区，也可以只有标题和内容。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。