Hreflang Coverage
International SEO's most misunderstood tag. Shows the target locale, alternate version count, and — crucially — flags missing reciprocal links. Hreflang must be bidirectional or the entire cluster invalidates.
Hreflang Coverage the 7th 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="hl-stage">
<div class="hl-card">
<div class="hl-primary">
<div class="hl-flag">
<span style="background:#002868; flex:0.4"></span>
<span style="background:#bf0a30; flex:0.3"></span>
<span style="background:#fff; flex:0.3"></span>
</div>
<div>
<div class="hl-code">en-US</div>
<div class="hl-name">English · United States</div>
</div>
<div class="hl-alts-count">→ 14 alternates</div>
</div>
<div class="hl-body">
<div class="hl-section-label">Declared Alternates</div>
<div class="hl-chips">
<div class="hl-chip hl-xdefault">x-default</div>
<div class="hl-chip">en-GB</div>
<div class="hl-chip">en-AU</div>
<div class="hl-chip">fr-FR</div>
<div class="hl-chip">de-DE</div>
<div class="hl-chip">es-ES</div>
<div class="hl-chip">es-MX</div>
<div class="hl-chip">ja-JP</div>
<div class="hl-chip">pt-BR</div>
<div class="hl-chip hl-missing">zh-CN ✕</div>
<div class="hl-chip hl-missing">ko-KR ✕</div>
<div class="hl-chip">nl-NL</div>
<div class="hl-chip">it-IT</div>
<div class="hl-chip">pl-PL</div>
</div>
<div class="hl-warning">zh-CN and ko-KR are missing reciprocal hreflang links back to this URL</div>
</div>
</div>
</div> .hl-stage {
background: #f4f1eb;
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 420px;
}
.hl-card {
background: #fff;
border: 1px solid #e2ddd4;
border-radius: 6px;
overflow: hidden;
width: 100%;
max-width: 480px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.hl-primary {
display: flex;
align-items: center;
padding: 20px 20px 18px;
border-bottom: 1px solid #e2ddd4;
gap: 14px;
}
.hl-flag {
width: 8px;
align-self: stretch;
flex-shrink: 0;
border-radius: 2px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.hl-flag span { flex: 1; }
.hl-code {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 22px;
font-weight: 700;
color: #1a1612;
letter-spacing: 0.02em;
}
.hl-name {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 12px;
color: #4a4239;
line-height: 1.4;
letter-spacing: 0.04em;
}
.hl-alts-count {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 10px;
color: #888;
margin-left: auto;
text-align: right;
white-space: nowrap;
}
.hl-body { padding: 16px 20px 18px; }
.hl-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;
}
.hl-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 16px;
}
.hl-chip {
padding: 4px 10px;
border-radius: 3px;
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.04em;
background: #f4f1eb;
border: 1px solid #e2ddd4;
color: #1a1612;
transition: background 0.2s;
cursor: default;
}
.hl-chip:hover { background: #e8e4d8; }
.hl-xdefault {
background: #e8f0fe;
border-color: #c5d8fd;
color: #4285f4;
}
.hl-missing {
background: #fde8e8;
border-color: #f8c0c0;
color: #ff4e42;
}
.hl-warning {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #fff8e8;
border-radius: 4px;
border-left: 3px solid #ffa400;
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 11px;
color: #8a5a00;
letter-spacing: 0.02em;
}
.hl-warning::before {
content: '⚠';
flex-shrink: 0;
}