<div class="fact purple sibling-margins-off">
<span class="d-block text-center factnumber make-counter">$1.25 million</span>
<span class="d-block text-center">raised to fight climate change</span>
</div>
<div class="fact {{fact_color}} sibling-margins-off">
<span class="d-block text-center factnumber make-counter">{{fact_number}}</span>
<span class="d-block text-center">{{fact_desc}}</span>
</div>
{
"fact_color": "purple",
"fact_number": "$1.25 million",
"fact_desc": "raised to fight climate change"
}
$fact-fontsize:4rem !default;
.fact {
display:flex;
flex-direction:column;
justify-content:center;
margin:0 auto;
position:relative;
width:100%;
.factnumber {
@include condensed-font;
font-size:$fact-fontsize;
line-height:1;
&.make-counter {
display:inline-flex !important;
height:$fact-fontsize;
justify-content:center;
}
}
&.purple {
.factnumber {
color:var(--purple);
}
}
&.orange {
.factnumber {
color:var(--orange);
}
}
&.green {
.factnumber {
color:var(--green);
}
}
&.blue {
.factnumber {
color:var(--blue);
}
}
}
There are no notes for this item.