Lunds universitet - Style Guide

Animate On Scroll 

<div class="bg-copper-50 mt-6 p-5 text-center">
    <h2 class=" mt-0 mb-5">Class profile 2017/18</h2>

    <div class="row">
        <div class="col">
            <div class="flex-column" data-aos="zoom-in-up">
                <div>
                    <div class="h1 m-0"><i class="fal fa-chart-line "></i>
                    </div>
                </div>
                <div>
                    <p class=" h2 m-0 count-up">970</p>

                </div>
                <div>
                    <p class=" small">Applicants</p>

                </div>
            </div>
        </div>
        <div class="col">
            <div class="flex-column" data-aos="zoom-in-up" data-aos-delay="100">
                <div>
                    <div class="h1 m-0"><i class="fal fa-graduation-cap "></i>
                    </div>
                </div>
                <div>
                    <p class=" h2 m-0 count-up" data-delay="0.3">41</p>

                </div>
                <div>
                    <p class=" small">Enrolled</p>

                </div>
            </div>
        </div>
        <div class="col">
            <div class="flex-column" data-aos="zoom-in-up" data-aos-delay="200">
                <div>
                    <div class="h1 m-0"><i class="fal fa-male "></i>
                    </div>
                </div>
                <div>
                    <p class=" h2 m-0"><span class="count-up" data-delay="0.4">34</span>%</p>

                </div>
                <div>
                    <p class=" small">Male students</p>

                </div>
            </div>
        </div>
        <div class="col">
            <div class="flex-column" data-aos="zoom-in-up" data-aos-delay="300">
                <div>
                    <div class="h1 m-0"><i class="fal fa-female "></i>
                    </div>
                </div>
                <div>
                    <p class=" h2 m-0"><span class="count-up" data-delay="0.5">66</span>%</p>

                </div>
                <div>
                    <p class=" small">Female students</p>

                </div>
            </div>
        </div>
        <div class="col">
            <div class="flex-column" data-aos="zoom-in-up" data-aos-delay="400">
                <div>
                    <div class="h1 m-0"><i class="fal fa-calendar "></i>
                    </div>
                </div>
                <div>
                    <p class=" h2 m-0">22-<span class="count-up" data-start="22" data-delay="0.6">28</span></p>

                </div>
                <div>
                    <p class=" small">Age range</p>

                </div>
            </div>
        </div>
        <div class="col">
            <div class="flex-column" data-aos="zoom-in-up" data-aos-delay="500">
                <div>
                    <div class="h1 m-0"><i class="fal fa-globe "></i>
                    </div>
                </div>
                <div>
                    <p class=" h2 m-0 count-up" data-delay="0.7">22</p>

                </div>
                <div>
                    <p class=" small">Nationalities</p>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="bg-copper-50 mt-6 p-5 text-center">
  {{render "@heading--level-2" heading merge=true}}
    <div class="row">
      {{#each items}}
        <div class="col">
          <div class="flex-column" data-aos="zoom-in-up"{{#if delay}} data-aos-delay="{{delay}}"{{/if}}>
            <div>
              <div class="h1 m-0">{{render "@icon" icon}}</div>
            </div>
            <div>
              {{render "@paragraph" value}}
            </div>
            <div>
              {{render "@paragraph" label}}
            </div>
          </div>
        </div>
      {{/each}}
    </div>
</div>
 
{
  "heading": {
    "content": "Class profile 2017/18",
    "modifiers": [
      "mt-0",
      "mb-5"
    ]
  },
  "items": [
    {
      "icon": {
        "style": "fal",
        "icon": "chart-line"
      },
      "value": {
        "content": "970",
        "modifiers": [
          "h2",
          "m-0",
          "count-up"
        ]
      },
      "label": {
        "content": "Applicants",
        "modifiers": [
          "small"
        ]
      }
    },
    {
      "delay": "100",
      "icon": {
        "style": "fal",
        "icon": "graduation-cap"
      },
      "value": {
        "content": "41",
        "modifiers": [
          "h2",
          "m-0",
          "count-up"
        ],
        "data": {
          "delay": "0.3"
        }
      },
      "label": {
        "content": "Enrolled",
        "modifiers": [
          "small"
        ]
      }
    },
    {
      "delay": "200",
      "icon": {
        "style": "fal",
        "icon": "male"
      },
      "value": {
        "content": "<span class=\"count-up\" data-delay=\"0.4\">34</span>%",
        "modifiers": [
          "h2",
          "m-0"
        ]
      },
      "label": {
        "content": "Male students",
        "modifiers": [
          "small"
        ]
      }
    },
    {
      "delay": "300",
      "icon": {
        "style": "fal",
        "icon": "female"
      },
      "value": {
        "content": "<span class=\"count-up\" data-delay=\"0.5\">66</span>%",
        "modifiers": [
          "h2",
          "m-0"
        ]
      },
      "label": {
        "content": "Female students",
        "modifiers": [
          "small"
        ]
      }
    },
    {
      "delay": "400",
      "icon": {
        "style": "fal",
        "icon": "calendar"
      },
      "value": {
        "content": "22-<span class=\"count-up\" data-start=\"22\" data-delay=\"0.6\">28</span>",
        "modifiers": [
          "h2",
          "m-0"
        ]
      },
      "label": {
        "content": "Age range",
        "modifiers": [
          "small"
        ]
      }
    },
    {
      "delay": "500",
      "icon": {
        "style": "fal",
        "icon": "globe"
      },
      "value": {
        "content": "22",
        "modifiers": [
          "h2",
          "m-0",
          "count-up"
        ],
        "data": {
          "delay": "0.7"
        }
      },
      "label": {
        "content": "Nationalities",
        "modifiers": [
          "small"
        ]
      }
    }
  ]
}

The icons animate in using the Animate on Scroll library. See the documentation for a link to more examples.