<div class="c-kpi">
<p class="c-kpi__value">99%</p>
<p class="c-kpi__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="c-kpi{% if modifier is defined %} {{ modifier }}{% endif %}">
<p class="c-kpi__value"{% if valueColor %} style="color:{{ valueColor }}"{% endif %}>{{ value }}</p>
<p class="c-kpi__description"{% if descriptionColor %} style="color:{{ descriptionColor }}"{% endif %}>{{ description }}</p>
</div>
{
"value": "99%",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
.c-kpi {
text-align: center;
}
.c-kpi__value {
color: useHSL(--highlight-100);
@include font-scale(level-8, $font-primary, extrabold);
}
.c-kpi__description {
color: useHSL(--base-100);
@include font-scale(level-2, $font-secondary, regular);
margin-top: spacing(space-8);
}
No notes defined.