Tagged Journal Cards
介绍
三列文章卡片：近方形图片右上角挂一枚半透明磨砂标签，下方粗体标题配衬线灰色副句；第三张用几颗浮动的渲染球拼成封面，悬停时图片缓慢放大。
拆自整页模板 厚土 创意工作室首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Tagged Journal Cards 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add houtu-journal-cards
mcp › 使用 8pt MCP 调用 get_component("houtu-journal-cards")
代码
Tagged Journal Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-jtc"><p class="x-jtc__lbl">观点与动态</p><div class="x-jtc__grid"><a class="x-jtc__card" href="#"><div class="x-jtc__img"><img src="https://8pt.dev/api/media/3a86ac47b7244987aa4ddcbd.webp" alt="沙发上聊天的两个人"><span class="x-jtc__tag">观点</span></div><h3>社交内容的二八法则</h3><p>让人一直聊下去。</p></a><a class="x-jtc__card" href="#"><div class="x-jtc__img"><img src="https://8pt.dev/api/media/553ec81a45015b77c3e183ea.webp" alt="雨林小径上的两个人"><span class="x-jtc__tag">过程</span></div><h3>打造衡息</h3><p>让健身重新有人味。</p></a><a class="x-jtc__card" href="#"><div class="x-jtc__img x-jtc__img--grey"><div class="x-jtc__cluster"><img src="https://8pt.dev/api/media/c898edd905a4ef57de63da91.webp" alt=""><img src="https://8pt.dev/api/media/a695326afba0de37a7a74362.webp" alt=""><img src="https://8pt.dev/api/media/5fe88aa10a5229460c7869d9.webp" alt=""><img src="https://8pt.dev/api/media/e67b23536cd0fb650dc36fc7.webp" alt=""><img src="https://8pt.dev/api/media/a667b074c090c0ac26c13937.webp" alt=""></div><span class="x-jtc__tag x-jtc__tag--light">观点</span></div><h3>品牌宇宙与品牌手册</h3><p>为什么有氛围的生态总能赢。</p></a></div></div>
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Inter+Tight:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600&family=ZCOOL+QingKe+HuangYou&display=swap");.x-jtc{width:100%;max-width:1200px;box-sizing:border-box;padding:0 24px;background:#FFFFFF;color:#000;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-jtc__lbl{margin:0 0 40px;font-family:"Fragment Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;letter-spacing:.06em}.x-jtc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.x-jtc__card{display:block;color:inherit;text-decoration:none}.x-jtc__img{position:relative;aspect-ratio:1.14;border-radius:4px;overflow:hidden;background:#d9d9d9}.x-jtc__img>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.x-jtc__card:hover .x-jtc__img>img{transform:scale(1.04)}.x-jtc__tag{position:absolute;top:12px;right:12px;display:flex;align-items:center;height:26px;padding:0 18px;border-radius:4px;font-size:12px;color:#fff;background:rgba(40,36,30,.55);backdrop-filter:blur(6px)}.x-jtc__tag--light{background:rgba(255,255,255,.4)}.x-jtc__card h3{margin:16px 0 4px;font-size:18px;font-weight:700}.x-jtc__card p{margin:0;font-family:"Noto Serif SC",serif;font-size:13.5px;color:#7a7a7a}.x-jtc__cluster{position:absolute;inset:0;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.x-jtc__card:hover .x-jtc__cluster{transform:scale(1.04)}.x-jtc__cluster img{position:absolute;display:block;border-radius:50%;animation:x-jtc-bob 6s ease-in-out infinite}.x-jtc__cluster img:nth-child(1){width:33%;left:47%;top:27%}.x-jtc__cluster img:nth-child(2){width:20%;left:21%;top:35%;animation-delay:-1.5s}.x-jtc__cluster img:nth-child(3){width:19%;left:30%;top:59%;animation-delay:-3s}.x-jtc__cluster img:nth-child(4){width:12%;left:33%;top:20%;animation-delay:-2s}.x-jtc__cluster img:nth-child(5){width:6.5%;left:47%;top:19%;animation-delay:-4s}@keyframes x-jtc-bob{50%{transform:translateY(-8px)}}@media (prefers-reduced-motion:reduce){.x-jtc__cluster img{animation:none}.x-jtc__img>img,.x-jtc__cluster{transition:none}}订阅 Builder 查看完整源码。查看价格