Tagged Journal Cards
Three-column article cards: near-square images with a translucent frosted tag in the top right, bold titles and gray serif subtitles below. The third card’s cover is a cluster of floating rendered spheres; images zoom slowly on hover.
Taken from the page template Houtu Creative Studio 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 Tagged Journal 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 Tagged Journal Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<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}}