Components
31
Background Gradients Blog Post Bullet Left Card Stack Case Study Large Case Study Single Contact Form Cta Demo Faqs Header Resources Homepage Hero Homepage Stats Illustration Left Illustration Right Image Left Image Right Impact Carousel Landing Form Landing Form Landing Form Logo Carousel Logos Software Logo Tab Blocks Table Testimonial Three Blocks Two Column Usp Carousel Video

Homepage Stats

How using Mondial Relay with HubBox will help more customers choose you

Mondial Relay significantly reduces the cost of failed deliveries. That's because every time a customer chooses a Mondial Relay pickup location, you won't have to worry about return shipment or customer service costs that occur with failed home deliveries.
%
increase in average order value due to the conversion of higher spending shoppers who choose a pickup point as a delivery option
%
of shoppers will abandon an online purchase due to a lack of shipping options
%
of shoppers expect and want to be offered a pickup point as a delivery option when they checkout online
Field
Field Type
Field Name
Instructions
Block Data
tab
Heading Type
select
heading_type
Heading Text
text
heading_text
Text
textarea
text
Stats Title
text
stats_title
Stats
repeater
stats
-- Heading Number
text
heading
-- Heading Sign
text
heading_sign
-- Sub Text
text
sub_text
Background Image
image
background_img
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Background Colors
select
background_colors
Width
button_group
background_colors_width
Padding Bottom
select
padding_bottom
Padding Top
select
padding_top
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom 

				
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-stats {
    // background-color: $light-blue;
    overflow: hidden;

    &__image-wrapper {
        background-size: cover;
        position: relative;
        background: linear-gradient(90deg, #263238 0%, rgba(38, 50, 56, 0) 100%);

        h3 {
            color: $white;
            @include margin-bottom(rem-calc(0.75rem));
            max-width: 60%;

            @include bp($lg, true) {
                max-width: 100%;
            }

            span {
                color: $primary;
            }
        }

        .heading {
            @include margin-bottom(rem-calc(0.75rem));
            @include fluid-type(32, 70, 375, $max-container-size);
            color: $white;
            max-width: 60%;
            line-height: 100%;
            font-weight: 700;

            @include bp($lg, true) {
                max-width: 100%;
            }

            span {
                color: $primary;
            }
        }

        h5 {
            color: $white;
            max-width: 60%;
            @include margin-bottom(rem-calc(2.688rem));

            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        h4 {
            color: $white;
            max-width: 60%;

            @include bp($lg, true) {
                max-width: 100%;
            }
        }
    }

    &__slider {
        .slick-track {
            display: flex;
            cursor: grab;
        }

        .slick-slide {
            @include margin-right(rem-calc(15));
            @include margin-left(rem-calc(15));
        }

        .slick-list {
            overflow: hidden;
        }
    }

    &__bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        height: 100%;
        width: 100%;

        img {
            border-radius: 20px;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }

    &__white-block {
        @include padding(rem-calc(2.813rem 2.75rem 2.813rem 3.75rem));
        @include margin-top(rem-calc(1.688rem));
        background-color: $white;
        width: 100%;
        max-width: 73%;

        @include bp($md, true) {
            display: block;
        }

        @include bp($xl, true) {
            max-width: 100%;
            text-align: center;
        }

        .title--large {
            color: $primary;
            font-weight: 700;
        }

        h6 {
            color: $secondary;
            @include margin-bottom(rem-calc(0));

            @include bp($md, true) {
                @include margin-bottom(rem-calc(25));
            }
        }
    }

    &__white-block-wrapper {
        flex: 18.25%;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-wrapper {
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
    }
}

"use strict";
var StatisticsCarousel = class {
  constructor() {
    (this.blocks = document.querySelectorAll(".block-stats__white-block")),
      this.init();
  }
  init() {
    this.blocks.forEach((e) => {
      new Swiper(".block-stats__white-block .swiper", {
        slidesPerView: 1,
        spaceBetween: 10,
        loop: true,
        speed: 6000,
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        },
        breakpoints: {
          768: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        },
      });
    });
  }
};
new StatisticsCarousel();
There are is no readme file with this component.