Collage Topic Cards
介绍
「了解更多」专题卡片四列网格：每张卡顶部是栏目标记，中间一幅复古拼贴插画，下方粗体标题与说明；悬停时插画轻微放大、饱和度提升，标题出现细下划线，窄屏变两列再变单列。
拆自整页模板 知衡 AI 研究公司首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Collage Topic Cards 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add collage-topic-cards
mcp › 使用 8pt MCP 调用 get_component("collage-topic-cards")
代码
Collage Topic Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-ctc"><div class="x-ctc__head"><h2>了解更多</h2></div><div class="x-ctc__grid"><a class="x-ctc__card" href="#"><span class="x-ctc__meta"><span class="x-ctc__chip" aria-hidden="true"><i></i><i></i><i></i></span>研究院</span><span class="x-ctc__img"><img src="https://8pt.dev/api/media/7082da6f58121ee6d144f5bd.webp" alt="" loading="lazy"></span><b class="x-ctc__t">知衡研究院</b><span class="x-ctc__d">我们为应对强大 AI 可能给社会带来的重大挑战而设立的长期研究计划。</span></a><a class="x-ctc__card" href="#"><span class="x-ctc__meta"><span class="x-ctc__chip" aria-hidden="true"><i></i><i></i><i></i></span>对齐</span><span class="x-ctc__img"><img src="https://8pt.dev/api/media/8d0a8d591ecc8172955290e8.webp" alt="" loading="lazy"></span><b class="x-ctc__t">模型准则</b><span class="x-ctc__d">一份详细的说明，写下我们对模型价值观与行为方式的设想。</span></a><a class="x-ctc__card" href="#"><span class="x-ctc__meta"><span class="x-ctc__chip" aria-hidden="true"><i></i><i></i><i></i></span>扩展政策</span><span class="x-ctc__img"><img src="https://8pt.dev/api/media/f5e7e6b1a9c40c4c66a10f2a.webp" alt="" loading="lazy"></span><b class="x-ctc__t">审慎扩展政策</b><span class="x-ctc__d">我们自愿遵守的框架，用来管理先进 AI 系统可能带来的严重风险。</span></a><a class="x-ctc__card" href="#"><span class="x-ctc__meta"><span class="x-ctc__chip" aria-hidden="true"><i></i><i></i><i></i></span>政策</span><span class="x-ctc__img"><img src="https://8pt.dev/api/media/b8bec851255ff4cb427fd6f8.webp" alt="" loading="lazy"></span><b class="x-ctc__t">我们对 AI 安全的核心看法</b><span class="x-ctc__d">为什么我们认为 AI 安全研究至关重要，以及知衡如何着手。</span></a></div></div>
.x-ctc{box-sizing:border-box;width:100%;padding:0 clamp(20px,5.5vw,80px);color:#141413;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-ctc *,.x-ctc *::before,.x-ctc *::after{box-sizing:border-box}.x-ctc__head{padding:14px 0 18px;border-top:1px solid #e3e0d6}.x-ctc__head h2{margin:0;font-size:13px;font-weight:650}.x-ctc__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:22px;border-top:1px solid #e3e0d6}.x-ctc__card{display:flex;flex-direction:column;color:inherit;text-decoration:none}.x-ctc__meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#6f6b61;font-size:12px}.x-ctc__chip{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 8px;border-radius:99px;background:#e3e0d6}.x-ctc__chip i{width:3px;height:3px;border-radius:50%;background:#8a8579}.x-ctc__img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#e3e0d6}.x-ctc__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}.x-ctc__card:hover .x-ctc__img img{transform:scale(1.045);filter:saturate(1.1)}.x-ctc__t{margin:16px 0 8px;font-size:16.5px;font-weight:650;line-height:1.35}.x-ctc__card:hover .x-ctc__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}.x-ctc__d{color:#5b574e;font-size:13px;line-height:1.6}@media (max-width:980px){.x-ctc__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}@media (max-width:520px){.x-ctc{padding:0 20px}.x-ctc__grid{grid-template-columns:minmax(0,1fr)}.x-ctc__img{aspect-ratio:4/3}}@media (prefers-reduced-motion:reduce){.x-ctc__img img{transition:none}}订阅 Builder 查看完整源码。查看价格