Three Step Flow
Overview
Three icon nodes with code labels in a row, joined by thin lines, switching to a vertical stack on narrow screens. Good for explaining a three-stage flow like search, call and settle.
Taken from the page template Qishu Agent Tool Platform 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 Three Step Flow 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 three-step-flow
mcp › Use 8pt MCP to call get_component("three-step-flow")
Code
Source for Three Step Flow. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-qsf"><section class="qs-flow" id="flow"><div class="qs-wrap"><h2 class="qs-h2">说出任务，<br>剩下的它自己办。</h2><ol class="qs-steps"><li class="qs-step" style="transition-delay:0.0s"><span class="qs-step__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg></span><h3>检索比价</h3><code>qs.find()</code></li><li class="qs-step__line" style="transition-delay:0.08s" aria-hidden="true"></li><li class="qs-step" style="transition-delay:0.15s"><span class="qs-step__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5l11 7-11 7z"/></svg></span><h3>直接调用</h3><code>qs.call()</code></li><li class="qs-step__line" style="transition-delay:0.22999999999999998s" aria-hidden="true"></li><li class="qs-step" style="transition-delay:0.3s"><span class="qs-step__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="2.5"/><path d="M3 10h18"/></svg></span><h3>按次结算</h3><code>wallet.debit()</code></li></ol></div></section></div>
.x-qsf{--acc:#0016D7;--ink:#1c1c1e;--mut:#6e6e73;--line:#ececee;--soft:#fafafa;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;width:100%;box-sizing:border-box;text-align:left}.x-qsf *,.x-qsf *::before,.x-qsf *::after{box-sizing:border-box;margin:0;padding:0}.x-qsf a{color:inherit;text-decoration:none}.x-qsf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-qsf .qs-wrap{max-width:1100px;margin:0 auto;padding:0 24px}.x-qsf .qs-h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-align:center}.x-qsf .qs-mark{display:inline-grid;grid-template-columns:repeat(2,6px);gap:2px;transform:rotate(45deg);margin:0 2px}.x-qsf .qs-mark i{width:6px;height:6px;border-radius:1.5px;background:currentColor;display:block}.x-qsf .qs-mark i:nth-child(4){opacity:.35}.x-qsf .qs-flow{background:var(--soft) radial-gradient(#dcdce3 1px,transparent 1.3px) 0 0/18px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:112px 0}.x-qsf .qs-steps{list-style:none;display:flex;align-items:flex-start;justify-content:center;gap:0;margin-top:64px}.x-qsf .qs-step{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.x-qsf .qs-step__ic{width:42px;height:42px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--acc);display:grid;place-items:center;box-shadow:0 2px 6px -2px rgba(0,0,0,.06)}.x-qsf .qs-step__ic svg{width:19px;height:19px}.x-qsf .qs-step h3{font-size:19px;font-weight:700;letter-spacing:-.01em}.x-qsf .qs-step code{font:13px var(--mono);color:var(--acc);background:#fff;border:1px solid var(--line);padding:5px 10px;border-radius:5px}.x-qsf .qs-step__line{flex:0 0 90px;height:1px;background:#d6d6dc;margin-top:21px;transform-origin:left}.x-qsf .qs-step__line.qs-reveal{transform:scaleX(0)}.x-qsf .qs-step__line.qs-reveal.is-in{transform:scaleX(1)}@media (max-width:760px){.x-qsf .qs-flow{padding:80px 0}.x-qsf .qs-steps{flex-direction:column;align-items:center;gap:0}.x-qsf .qs-step{flex:none}.x-qsf .qs-step__line{flex:none;width:1px;height:36px;margin:14px 0;transform-origin:top}.x-qsf .qs-step__line.qs-reveal{transform:scaleY(0)}.x-qsf .qs-step__line.qs-reveal.is-in{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.x-qsf .qs-step__line.qs-reveal{transform:none!important}}.x-qsf .qs-flow{padding:96px 0;border:0;min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}
Subscribe to Builder to see the full source.See pricing