Image Right

What customers love about Mondial Relay with HubBox

Our software is customizable for your checkout and optimized for mobile.

We focus on providing your customers with a great user experience to generate better engagement and higher returns.

It’s also really simple to implement!

Extended business hours, open on weekends, and some locations stay open 24 hours
Secure locations which eliminate the chance of missed deliveries or porch thefts
More environmentally friendly as the service reduces carbon emissions by up to 85%

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Block Data

tab

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

Image

image

img

Tooltip Position

select

tooltip_position

Tooltip Title Number

number

tooltip_title

Tooltip Title Sign

text

tooltip_title_sign

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

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

.block-image-right {
    &__image-wrapper {
        position: relative;
        max-width: 44.25rem;

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

    &__float {
        background-color: $white;
        @include padding(rem-calc(2.813rem));
        position: absolute;
        max-width: 20.75rem;

        &--top-right {
            top: 3.75rem;
            right: 4.5rem;

            @include bp($md, true) {
                bottom: 1.25rem;
                @include padding(rem-calc(1.25rem));
                left: 0;
                right: 0;
                max-width: 90%;
                margin: auto;
                top: auto;
            }
        }

        &--top-left {
            top: 3.75rem;
            left: 4.5rem;

            @include bp($md, true) {
                bottom: 1.25rem;
                @include padding(rem-calc(1.25rem));
                left: 0;
                right: 0;
                max-width: 90%;
                margin: auto;
                top: auto;
            }
        }

        &--bottom-left {
            bottom: 3.75rem;
            left: 4.5rem;

            @include bp($md, true) {
                bottom: 1.25rem;
                @include padding(rem-calc(1.25rem));
                left: 0;
                right: 0;
                max-width: 90%;
                margin: auto;
                top: auto;
            }
        }

        &--bottom-right {
            bottom: 3.75rem;
            right: 4.5rem;

            @include bp($md, true) {
                bottom: 1.25rem;
                @include padding(rem-calc(1.25rem));
                left: 0;
                right: 0;
                max-width: 90%;
                margin: auto;
                top: auto;
            }
        }

        h3 {
            color: $primary;
            @include margin-bottom(rem-calc(0.438rem));
        }

        h6 {
            color: $secondary;
        }
    }

    &__text-wrapper {
        @include padding-left(rem-calc(4.5rem));
        max-width: 92%;

        @include bp($xl, true) {
            padding-left: 0;
            max-width: 100%;
        }

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

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

        .heading {
            @include margin-bottom(rem-calc(2.375rem));
            color: $secondary;
        }

        h5 {
            color: $secondary;
        }

        h3 {
            @include margin-top(rem-calc(2.5rem));
        }

        h4 {
            @include margin-top(rem-calc(3.313rem));
        }

        .btn {
            font-weight: 400;
        }

        @include bp($lg, true) {
            max-width: 100%;
            padding-left: 0;
            margin-top: 2rem;
            @include margin-top(rem-calc(2rem));
        }
    }
}

There are is no JavaScript file with this component.