Two Column
Keeping track
Our established relationships with major carriers ensures a high level of service when it comes to your delivery’s progress. We want to make sure everything is running smoothly.
For the customer: Notifications
Customers expect to be informed of their package’s status. Our software integrates perfectly with your system, so they’ll still get an email from you or your carrier upon dispatch and another when their delivery is ready for pickup.
For you: Post-launch testing
During the first few days or weeks of implementation – depending on the size of your business and the ecommerce platform you use – monitoring will be part of the service. We’ll be able to spot any issues and resolve them quickly.
There are no ACF fields assigned to this component.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-two-column {
h2 {
text-align: center;
@include margin-bottom(rem-calc(2.4rem));
}
.heading {
text-align: center;
@include margin-bottom(rem-calc(2.4rem));
@include fluid-type(28, 50, 375, $max-container-size);
line-height: 100%;
font-weight: 700;
color: $secondary;
}
p {
font-weight: 400;
margin-left: auto;
margin-right: auto;
text-align: center;
@include bp($md, true) {
max-width: 100%;
}
}
&__wrapper {
max-width: 54%;
margin-left: auto;
margin-right: auto;
text-align: center;
@include bp($lg, true) {
max-width: 100%;
}
}
.col-lg-5 {
@include margin-top(rem-calc(1.438rem));
@include margin-bottom(rem-calc(5.625rem));
}
&__box-wrapper {
@include padding(rem-calc(5.063rem 3.75rem));
height: 100%;
position: relative;
overflow: hidden;
&::before {
width: 100%;
aspect-ratio: 1080/1920;
content: "";
position: absolute;
top: 0;
left: 0;
pointer-events: none;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: 0.6s var(--ease);
transition-property: opacity;
@include bp($lg) {
aspect-ratio: 1920/1080;
background-size: contain;
}
}
&.active {
&:before {
opacity: 1;
}
}
&.left {
&:before {
transform: translate3d(0, -15%, 0);
background-position: left center;
background-image: url("/wp-content/themes/hub-box/assets/images/bg-gradient--left.svg");
@include bp($lg, true) {
bottom: 0;
top: 0;
left: 0;
}
}
}
&.right {
&:before {
background-position: right center;
top: -70px;
transform: matrix(1, 0, 0, -1, 0, 0);
left: 100px;
background-image: url("/wp-content/themes/hub-box/assets/images/bg-gradient--right.svg");
@include bp($lg, true) {
transform: none;
bottom: 0;
top: 0;
left: 0;
}
}
}
&.center {
&:before {
background-position: center center;
transform: matrix(-1, -0.1, -0.25, 0.97, 0, 0);
bottom: -60px;
left: 200px;
top: auto;
background-image: url("/wp-content/themes/hub-box/assets/images/bg-gradient--right.svg");
@include bp($lg, true) {
transform: none;
bottom: 0;
top: 0;
left: 0;
}
}
}
img {
max-width: 59px;
}
@include bp($lg, true) {
@include padding(rem-calc(2.063rem 1.875rem));
}
@include bp($md, true) {
height: auto;
}
h3 {
color: $secondary;
@include margin-top(rem-calc(1.25rem));
text-align: left;
span {
@include fluid-type(28, 50, 375, $max-container-size);
display: block;
line-height: 60px;
@include bp($xl, true) {
font-size: 2.625rem;
line-height: 42px;
}
@include bp($lg, true) {
font-size: 1.625rem;
line-height: 26px;
}
}
}
p {
max-width: 100%;
text-align: left;
margin-bottom: 0;
}
}
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
There are is no readme file with this component.