商品卡
卖货的卡：商品图、名字、价格、销量或评价，点进去就是详情。
基础卡片
Basic Card
一块内容一个卡：图在上、标题摘要在下，带一两个操作——商品、文章、课程都用它装。
全平台通用内容组织内容区组件
大白话说明
基础卡片是最通用的内容容器：媒体区、标题、摘要、元信息、操作区自上而下，用边框或阴影从背景里浮出来。网格里等高对齐、列表里通栏排，都成立。
什么时候用
内容条目需要图文混排且条目间地位平等时——Feed、课程列表、作品集的第一选择。
什么时候不用
纯文字短条目用列表行更省空间；数据字段多的条目用表格，卡片装不下比较。
细节与变体
- 标题最多两行、摘要最多两行，超出省略——卡片的整齐靠截断纪律
- 整卡可点时，卡内不要再放第二个可点元素（嵌套点击是事故源）
- 阴影和边框二选一，描边 + 大阴影会显脏
配套效果见下方「可用效果」。
配套提示词（点开填空、复制）
可用效果
参考实现（开源）
- Ant Design（蚂蚁） ↗ MIT · 免费（MIT）
国内中后台的事实标准：表格、表单、列表都是行业参照物。
- Mantine ↗ MIT · 免费（MIT）
React 组件与 hooks 大礼包：100+ 组件，连日期选择这种难啃的都有。
- Magic UI 动效组件 ↗ MIT · 免费（MIT）
React + Tailwind 的动效组件集：跑马灯、光晕、数字滚动都有，本站效果库的重要参考生态。