Tangible Pattern Library

Results 

<div class="c-results">

    <p class="c-results__title">Risultati ottenuti</p>

    <div class="c-results__items">

        <div class="c-results__item">
            <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>

        <div class="c-results__item">
            <div class="c-kpi">
                <p class="c-kpi__value">99%</p>
                <p class="c-kpi__description">Lorem ipsum dolor sit amet</p>
            </div>
        </div>

        <div class="c-results__item">
            <div class="c-kpi">
                <p class="c-kpi__value">99%</p>
                <p class="c-kpi__description">Lorem ipsum dolor</p>
            </div>
        </div>

        <div class="c-results__item">
            <div class="c-kpi">
                <p class="c-kpi__value">99%</p>
                <p class="c-kpi__description">Lorem ipsum dolor</p>
            </div>
        </div>

    </div>
</div>
 
<div class="c-results{% if modifier is defined %} {{ modifier }}{% endif %}">

  <p class="c-results__title"{% if entry.workResultsValueColor %} style="color:{{ entry.workResultsValueColor|default('') }}"{% endif %}>{{"Risultati ottenuti"|t}}</p>

  <div class="c-results__items">
    {% for item in items %}
      
      <div class="c-results__item">  
        {% include "@kpi" with {
          value: item.value,
          description: item.description,
          valueColor: entry.workResultsValueColor,
          descriptionColor: entry.workResultsDescriptionColor
        } %}
      </div>
      
    {% endfor %}
  </div>
</div>
 
{
  "items": [
    {
      "number": "12%",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
      "number": "34%",
      "description": "Lorem ipsum dolor sit amet"
    },
    {
      "number": "56%",
      "description": "Lorem ipsum dolor"
    },
    {
      "number": "56%",
      "description": "Lorem ipsum dolor"
    }
  ]
}
  • Content: 
    .c-results {
  // background-color: useHSL(--primary-100);
  padding-top: spacing(space-24);
  padding-bottom: spacing(space-24);
  // padding-left: $global-mobile-x-padding;
  // padding-right: $global-mobile-x-padding;

  @include min-screen(bp(medium)) {
    padding-bottom: spacing(space-48);
    // padding-left: $global-desk-x-padding;
    // padding-right: $global-desk-x-padding;
  }

}

.c-results__title {
  @include font-scale(level-4, $font-primary, light);
  color: useHSL(--base-100);
  text-align: center;
  margin-bottom: spacing(space-24);
}

.c-results__items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;

  @include min-screen(bp(medium)) {
    gap: 24px;
  }
}

.c-results__item {
  flex: 1 1 remify(140px);

  @include min-screen(bp(medium)) {
    // flex: 1 1 remify(300px);
    flex: 1 1 remify(200px);
  }

}
  • URL: /components/raw/results/_results.scss
  • Filesystem Path: src/pattern-library/02-components/results/_results.scss
  • Size: 843 Bytes

No notes defined.