Bullet Left
Discover how our solution can work for you
Seamless multi-device experience
Customisable to your brand
Add your own stores as pickup locations
Field
Field Type
Field Name
Instructions
Block Data
tab
Heading Type
select
heading_type
Heading Text
text
heading_text
Bullet List
repeater
bullet_list
-- Icon
image
icon
-- Text
text
text
Image
image
img
Button Type
select
button_type
Button Color
select
button_color
Button Link
link
button_link
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Background Colors
select
background_colors
Width
button_group
background_colors_width
Padding Top
select
padding_top
Padding Bottom
select
padding_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-bullet-left {
h2 {
@include margin-bottom(rem-calc(39));
color: $secondary;
max-width: 98%;
span {
color: $primary;
}
}
.heading {
@include margin-bottom(rem-calc(39));
color: $secondary;
max-width: 98%;
@include fluid-type(28, 50, 375, $max-container-size);
font-weight: 700;
line-height: 100%;
span {
color: $primary;
}
}
&__image-wrapper {
text-align: right;
position: relative;
picture {
img {
border-radius: 20px;
}
}
@media screen and (max-width: 1100px) {
img {
max-width: 370px;
}
}
@media screen and (max-width: 992px) {
img {
max-width: 310px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
}
@include bp($lg, true) {
text-align: center;
@include margin-bottom(rem-calc(30));
}
.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) {
right: 0;
left: 0;
margin: auto;
}
}
&--bottom {
right: 1.563rem;
bottom: 1.75rem;
@include bp($lg, true) {
right: 0;
left: 0;
margin: auto;
}
}
}
&__text-wrapper {
@include bp($lg, true) {
@include margin-top(rem-calc(30));
}
}
&__bullet {
display: flex;
align-items: center;
@include margin-bottom(rem-calc(30));
gap: 1.96rem;
img {
max-width: 3.625rem;
@include bp($lg, true) {
max-width: 2.5rem;
}
}
h4 {
margin: 0;
color: $secondary;
}
}
&__bullet-content {
flex: 1;
}
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
There are is no readme file with this component.