<div class="statistic">
<h2 class="statistics__label">Class of 2025 Profile</h2>
<ul>
<li>
<h3 class="statistic__title">X,XXX</h3>
<div class="statistic__text">Enrolled Students</div>
</li>
<li>
<h3 class="statistic__title">XX%</h3>
<div class="statistic__text">Out of State or International Students</div>
</li>
<li>
<h3 class="statistic__title">1 in 4</h3>
<div class="statistic__text">Students are Black, Asian, Hispanic or Multiracial</div>
</li>
</ul>
</div>
<div class="statistic">
{% if statistics_label %}<h2 class="statistics__label">{{ statistics_label }}</h2>{% endif %}
<ul>
{% for statistic in statistics %}
<li>
<h3 class="statistic__title">{{ statistic.statistic_title }}</h3>
<div class="statistic__text">{{ statistic.statistic_text|raw }}</div>
</li>
{% endfor %}
</ul>
</div>
{
"statistics_label": "Class of 2025 Profile",
"statistics": [
{
"statistic_title": "X,XXX",
"statistic_text": "Enrolled Students"
},
{
"statistic_title": "XX%",
"statistic_text": "Out of State or International Students"
},
{
"statistic_title": "1 in 4",
"statistic_text": "Students are Black, Asian, Hispanic or Multiracial"
}
]
}
.statistic {
background-color: $iastate-red;
padding: rem(65) rem(40);
position: relative;
&:before {
content: "";
border-bottom: rem(8) solid $iastate-gold;
top: rem(-4);
left: 50%;
margin-left: rem(-28);
width: rem(56);
height: rem(8);
position: absolute;
}
ul {
li {
margin-bottom: rem(29);
padding-top: rem(36);
position: relative;
&:last-child {
margin-bottom: 0;
&:after {
display: none;
}
}
&:first-child {
padding-top: 0;
}
&:after {
content: "";
border-bottom: rem(1) solid $iastate-gold;
position: absolute;
left: 50%;
width: rem(78);
margin-left: rem(-39);
bottom: rem(-32);
}
&:before {
display: none;
}
}
}
}
.statistics__label {
color: $white;
text-align: center;
margin: 0 0 rem(15) 0;
margin-bottom: rem(36);
padding: 0;
}
.statistic__title {
color: $iastate-gold;
font-family: $typeface-serif;
font-weight: 700;
text-align: center;
font-size: rem(55);
line-height: (68 / 55);
margin: 0;
padding: 0;
&:after {
display: none;
}
}
.statistic__text {
margin: 0;
text-align: center;
color: $white;
font-family: $typeface-sans-serif;
font-weight: 700;
font-size: rem(18);
line-height: (30 / 18);
a {
color: $white;
&:hover,
&:focus {
color: $yellow;
}
}
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap)
statistic
which outputs the statistic with room for text (and floats the statistic box left or right) - this should typically be used for output globallyindex.scss
file as @import "../components/stat/stat";