Agent Use Cards
A row of five small white cards with fine borders, each with an inset-shadowed colorful round icon top left and a use-case name with a small arrow at the bottom. Cards lift on hover and the arrow moves right. Good for feature entry points or use-case navigation.
Taken from the page template Moge Team AI Workspace Website. 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 Agent Use 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 Agent Use Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-auc"><section class="mg-uses" id="agents"><div class="mg-wrap"><p class="mg-uses__k">看看智能体能替你做什么</p><div class="mg-uses__g"><a class="mg-use" href="#agents" style="--c:#5AA9E6"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5.5h16l-6 7v6l-4 1.5v-7.5Z"/></svg></i><b>分拣用户反馈<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></b></a><a class="mg-use" href="#agents" style="--c:#F2A65A"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 11.5a7.5 7.5 0 0 1-10.9 6.7L4.5 19.5l1.3-4.2A7.5 7.5 0 1 1 20 11.5Z"/><path d="M8.5 11.5h7"/></svg></i><b>在群聊里处理工单<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></b></a><a class="mg-use" href="#agents" style="--c:#E5484D"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 3 5.5 13.5H12L11 21l7.5-10.5H12Z"/></svg></i><b>更快响应线上告警<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></b></a><a class="mg-use" href="#agents" style="--c:#5BB98C"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16"/><path d="M7 16.5v-5"/><path d="M12 16.5V7"/><path d="M17 16.5v-8"/></svg></i><b>每周自动出周报<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></b></a><a class="mg-use" href="#agents" style="--c:#7C6CE0"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 5.5a4 4 0 0 0 4.6 5.3L11 18.9a2 2 0 0 1-2.9-2.8l8.1-8.1"/><path d="M14.5 5.5 17 3"/></svg></i><b>搭一个内部小工具<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></b></a></div></div></section></div>
.x-auc{--bg:#FFFFFF;--ink:#191918;--acc:#0075DE;--accs:#E6F3FE;--soft:#F6F5F4;--card:#F9F9F8;--line:#E6E5E3;--mut:#787774;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-auc *,.x-auc *::before,.x-auc *::after{box-sizing:border-box;margin:0;padding:0}.x-auc{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-auc a{color:inherit;text-decoration:none}.x-auc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-auc .mg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}.x-auc .mg-h2{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.15}.x-auc .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}.x-auc .mg-btn:active{transform:scale(.97)}.x-auc .mg-btn--pri{background:var(--acc);color:#fff}.x-auc .mg-btn--pri:hover{background:#005BAB}.x-auc .mg-btn--sec{background:var(--accs);color:#005BAB}.x-auc .mg-btn--sec:hover{background:#D5EAFC}.x-auc .mg-btn--white{background:#fff;color:#005BAB}.x-auc .mg-btn--white:hover{background:#F0F7FE}.x-auc .mg-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.x-auc .mg-logo__m{width:28px;height:28px}.x-auc .mg-logo--big{font-size:26px;gap:10px}.x-auc .mg-logo--big .mg-logo__m{width:40px;height:40px}.x-auc .mg-peb{display:block;overflow:visible}.x-auc .mg-peb__eyes{animation:xaucBlink 5s infinite;transform-origin:center 46px;transform-box:view-box}@keyframes xaucBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}@media (prefers-reduced-motion:reduce){.x-auc *,.x-auc *::before,.x-auc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.x-auc .mg-uses{padding:10px 0 110px}.x-auc .mg-uses__k{font-size:14px;color:var(--mut)}.x-auc .mg-uses__g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:12px}.x-auc .mg-use{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:150px;padding:18px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s,transform .3s var(--ease)}.x-auc .mg-use:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #D3D2CF,0 12px 26px -16px rgba(0,0,0,.25)}.x-auc .mg-use i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}.x-auc .mg-use i svg{width:20px;height:20px}.x-auc .mg-use b{font-size:15px;font-weight:600}.x-auc .mg-use b svg{width:14px;height:14px;vertical-align:-2px;margin-left:3px;transition:transform .25s var(--ease)}.x-auc .mg-use:hover b svg{transform:translateX(3px)}@media (max-width:1000px){.x-auc .mg-uses__g{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:860px){.x-auc .mg-uses{padding:0 0 64px}.x-auc .mg-uses__g{grid-template-columns:repeat(2,minmax(0,1fr))}.x-auc .mg-use{min-height:128px}}.x-auc .mg-wrap{width:100%}.x-auc{background:#FFFFFF radial-gradient(#E3E2DF 1.3px,transparent 1.5px) 0 0/22px 22px}.x-auc .mg-uses{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;padding:40px 0}.x-auc .mg-uses__k{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em}.x-auc .mg-uses__g{margin-top:26px}.x-auc .mg-use{min-height:220px;padding:22px}.x-auc .mg-use i{width:52px;height:52px}.x-auc .mg-use i svg{width:26px;height:26px}.x-auc .mg-use b{font-size:17px}