Lunds universitet - Style Guide

Circle Progress 

<div class="row">
    <div class="col-12 col-lg-8 mt-5">
        <div class="row text-center">
            <div class="col-12 col-md-6 col-xl-4">
                <div class="circle-progress mx-auto" data-value="0.93">
                    <div class="circle-progress-value">
                        <span class="count-up">93</span>%
                    </div>
                </div>
                <div class="mt-3 text-uppercase font-weight-bold small">Employed within Three Months</div>
            </div>
            <div class="col-12 col-md-6 col-xl-4 mt-3 mt-md-0">
                <div class="circle-progress mx-auto" data-value="0.33">
                    <div class="circle-progress-value">
                        <span class="count-up">33</span>%
                    </div>
                </div>
                <div class="mt-3 text-uppercase font-weight-bold small">Female students</div>
            </div>
            <div class="col-12 col-xl-4 mt-3 mt-xl-0">
                <div class="circle-progress mx-auto" data-value="0.77">
                    <div class="circle-progress-value">
                        <span class="count-up">77</span>%
                    </div>
                </div>
                <div class="mt-3 text-uppercase font-weight-bold small">Male students</div>
            </div>
        </div>
    </div>
</div>
 
<div class="row">
    <div class="col-12 col-lg-8 mt-5">
        <div class="row text-center">
          {{#each graphs}}
            {{#if @first}}
              <div class="col-12 col-md-6 col-xl-4">
            {{else if @last}}
              <div class="col-12 col-xl-4 mt-3 mt-xl-0">
            {{else}}
              <div class="col-12 col-md-6 col-xl-4 mt-3 mt-md-0">
            {{/if}}
              <div class="circle-progress mx-auto" data-value="{{value}}">
                  <div class="circle-progress-value">
                      <span class="count-up">{{display}}</span>%
                  </div>
              </div>
              <div class="mt-3 text-uppercase font-weight-bold small">{{label}}</div>
            </div>
          {{/each}}
        </div>
    </div>
</div>
 
{
  "graphs": [
    {
      "value": 0.93,
      "display": "93",
      "label": "Employed within Three Months"
    },
    {
      "value": 0.33,
      "display": "33",
      "label": "Female students"
    },
    {
      "value": 0.77,
      "display": "77",
      "label": "Male students"
    }
  ]
}

No notes defined.