<div class="quality-indicator">
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">character set</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 10%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">vector quality</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 30%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">spacing</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 100%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">kerning</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 0%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">family styles</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 60%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">open type features</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 90%"></span>
</span>
</div>
</div>
<div class="quality-indicator">
{% for indicator in data.indicators %}
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">{{ indicator.label }}</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: {{ indicator.quality }}%"></span>
</span>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"data": {
"indicators": [
{
"label": "character set",
"quality": 10
},
{
"label": "vector quality",
"quality": 30
},
{
"label": "spacing",
"quality": 100
},
{
"label": "kerning",
"quality": 0
},
{
"label": "family styles",
"quality": 60
},
{
"label": "open type features",
"quality": 90
}
]
}
}
.quality-indicator {
display: flex;
flex-wrap: wrap;
text-transform: uppercase;
justify-content: space-between;
margin-bottom: -24px;
@include bp(md-min) {
margin-bottom: -30px;
}
}
.quality-indicator__metric {
display: flex;
flex-direction: column;
flex-basis: 50%;
@include bp(md-min) {
flex-basis: 100%;
}
}
.quality-indicator__label {
line-height: 1;
}
.quality-indicator__meter {
position: relative;
height: 10px;
width: 76%;
box-shadow: 0 0 0 1px var(--color-brand) inset;
margin: 8px 0 24px;
transition: $transition-duration $transition-easing;
transition-property: box-shadow;
@include bp(md-min) {
margin-bottom: 30px;
}
}
.quality-indicator__meter-fill {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: var(--color-brand);
transition: $transition-duration $transition-easing;
transition-property: background-color;
}
import './quality-indicator.scss';