Image Left

%

Of consumers say their work/life habits are now ‘back to normal’ or busier than they were pre-pandemic, making home deliveries less convenient

We’re ready if you are

We’ve been working with Mondial Relay to make the whole process of offering your customers pickup as smooth as possible. Our simple, customizable technology integrates seamlessly with every kind of checkout.

Learn more about how the technology works

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-left {
    &__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;

        &--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;
            }
        }

        &--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-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;
            }
        }

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

        h6 {
            color: $secondary;
        }
    }

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

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

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

        h2 {
            @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;

            &.btn--text {
                @include bp($md, true) {
                    max-width: 70%;

                    &::before {
                        top: 1.688rem;
                    }
                }
            }
        }

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

There are is no JavaScript file with this component.