<div class="fast-fact fast-fact--dark ">
<div class="fast-fact__stat">
<div class="headline-group ">
<span class="headline-group__head">50 ways</span>
</div>
</div>
<div class="fast-fact__description">
<p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>
</div>
</div>
{% if fast_fact is not empty %}
<div class="fast-fact {{ fast_fact.variant }} {{ variant }}">
<div class="fast-fact__stat">
{% include '@headline-group' with { hg: fast_fact.hg } %}
</div>
<div class="fast-fact__description">
{{ fast_fact.content }}
</div>
</div>
{% endif %}
{
"fast_fact": {
"hg": {
"tag": "div",
"headline": "50 ways"
},
"content": "<p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>",
"variant": "fast-fact--dark"
}
}
.fast-fact {
padding: rr-gridbase(2);
@include rr-break-directive(m) {
padding: rr-gridbase(4);
}
border: rr-gridbase(1) color(davidson-red) solid;
color: color(davidson-red);
.headline-group {
.headline-group__head {
font-weight: 500;
@include rr-font-compute(xl, medium);
@include rr-break-directive(m) {
font-size: rem(56px);
line-height: 1.4;
}
}
}
.fast-fact__description {
@include rr-break-directive(m) {
@include rr-font-compute(xl, medium);
}
position: relative;
padding-top: rr-gridbase(2);
box-sizing: border-box;
&::before {
display: inline-block;
position: absolute;
top: -.3em;
width: 40px;
height: 2px;
background-color: color(davidson-red);
content: '';
}
p {
@include rr-break-directive(m) {
@include rr-font-compute(xl, medium);
}
margin-bottom: 0;
}
}
}
@mixin fast-fact-dark {
background-color: color(davidson-red);
color: color(davidson-white);
.fast-fact__description {
&::before {
background-color: color(davidson-white);
}
}
}
.fast-fact.fast-fact--dark {
@include fast-fact-dark();
}
.collection .fast-fact:first-of-type {
@include fast-fact-dark();
}
There are no notes for this item.