Collage Topic Cards
A four-column grid of Learn more feature cards: each has a section label on top, a vintage collage illustration in the middle and a bold title with description below. On hover the illustration zooms slightly and gains saturation and the title gets a thin underline; it drops to two columns, then one, on narrow screens.
Taken from the page template Zhiheng AI Research Company Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Collage Topic Cards to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
Code
Source for Collage Topic Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<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}}