<div class="numbers-component numbers-component--durp numbers-component--dark numbers-component--large">
<div class="numbers-component__number numbers-component__number--1" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="numbers-component__number-line numbers-component__number-line--1" data-numbers-component-line>
</div>
<div class="numbers-component__number-value">
6th
</div>
<div class="numbers-component__number-description">
in the world according to Center for World University Rankings
</div>
</div>
<div class="numbers-component__number numbers-component__number--2" data-sal="slide-up" data-sal-duration="400" data-sal-delay="600" data-sal-easing="ease-out-quint">
<div class="numbers-component__number-line numbers-component__number-line--2" data-numbers-component-line>
</div>
<div class="numbers-component__number-value">
3
</div>
<div class="numbers-component__number-description">
enrollment options
</div>
</div>
<div class="numbers-component__number numbers-component__number--3" data-sal="slide-up" data-sal-duration="400" data-sal-delay="800" data-sal-easing="ease-out-quint">
<div class="numbers-component__number-line numbers-component__number-line--3" data-numbers-component-line>
</div>
<div class="numbers-component__number-value">
96%
</div>
<div class="numbers-component__number-description">
job placement rate for graduates
</div>
</div>
<div class="numbers-component__number numbers-component__number--4" data-sal="slide-up" data-sal-duration="400" data-sal-delay="1000" data-sal-easing="ease-out-quint">
<div class="numbers-component__number-line numbers-component__number-line--4" data-numbers-component-line>
</div>
<div class="numbers-component__number-value">
10:1
</div>
<div class="numbers-component__number-description">
student faculty ratio
</div>
</div>
</div>
{% if is_wordpress %}
{{ enqueue_script('numbers') }}
{% endif %}
<div class="numbers-component numbers-component--{{ siteUnit }} numbers-component--{{ background }} numbers-component--{{ componentSpacing }}">
{% for number in component.numbers %}
{% set delay = 400 + (loop.index0 * 200) %}
<div class="numbers-component__number numbers-component__number--{{ loop.index }}"
data-sal="slide-up"
data-sal-duration="400"
data-sal-delay="{{ delay }}"
data-sal-easing="ease-out-quint">
<div class="numbers-component__number-line numbers-component__number-line--{{ loop.index }}" data-numbers-component-line>
</div>
<div class="numbers-component__number-value">
{{ number.numberValue }}
</div>
{% if number.description | default %}
<div class="numbers-component__number-description">
{{ number.description | raw }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"componentSpacing": "large",
"component": {
"type": "numbers",
"numbers": [
{
"numberValue": "6th",
"description": "in the world according to Center for World University Rankings"
},
{
"numberValue": "3",
"description": "enrollment options"
},
{
"numberValue": "96%",
"description": "job placement rate for graduates"
},
{
"numberValue": "10:1",
"description": "student faculty ratio"
}
]
}
}
.numbers-component
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
display grid
grid-column-gap 16px
grid-row-gap 48px
grid-template-columns 1fr
justify-content center
--descriptionColor charcoalLight
--numberBorderColor illiniOrange
--numberColor illiniOrange
&--arch
--descriptionColor charcoalLight
--numberBorderColor industrialBlue
--numberColor industrialBlue
&--art
--descriptionColor charcoalLight
--numberBorderColor archesBlue
--numberColor charcoalLighter
&--college
--descriptionColor illiniBlue
--numberBorderColor illiniOrange
--numberColor illiniOrange
&--dance
--descriptionColor charcoalLight
--numberBorderColor archesBlue
--numberColor charcoalLighter
&--durp&--light
--descriptionColor charcoalLight
--numberBorderColor illiniOrange
--numberColor illiniOrange
&--durp&--dark
--descriptionColor white
--numberBorderColor illiniOrange
--numberColor white
&--landarch
--descriptionColor charcoalDarker
--numberBorderColor illiniOrange
--numberColor illiniOrange
&--theatre
--descriptionColor charcoalLight
--numberBorderColor illiniOrange
--numberColor illiniOrange
&--music
--descriptionColor illiniBlue
--numberBorderColor illiniOrange
--numberColor altgeld
+above(numbersBreakpoint)
grid-template-columns repeat(2, 1fr)
&__number-line
background-color var(--numberBorderColor)
height 2px
max-width 0
width 100%
&--animate
animation drawNumberLine 1000ms
animation-fill-mode forwards
&--1
animation-delay 500ms
&--2
animation-delay 1000ms
&--3
animation-delay 1500ms
&--4
animation-delay 2000ms
&__number-value
@extends $billboardTitle
color var(--numberColor)
&__number-description
@extends $headline3
color var(--descriptionColor)
@keyframes drawNumberLine
from
max-width 0
to
max-width 100%
There are no notes for this item.