Illustration Right

Install HubBox before your competitors do

HubBox is the only software of its kind, already trusted by thousands of retailers around the world. You can find it on checkout pages for everyone from boutique retailers to some of the world’s largest brands. Give customers the option for local pickup – they will love you for it.

Book a live demo now

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

Button Type

select

button_type

Button Color

select

button_color

Button Link

link

button_link

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-right {
    &__image-wrapper {
        position: relative;
        text-align: right;

        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;
            right: 0;
            top: -40px;
            max-width: 500px;
            z-index: -1;

            @media screen and (max-width: 1499px) {
                right: 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;

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

            @include bp($lg, true) {
                bottom: auto;
                top: 0;
                right: 0;
            }
        }

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

    &__text-wrapper {
        @include bp($md, true) {
            @include margin-top(rem-calc(2rem));
        }
        h2 {
            @include margin-bottom(rem-calc(2.5rem));
            color: $secondary;

            span {
                color: $primary;
            }
        }

        .heading {
            @include margin-bottom(rem-calc(2.5rem));
            color: $secondary;
            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;
        }
    }

    &__float {
        background-color: $primary;
        @include padding(rem-calc(2.188rem 1.75rem));
        max-width: 17.75rem;
        position: absolute;
        text-align: left;

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

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

            @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: -5rem;

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

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

        &--right-top {
            top: 1.063rem;
            right: -5.187rem;

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

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

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

            @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.