8pt

Agent Use Cards

Agent Use Cards•Cards
Overview

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.

$ npm i -g @8pt-dev/cli && 8pt add agent-use-cards
mcp › Use 8pt MCP to call get_component("agent-use-cards")

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}
Subscribe to Builder to see the full source.See pricing

Other components from this template

View all

AI Feature Bento

Tinted Team Cards

Motto Column Footer

Kanban Window Mock

Ticker CTA Band

Pill Word Hero

More cards components

View all

Live Deploy Bento

Trio Capability Cards

Story Stat Carousel

Collage Topic Cards

AI Feature Bento

Tagged Journal Cards

MCP Connect Steps

Masonry Review Wall

More components

View all

Tabbed Logo Testimonial

Dot Matrix Glow Hero

Dotted Globe Features

Chaos Versus Ship Split

Segmented Pricing Tiers

Floating Tile CTA Banner

Aurora Prompt Hero

Integration Tile Grid

Keep exploring