Kpi

<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."
}
  • Content:
    .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);
    }
  • URL: /components/raw/kpi/_kpi.scss
  • Filesystem Path: src/pattern-library/02-components/kpi/_kpi.scss
  • Size: 287 Bytes

No notes defined.