Search Intent Spectrum
Plots a keyword on the Informational / Navigational / Commercial / Transactional spectrum. Intent mismatch is one of the top reasons pages don't rank — this badge surfaces the right page type before a word is written.
Search Intent Spectrum the 11th of 30 designs in the 30 CSS Badges collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="intent-stage">
<div class="intent-card">
<div class="intent-query-label">Keyword</div>
<div class="intent-query-text">"best seo tools 2026"</div>
<div class="intent-spectrum-wrap">
<div class="intent-spectrum">
<div class="intent-zone intent-i">I</div>
<div class="intent-zone intent-n">N</div>
<div class="intent-zone intent-c">C</div>
<div class="intent-zone intent-t">T</div>
</div>
<div class="intent-marker"></div>
</div>
<div class="intent-zone-labels">
<span>Informational</span>
<span>Navigational</span>
<span>Commercial</span>
<span>Transactional</span>
</div>
<div class="intent-result-row">
<div class="intent-type-pill">Commercial</div>
<div class="intent-page-rec">
<strong>Comparison / Listicle</strong>
Best-of, tools roundup, pricing page
</div>
</div>
</div>
</div> .intent-stage {
background: #f0f4fb;
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 360px;
}
.intent-card {
background: #fff;
border: 1px solid #dde3ef;
border-radius: 6px;
padding: 28px 28px 24px;
width: 100%;
max-width: 480px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.intent-query-label {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 9px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #888;
margin-bottom: 6px;
}
.intent-query-text {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 16px;
color: #1a1612;
margin-bottom: 22px;
padding: 8px 12px;
background: #f6f8fc;
border-radius: 4px;
border-left: 3px solid #4285f4;
}
.intent-spectrum-wrap {
position: relative;
margin-bottom: 8px;
}
.intent-spectrum {
display: flex;
height: 44px;
border-radius: 4px;
overflow: visible;
position: relative;
}
.intent-zone {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.85);
letter-spacing: 0.06em;
}
.intent-zone:first-child { border-radius: 4px 0 0 4px; }
.intent-zone:last-child { border-radius: 0 4px 4px 0; }
.intent-i { background: #4285f4; }
.intent-n { background: #0f9d58; }
.intent-c { background: #f4b400; color: rgba(0,0,0,0.6); }
.intent-t { background: #db4437; }
.intent-marker {
position: absolute;
top: -6px;
bottom: -6px;
width: 4px;
background: #1a1612;
border-radius: 2px;
transform: translateX(-50%);
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1a1612;
animation: intent-slide 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
left: 0%;
}
@keyframes intent-slide { to { left: 68%; } }
@media (prefers-reduced-motion: reduce) {
.intent-marker { animation: none; left: 68%; }
}
.intent-zone-labels {
display: flex;
margin-top: 6px;
margin-bottom: 20px;
}
.intent-zone-labels span {
flex: 1;
text-align: center;
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #aaa;
}
.intent-result-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 18px;
border-top: 1px solid #eee;
}
.intent-type-pill {
padding: 6px 14px;
border-radius: 20px;
background: rgba(244, 180, 0, 0.15);
border: 1px solid rgba(244, 180, 0, 0.4);
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: #c48a00;
}
.intent-page-rec {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 11px;
color: #888;
text-align: right;
line-height: 1.5;
letter-spacing: 0.04em;
}
.intent-page-rec strong {
color: #1a1612;
display: block;
}