Schema Markup Type
Structured data is a contract between a page and Google's parser. The badge names the @type and lists which SERP features it unlocks — the difference between a plain blue link and a result with stars, FAQs, and how-to steps.
Schema Markup Type the 10th 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="schema-stage">
<div class="schema-card">
<div class="schema-header">
<div class="schema-at">@type</div>
<div class="schema-type-name">Article</div>
<div class="schema-valid-tag">✓ Valid JSON-LD</div>
</div>
<div class="schema-body">
<div class="schema-section-label">Unlocks SERP Features</div>
<div class="schema-chips">
<div class="schema-chip schema-chip-rich">⬡ Rich Result</div>
<div class="schema-chip schema-chip-snippet">★ Featured Snippet</div>
<div class="schema-chip schema-chip-author">⌖ Author Markup</div>
<div class="schema-chip schema-chip-date">⌚ DatePublished</div>
</div>
<div class="schema-section-label">Implementation Preview</div>
<div class="schema-code-peek">
<span class="schema-s-gray"><script type="application/ld+json"></span><br>
<span class="schema-s-gray">{</span> <span class="schema-s-key">"@context"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"https://schema.org"</span><span class="schema-s-gray">,</span><br>
<span class="schema-s-key">"@type"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"Article"</span><span class="schema-s-gray">,</span><br>
<span class="schema-s-prop">"headline"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"…"</span><span class="schema-s-gray">,</span><br>
<span class="schema-s-prop">"author"</span><span class="schema-s-gray">:</span> <span class="schema-s-gray">{ … }</span> <span class="schema-s-gray">}</span><br>
<span class="schema-s-gray"></script></span>
</div>
</div>
</div>
</div> .schema-stage {
background: #f6f8fa;
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 420px;
}
.schema-card {
background: #fff;
border: 1px solid #e0e6ed;
border-radius: 6px;
width: 100%;
max-width: 480px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.schema-header {
background: #f6f8fa;
border-bottom: 1px solid #e0e6ed;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 12px;
}
.schema-at {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.14em;
color: #888;
text-transform: uppercase;
}
.schema-type-name {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 18px;
font-weight: 700;
color: #1a1612;
letter-spacing: -0.01em;
}
.schema-valid-tag {
margin-left: auto;
display: flex;
align-items: center;
gap: 5px;
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: #1d8f4a;
padding: 4px 10px;
border: 1.5px solid rgba(29, 143, 74, 0.4);
border-radius: 3px;
}
.schema-body { padding: 18px 20px; }
.schema-section-label {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #aaa;
margin-bottom: 10px;
}
.schema-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.schema-chip {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 3px;
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
border: 1px solid;
}
.schema-chip-rich { color: #4285f4; background: #e8f0fe; border-color: #c5d8fd; }
.schema-chip-snippet { color: #1d8f4a; background: #e6f4ea; border-color: #b7e0c2; }
.schema-chip-author { color: #7c4dff; background: #f3e8ff; border-color: #d9b8ff; }
.schema-chip-date { color: #b8762d; background: #fef3e2; border-color: #fdd9a0; }
.schema-code-peek {
background: #f6f8fa;
border: 1px solid #e0e6ed;
border-radius: 4px;
padding: 10px 14px;
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 11.5px;
line-height: 1.7;
overflow: hidden;
}
.schema-s-key { color: #032f62; }
.schema-s-string { color: #0d6416; }
.schema-s-gray { color: #888; }
.schema-s-prop { color: #5a3d99; }