E-E-A-T Scorecard
Google's quality evaluator framework — Experience, Expertise, Authoritativeness, Trustworthiness. Composite score and a grade, with four animated bars showing per-dimension strength.
E-E-A-T Scorecard the 8th 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="eeat-stage">
<div class="eeat-card">
<div class="eeat-top">
<div class="eeat-composite">
<div class="eeat-big-score">85</div>
<div class="eeat-score-label">Composite · /100</div>
</div>
<div class="eeat-grade-block">
<div class="eeat-grade">A</div>
<div class="eeat-grade-label">Strong signal</div>
</div>
</div>
<div class="eeat-bars">
<div class="eeat-row">
<div class="eeat-abbr" style="color:#3d7ebf">E</div>
<div class="eeat-name">Experience</div>
<div class="eeat-track"><div class="eeat-fill" style="background:#3d7ebf; --eeat-w: 82%"></div></div>
<div class="eeat-val">82</div>
</div>
<div class="eeat-row">
<div class="eeat-abbr" style="color:#1d8f4a">E</div>
<div class="eeat-name">Expertise</div>
<div class="eeat-track"><div class="eeat-fill" style="background:#1d8f4a; --eeat-w: 91%"></div></div>
<div class="eeat-val">91</div>
</div>
<div class="eeat-row">
<div class="eeat-abbr" style="color:#b8762d">A</div>
<div class="eeat-name">Authoritativeness</div>
<div class="eeat-track"><div class="eeat-fill" style="background:#b8762d; --eeat-w: 79%"></div></div>
<div class="eeat-val">79</div>
</div>
<div class="eeat-row">
<div class="eeat-abbr" style="color:#5b3aa0">T</div>
<div class="eeat-name">Trustworthiness</div>
<div class="eeat-track"><div class="eeat-fill" style="background:#5b3aa0; --eeat-w: 88%"></div></div>
<div class="eeat-val">88</div>
</div>
</div>
<div class="eeat-footer">
<span>Evaluated May 2026</span>
<span>Google Quality Rater Guidelines</span>
</div>
</div>
</div> .eeat-stage {
background: #fff;
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 420px;
}
.eeat-card {
background: #fff;
border: 1.5px solid #e8e4da;
border-radius: 6px;
padding: 28px 28px 22px;
width: 100%;
max-width: 480px;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.eeat-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid #f0ece0;
}
.eeat-composite {
display: flex;
flex-direction: column;
gap: 2px;
}
.eeat-big-score {
font-family: Georgia, "Fraunces", serif;
font-size: 72px;
line-height: 0.85;
font-weight: 300;
font-style: italic;
color: #1a1612;
letter-spacing: -0.04em;
}
.eeat-score-label {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #aaa;
}
.eeat-grade-block { text-align: right; }
.eeat-grade {
font-family: Georgia, "Fraunces", serif;
font-size: 48px;
font-weight: 700;
color: #1d8f4a;
line-height: 1;
}
.eeat-grade-label {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #888;
margin-top: 2px;
}
.eeat-bars {
display: flex;
flex-direction: column;
gap: 12px;
}
.eeat-row {
display: flex;
align-items: center;
gap: 12px;
}
.eeat-abbr {
width: 12px;
font-family: Georgia, "Fraunces", serif;
font-weight: 700;
font-size: 15px;
flex-shrink: 0;
}
.eeat-name {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4a4239;
width: 120px;
flex-shrink: 0;
}
.eeat-track {
flex: 1;
height: 6px;
background: #f0ece0;
border-radius: 3px;
overflow: hidden;
}
.eeat-fill {
height: 100%;
border-radius: 3px;
width: 0;
animation: eeat-grow 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
@keyframes eeat-grow { to { width: var(--eeat-w, 0); } }
@media (prefers-reduced-motion: reduce) {
.eeat-fill { animation: none; width: var(--eeat-w, 0); }
}
.eeat-val {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
color: #1a1612;
width: 28px;
text-align: right;
flex-shrink: 0;
}
.eeat-footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid #f0ece0;
display: flex;
justify-content: space-between;
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #aaa;
}