Illustration Left

Reduce your delivery costs by as much as 25%

How HubBox works with Mondial Relay

The Mondial Relay network offers customers over 20,000 convenient and secure pickup locations at checkout.

Locations across France, the Netherlands, Belgium, Spain and Portugal, include corner shops and independent businesses that are typically open 7 days per week for easy, convenient collection

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Block Data

tab

Top Icon Image

image

top_icon_img

Heading Type

select

heading_type

Heading Text

text

heading_text

Content

wysiwyg

content

Button Type

select

button_button_type

Button Color

select

button_button_color

Button Link

link

button_button_link

Button Type

select

button_type

Button Color

select

button_color

Button Link

link

button_link

Image

image

image_img

Tooltip Position

select

tooltip_position

Tooltip Width

radio

tooltip_width

Tooltip Text

text

tooltip_text

Block Meta

tab

text

block_id

Block Classes

text

block_classes

Background Colors

select

background_colors

Width

button_group

background_colors_width

Border Bottom

true_false

border_bottom

Margin Top

select

margin_top

Margin Bottom

select

margin_bottom

Padding Top

select

padding_top

Padding Bottom

select

padding_bottom

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

.block-illustration-left {
    &__image-wrapper {
        position: relative;

        picture {
            img {
                border-radius: 20px;
            }
        }

        @include bp($lg, true) {
            text-align: center;

            img {
                margin-left: auto;
                margin-right: auto;
                max-width: 310px;
                left: 0;
                right: 0;
            }
        }

        @media screen and (max-width: 1100px) {
            img {
                max-width: 370px;
            }
        }

        @media screen and (max-width: 992px) {
            img {
                max-width: 310px;
            }
        }

        .block-hexagon {
            position: absolute;
            left: 0;
            top: -40px;
            max-width: 500px;
            z-index: -1;

            @media screen and (max-width: 1499px) {
                left: 0;
            }

            @media screen and (max-width: 1260px) {
                max-width: 440px;
            }

            @media screen and (max-width: 1100px) {
                max-width: 370px;
            }

            @media screen and (max-width: 992px) {
                max-width: 310px;
            }
        }
    }

    &__vector {
        position: absolute;

        &--bottom {
            left: 0;
            right: 0;
            bottom: 0;
            top: 3.125rem;
        }

        &--top {
            right: 1.563rem;
            bottom: 2.75rem;
        }
    }

    &__text-wrapper {
        position: relative;

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

        h2 {
            @include margin-bottom(rem-calc(2.5rem));
            color: $secondary;
            position: relative;

            span {
                color: $primary;
            }
        }

        .heading {
            @include margin-bottom(rem-calc(2.5rem));
            color: $secondary;
            position: relative;
            line-height: 120%;
            @include fluid-type(28, 50, 375, $max-container-size);
            font-weight: 700;

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

            span {
                color: $primary;
            }
        }

        h5 {
            @include margin-bottom(rem-calc(1.5rem));
            color: $secondary;
        }

        p {
            @include margin-bottom(rem-calc(1.5rem));
            color: $secondary;
            font-weight: 400;
        }
    }

    &__smile-img {
        position: absolute;
        right: 3rem;
        top: -5.188rem;
        max-width: 80px;

        @media screen and (max-width: $xl) {
            right: 0;
            top: -70px;
            max-width: 60px;
        }

        @media screen and (max-width: $md) {
            right: 0;
            top: -40px;
            max-width: 40px;
        }
    }

    &__float {
        background-color: $primary;
        @include padding(rem-calc(2.188rem 1.75rem));

        max-width: 17.75rem;
        position: absolute;

        &--left-bottom {
            bottom: 2.5rem;
            left: -4.813rem;

            @include bp($xl, true) {
                left: 0;
            }

            @include bp($lg, true) {
                left: 0;
                bottom: 0;
                @include padding(rem-calc(10));
            }
        }

        &--left-top {
            top: 2.063rem;
            left: 1rem;

            @include bp($xl, true) {
                left: 0;
            }

            @include bp($lg, true) {
                left: 0;
                top: 0;
                @include padding(rem-calc(10));
            }
        }

        &--right-top {
            top: 2.063rem;
            right: 6.875rem;

            @include bp($xl, true) {
                right: 0;
            }

            @include bp($lg, true) {
                right: 0;
                top: 0;
                @include padding(rem-calc(10));
            }
        }

        &--right-bottom {
            bottom: 2.5rem;
            right: 1.187rem;

            @include bp($xl, true) {
                right: 0;
            }

            @include bp($lg, true) {
                right: 0;
                bottom: 0;
                @include padding(rem-calc(10));
            }
        }

        &--small {
            max-width: 13.75rem;
            @include padding(rem-calc(1.75rem 1.563rem));
        }

        p {
            color: $white;
            margin: 0;
            font-weight: 700;
            line-height: 120%;
        }
    }

    .block-general__btn-flex {
        .btn--text {
            @include margin-right(rem-calc(1.875rem));
        }
    }
}

There are is no JavaScript file with this component.