<section class="stats-section" role="region" aria-label="stats section">
<div class="c-stats-slider default">
<div class="stats-wrapper">
<div class="stats-icon">
<i class="far fa-acorn"></i>
</div><!-- end stats-icon -->
<h3 class="stat">
64k
</h3>
<div class="stats-description">
Lorem ipsum dolor sit amet.
</div><!-- end stats-description -->
<div class="stats-button">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end stats-button -->
</div><!-- end stats-wrapper -->
<div class="stats-wrapper">
<div class="stats-icon">
<i class="far fa-acorn"></i>
</div><!-- end stats-icon -->
<h3 class="stat">
23
</h3>
<div class="stats-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada varius libero nec auctor.
</div><!-- end stats-description -->
<div class="stats-button">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end stats-button -->
</div><!-- end stats-wrapper -->
<div class="stats-wrapper">
<div class="stats-icon">
<i class="far fa-acorn"></i>
</div><!-- end stats-icon -->
<h3 class="stat">
93
</h3>
<div class="stats-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada varius libero nec auctor.
</div><!-- end stats-description -->
<div class="stats-button">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end stats-button -->
</div><!-- end stats-wrapper -->
<div class="stats-wrapper">
<div class="stats-icon">
<i class="far fa-acorn"></i>
</div><!-- end stats-icon -->
<h3 class="stat">
4
</h3>
<div class="stats-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada varius libero nec auctor.
</div><!-- end stats-description -->
<div class="stats-button">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end stats-button -->
</div><!-- end stats-wrapper -->
<div class="stats-wrapper">
<div class="stats-icon">
<i class="far fa-acorn"></i>
</div><!-- end stats-icon -->
<h3 class="stat">
5
</h3>
<div class="stats-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada varius libero nec auctor.
</div><!-- end stats-description -->
<div class="stats-button">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end stats-button -->
</div><!-- end stats-wrapper -->
</div>
</section>
<section class="stats-section" role="region" aria-label="stats section">
<div class="c-stats-slider {{ stats_class | default('default') }}">
{% block cms_override %}
{% for stats_item in stats_items %}
{% include "@stat" with {
stat_icon: stats_item.stat_icon,
statistic: stats_item.statistic,
description: stats_item.description,
buttons: stats_item.buttons
} %}
{% endfor %}
{% endblock cms_override %}
</div>
</section>
{
"stats_items": {
"1": {
"stat_icon": "far fa-acorn",
"statistic": "64k",
"description": "Lorem ipsum dolor sit amet. ",
"buttons": {
"1": {
"text": "Button",
"url": "#",
"color": "dark-grey"
}
}
},
"2": {
"stat_icon": "far fa-acorn",
"statistic": "23",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada varius libero nec auctor. ",
"buttons": {
"1": {
"text": "Button",
"url": "#",
"color": "dark-grey"
}
}
},
"3": {
"stat_icon": "far fa-acorn",
"statistic": "93",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada varius libero nec auctor. ",
"buttons": {
"1": {
"text": "Button",
"url": "#",
"color": "dark-grey"
}
}
},
"4": {
"stat_icon": "far fa-acorn",
"statistic": "4",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada varius libero nec auctor. ",
"buttons": {
"1": {
"text": "Button",
"url": "#",
"color": "dark-grey"
}
}
},
"5": {
"stat_icon": "far fa-acorn",
"statistic": "5",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada varius libero nec auctor. ",
"buttons": {
"1": {
"text": "Button",
"url": "#",
"color": "dark-grey"
}
}
}
},
"stats_class": "default"
}
.stats-section {
padding: $space_four;
.c-stats-slider {
.slick-next {
right: 0 !important;
}
.slick-prev {
left: $space_neg_four !important;
}
@include media-breakpoint-up(md) {
.slick-list {
height: 400px;
width: 100%;
margin: 0 auto;
}
.slick-dots {
position: unset;
li {
button {
&::before {
-webkit-text-stroke: 3px $lehigh_brown;
-webkit-text-stroke: 3px var(--lehigh_brown, $lehigh_brown);
.color-scheme-dark & {
-webkit-text-stroke: 3px $lehigh_brown_darkmode;
-webkit-text-stroke: 3px var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
}
}
}
&.slick-active {
button {
&::before {
color: $lehigh_brown;
color: var(--lehigh_brown, $lehigh_brown);
.color-scheme-dark & {
color: $lehigh_brown_darkmode;
color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
}
}
}
}
}
}
}
.slick-track {
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
}
.slick-slide {
@include media-breakpoint-up(md) {
float: unset;
}
&:nth-of-type(2) {
@include media-breakpoint-up(md) {
margin: 0 $space-two;
}
}
}
&.slick-dotted {
.slick-slide {
position: relative;
margin: 0 $spacer;
left: -10px;
display: flex;
justify-content: center;
}
}
.slick {
&-next {
right: $space_neg_four;
}
&-prev {
left: $space_neg_four;
}
}
.slick-next,
.slick-prev {
&::before {
color: $lehigh_brown;
color: var(--lehigh_brown, $lehigh_brown);
.color-scheme-dark & {
color: $lehigh_brown_darkmode;
color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
}
}
}
}
}
Display the stats slider. On mobile it will go to a single stat view that can slide through the other stats.