Release Spec Cards
Overview
Three beige-gray rounded announcement cards: pill tag, section and date on top, bold title and summary, two hairline-separated links for model details and system notes, and a full-width Read announcement button at the bottom. Cards lift on hover and the arrow slides right.
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 Release Spec Cards to your project in your colors.
Where to use it
Dashboards, data tables, chart cards, comparison tables and status panels.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add release-spec-cards
mcp › Use 8pt MCP to call get_component("release-spec-cards")
Code
Source for Release Spec Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-rsc"><article class="x-rsc__card"><div class="x-rsc__meta"><span class="x-rsc__chip" aria-hidden="true"><i></i><i></i><i></i></span><span>发布</span><span class="x-rsc__when">本周</span></div><h3 class="x-rsc__t">推出青岚与远岫</h3><p class="x-rsc__d">我们迄今最强的两款模型，面向艰深的技术工作。青岚在编程、金融与科学研究上树立了新的标准。</p><dl class="x-rsc__rows"><div><dt>模型详情</dt><dd><a href="#">青岚<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a><a href="#">远岫<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></dd></div><div><dt>系统说明</dt><dd><a href="#">查看<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v10"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5.5 19.5h13"/></svg></a></dd></div></dl><a class="x-rsc__btn" href="#">阅读公告<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></article><article class="x-rsc__card"><div class="x-rsc__meta"><span class="x-rsc__chip" aria-hidden="true"><i></i><i></i><i></i></span><span>发布</span><span class="x-rsc__when">上月</span></div><h3 class="x-rsc__t">推出云栖</h3><p class="x-rsc__d">云栖在智能体编程与知识工作上更进一步，适合需要长时间自主推进、反复校验的复杂任务。</p><dl class="x-rsc__rows"><div><dt>模型详情</dt><dd><a href="#">云栖<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></dd></div><div><dt>系统说明</dt><dd><a href="#">查看<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v10"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5.5 19.5h13"/></svg></a></dd></div></dl><a class="x-rsc__btn" href="#">阅读公告<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></article><article class="x-rsc__card"><div class="x-rsc__meta"><span class="x-rsc__chip" aria-hidden="true"><i></i><i></i><i></i></span><span>发布</span><span class="x-rsc__when">上月</span></div><h3 class="x-rsc__t">推出晴川</h3><p class="x-rsc__d">晴川是日常任务的稳健之选：响应更快、运行更省，适合在团队与产品中大规模部署。</p><dl class="x-rsc__rows"><div><dt>模型详情</dt><dd><a href="#">晴川<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></dd></div><div><dt>系统说明</dt><dd><a href="#">查看<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v10"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5.5 19.5h13"/></svg></a></dd></div></dl><a class="x-rsc__btn" href="#">阅读公告<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></article></div>
.x-rsc{box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;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-rsc *,.x-rsc *::before,.x-rsc *::after{box-sizing:border-box}.x-rsc svg{width:1em;height:1em;flex:none}.x-rsc__card{display:flex;flex-direction:column;min-height:380px;padding:22px 22px 18px;border-radius:14px;background:#f0eee6;transition:background .25s,transform .35s cubic-bezier(.2,.8,.2,1)}.x-rsc__card:hover{background:#ebe8de;transform:translateY(-3px)}.x-rsc__meta{display:flex;align-items:center;gap:10px;color:#6f6b61;font-size:12px}.x-rsc__chip{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 8px;border-radius:99px;background:#e3e0d6}.x-rsc__chip i{width:3px;height:3px;border-radius:50%;background:#8a8579}.x-rsc__t{margin:14px 0 10px;font-size:21px;font-weight:650;line-height:1.3;letter-spacing:-.005em}.x-rsc__d{margin:0;color:#3d3a34;font-size:13.5px;line-height:1.65}.x-rsc__rows{margin:auto 0 0;padding-top:28px}.x-rsc__rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #e3e0d6}.x-rsc__rows dt{font-size:13px;font-weight:550}.x-rsc__rows dd{display:flex;flex-wrap:wrap;gap:14px;margin:0}.x-rsc__rows a{display:inline-flex;align-items:center;gap:4px;color:#3d3a34;font-size:13px;text-decoration:none}.x-rsc__rows a:hover{color:#141413;text-decoration:underline;text-underline-offset:3px}.x-rsc__btn{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;margin-top:8px;border-radius:9px;background:#e3e0d6;color:#141413;font-size:13.5px;font-weight:550;text-decoration:none;transition:background .2s}.x-rsc__btn svg{transition:transform .25s}.x-rsc__btn:hover{background:#d8d4c8}.x-rsc__btn:hover svg{transform:translateX(3px)}@media (max-width:980px){.x-rsc{grid-template-columns:minmax(0,1fr)}.x-rsc__card{min-height:0}}@media (max-width:600px){.x-rsc{padding:0 20px}}@media (prefers-reduced-motion:reduce){.x-rsc__card,.x-rsc__btn svg{transition:none}}Subscribe to Builder to see the full source.See pricing