Logos
Ready when you are
Trusted by thousands of retailers worldwide
Access the software that powers local pickup solutions for thousands of retailers globally.
Field
Field Type
Field Name
Instructions
Block Data
tab
Background
button_group
background
Overline
text
overline
Heading Type
select
heading_type
Heading Text
text
heading_text
Text
textarea
text
First Button Type
select
first_btn_button_type
First Button Color
select
first_btn_button_color
First Button Link
link
first_btn_button_link
Second Button Type
select
second_btn_button_type
Second Button Color
select
second_btn_button_color
Second Button Link
link
second_btn_button_link
Left Logos
repeater
left_logos
-- Logo
image
logo
Right Logos
repeater
right_logos
-- Logo
image
logo
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Background Colors
select
background_colors
Width
button_group
background_colors_width
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-logos {
position: relative;
@include bp($md, true) {
background-color: $light-blue;
}
&__blackbg {
position: relative;
&::before {
content: "";
background-color: $secondary;
border-radius: 20px;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
position: absolute;
}
.block-logos__wrapper {
h5 {
color: $white;
}
h3 {
color: $white;
}
.heading {
color: $white;
}
}
}
&__logo-list {
position: relative;
.container-fluid {
max-width: 100%;
}
@include bp($xl, true) {
ul {
text-align: center;
li {
display: inline-block;
}
}
}
}
.block-logos__logo-list-left-logo {
&--1 {
left: -15px;
position: absolute;
top: 5.875rem;
max-width: 131px;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--2 {
left: 13rem;
position: absolute;
max-width: 104px;
top: 6.688rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--3 {
left: -15px;
position: absolute;
max-width: 104px;
top: 18.625rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--4 {
left: 11rem;
position: absolute;
max-width: 174px;
top: 16.625rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--5 {
left: 0.625rem;
position: absolute;
max-width: 174px;
top: 27rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--6 {
left: 17.625rem;
position: absolute;
max-width: 131px;
top: 32rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
}
.block-logos__logo-list-right-logo {
&--1 {
right: 18rem;
position: absolute;
top: 4.875rem;
max-width: 131px;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--2 {
right: -15px;
position: absolute;
max-width: 131px;
top: 5.688rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--3 {
right: 9rem;
position: absolute;
max-width: 174px;
top: 14.625rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--4 {
right: 2rem;
position: absolute;
max-width: 104px;
top: 23.625rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--5 {
right: 16rem;
position: absolute;
max-width: 131px;
top: 31rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--6 {
right: -15px;
position: absolute;
max-width: 174px;
top: 35rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
}
&.block-space-side-40 {
.block-logos__logo-list-left-logo {
&--1 {
left: -40px;
position: absolute;
top: 5.875rem;
max-width: 131px;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--2 {
left: 11rem;
position: absolute;
max-width: 104px;
top: 6.688rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--3 {
left: -40px;
position: absolute;
max-width: 104px;
top: 18.625rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--4 {
left: 8.188rem;
position: absolute;
max-width: 174px;
top: 16.625rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--5 {
left: -1.375rem;
position: absolute;
max-width: 174px;
top: 27rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--6 {
left: 15.625rem;
position: absolute;
max-width: 131px;
top: 32rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
}
.block-logos__logo-list-right-logo {
&--1 {
right: 15rem;
position: absolute;
top: 4.875rem;
max-width: 131px;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--2 {
right: -40px;
position: absolute;
max-width: 131px;
top: 5.688rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--3 {
right: 7rem;
position: absolute;
max-width: 174px;
top: 14.625rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--4 {
right: -1rem;
position: absolute;
max-width: 104px;
top: 23.625rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--5 {
right: 15rem;
position: absolute;
max-width: 131px;
top: 29rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
&--6 {
right: -40px;
position: absolute;
max-width: 174px;
top: 35rem;
@include bp($xl, true) {
position: initial;
max-width: 100px;
}
@include bp($sm, true) {
max-width: 110px;
}
@media screen and (max-width: 368px) {
max-width: 90px;
}
}
}
}
&__image {
position: absolute;
top: 1.25rem;
left: 0;
z-index: 1;
}
&__wrapper {
text-align: center;
position: relative;
h5 {
color: $secondary;
}
h3 {
color: $secondary;
}
.heading {
color: $secondary;
}
}
h5 {
@include margin-bottom(rem-calc(1.047rem));
max-width: 40%;
margin-left: auto;
margin-right: auto;
@include bp($xl, true) {
max-width: 100%;
}
}
h3 {
@include margin-bottom(rem-calc(2rem));
max-width: 47%;
margin-left: auto;
margin-right: auto;
@include bp($xl, true) {
max-width: 100%;
}
}
.heading {
@include margin-bottom(rem-calc(2rem));
max-width: 47%;
margin-left: auto;
margin-right: auto;
@include fluid-type(32, 70, 375, $max-container-size);
font-weight: 700;
color: $secondary;
@include bp($xl, true) {
max-width: 100%;
}
}
.btn {
z-index: 2;
}
.btn--primary {
@include margin-top(rem-calc(2.5rem));
@include margin-bottom(rem-calc(1.73rem));
@include bp($md, true) {
min-width: auto;
}
}
.block-general__btn-flex {
justify-content: center;
}
}
.block-logos__blackbg {
.btn--primary {
&:hover {
background-color: $white;
color: $primary !important;
border: 0.063rem solid $white;
}
}
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
There are is no readme file with this component.