组件分类 · 卡片
卡片组件
功能介绍、案例展示、团队成员和便当格（bento）布局用的卡片。悬停、光效和层叠动效都是原生 CSS 与 JS。
共 23 个 · 更新于
适合用在哪里
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
怎么用
- 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
- 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
- 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。
npm i -g @8pt-dev/cli 8pt login 8pt search "卡片" 8pt add suiyun-deploy-bento
全部 23 个卡片组件
- Live Deploy Bento 实时部署便当格
四格便当布局：部署列表不断有新构建从顶部推入，状态在排队、构建、已部署间流转；整块橙色卡讲一张网络；默认安全格里盾牌描边循环描画；AI 格右侧终端逐行打出后台智能体的工作日志。
- Trio Capability Cards 三步能力卡片
标题加三张白色能力卡：第一张是带彩色光晕的输入框自动打字，第二张是编辑器预览里虚线选框在标题与按钮间切换、光标跟随移动，第三张是侧边菜单高亮逐项轮换。
- Story Stat Carousel 客户故事轮播
客户故事横向轮播：两侧卡片只露出虚构品牌字标，居中卡片展开为故事简介、渐变左边框引语、三项示意数据、头像署名与阅读按钮；点击侧卡或左右按钮平滑切换。
- Collage Topic Cards 拼贴专题卡片
「了解更多」专题卡片四列网格：每张卡顶部是栏目标记，中间一幅复古拼贴插画，下方粗体标题与说明；悬停时插画轻微放大、饱和度提升，标题出现细下划线，窄屏变两列再变单列。
- Agent Use Cards 智能体用例卡片
一行五张白色细描边小卡，每张左上一枚带内阴影的彩色圆形图标、底部一句用例名和小箭头；悬停时卡片上浮、箭头右移。适合功能入口或用例导航。
- AI Feature Bento AI 能力便当格
浅灰圆角便当格：会议记录卡带实时转写波形条，问答卡带逐字打出的提问框和循环生长的柱状图，通栏卡左侧标题、右侧任务列表与智能体对话依次浮现；悬停时箭头右移。
- Tagged Journal Cards 标签文章卡片
三列文章卡片：近方形图片右上角挂一枚半透明磨砂标签，下方粗体标题配衬线灰色副句；第三张用几颗浮动的渲染球拼成封面，悬停时图片缓慢放大。
- MCP Connect Steps MCP 三步接入
三张步骤卡讲清接入流程：复制链接时弹出“已复制”提示，中间是迷你工具连线示意，第三张的授权弹窗由动画光标点下“允许”并变成已允许；底部一排适配工具胶囊。
- Masonry Review Wall 瀑布评价墙
四列瀑布流的用户短评墙：头像、昵称带蓝色认证徽章和身份标签，卡片进入视口时依次上浮出现，底部整体渐隐收尾，悬停卡片泛起紫色阴影；窄屏逐级降为三列、两列、单列。
- Builder Feature Cards 建站器功能卡
黑到紫渐变背景上的建站器介绍：标签胶囊、双层大标题、自动打字的提示词输入框，下方四张白色功能卡分别演示模板叠放、对话气泡、区块替换与域名发布，配两颗行动按钮。
- Scenario Metric Cards 场景指标卡片
四张白色圆角卡片一排：彩色圆形图标与标题、一段任务描述，底部两枚浅灰指标格分别写目标角色和触达方式，悬停时整卡上浮并加深投影。
- Fading Quote Wall 渐隐评价墙
三列瀑布流的短评卡片墙，进入视口时卡片依次上浮出现，底部整体渐隐收尾；每张卡片带引号图标、头像与昵称，悬停轻微上浮。窄屏改为两列或单列。
- Library Bento Grid 六格内容类型便当
三乘二的浅灰圆角便当格，每格一个内容类型：扇形 App 图标、书架式网站缩略、手机界面、双屏流程、脉冲动效和轮流高亮的工具条，悬停时各自展开或上浮。
- Branch Tool Grid 分叉连线工具网格
中心节点用贝塞尔曲线分叉到五列工具卡片，每张卡片带彩色图标块与等宽小字，悬停轻微上浮，最后一格用主色收尾。适合集成目录、插件市场。
- Media Bento Grid 媒体便当格
六宫格的能力便当布局：一张横跨两列的大图、一张跨两行的竖图，下面两小两宽。每张卡是满版画面加底部渐暗，悬停时画面缓慢放大、标题后的箭头前移。
- Director Art Cards 导演台动效卡
四张纯 CSS 画出来的功能卡，一大一小交错排布：闪烁星空配虚线节点、橙色沙丘地平线、划过夜空的彗星、跳动的声波和呼吸光点。不用任何图片，适合放在「功能详解」区。
- Glass Folder 玻璃文件夹
毛玻璃质感的文件夹图标，正面印着内容类型，底下标出项目数与大小。悬停时文件夹上浮、里面的纸张探出头；空闲时三个文件夹轮流“呼吸”。
- File Preview Cards 文件预览卡片
每个文件都以卡片呈现真实预览：文档首页、照片、幻灯片封面、表格、视频画面。右上角 S / M / L 三档切换卡片大小，点选卡片有选中描边。
- Spotlight Card 聚光卡片
光斑跟随指针移动，同时点亮卡片边框。只移动 transform，滚动和悬停都不掉帧。
- Card Stack 卡片堆叠
点击或横向拖动最上面的卡片，它会飞出并回到牌堆底部。
- Bento Grid 便当格布局
四格不等宽的功能布局：柱状图逐根升起、数字递增、标签轮播。悬停的格子轻微上浮，其余格子退后。
- Border Beam Card 流光边框卡片
一道光束沿卡片边框循环流动，内容区保持安静。光束是旋转的锥形渐变，只动 transform。
- Tilt Card 3D 倾斜卡片
卡片随指针做 3D 倾斜，高光反向移动，内容层有视差。离开时弹簧回正。
常见问题
8pt 的卡片组件能用在 React、Vue 或 Next.js 项目里吗？
能。组件源码是原生 HTML、CSS 和少量 JS；复制提示词交给模型后，它会按你项目的技术栈改写成 React、Vue、Svelte 等写法，并把颜色、字体接到你已有的设计变量上。
怎么把卡片组件装进项目？
三种方式：在组件页复制提示词交给模型；用 8pt CLI 运行 8pt add <组件 slug>；或者接入 8pt MCP 后在对话里直接说需求。复制提示词、CLI 和 MCP 需要 Builder 方案（Builder 方案 ¥45/月、¥128/季或 ¥379/年；另有创始终身版 ¥899，一次付款，限 100 席）。
卡片多了显得乱怎么办？
同一组卡片保持相同的圆角、内边距和标题层级，只让一张重点卡片更大或带强调色；便当格布局用大小对比制造主次，而不是给每张卡片不同的样式。
可以用在商业项目里吗？
可以。你可以在自己的项目（含商业项目）中使用复制或安装的代码，但不能把 8pt 的内容整体转售或搭建同类素材库。