Benifits Grid
View example
![54d8413ca3ce360174dbdb36244ed9ad99f3d791]()
![60a61ff95955b279a8a2403d410ba9723f239393]()
Working at Embryo
has its perks.
50% off your gym membership
Using a modern, multi-channel marketing strategy to transform your business into an authority in your market.
Private health & dental care
Opt-in to enjoy private Bupa health and dental care.
Perkbox members
Full day off on your Birthday
Electric Car Scheme
Team members with two years of service can choose from a variety of electric cars and a free home charger and installation.
Hybrid Working
Yearly Company Trip
If company goals are achieved, #TeamEmbryo are whisked away on a company trip.
Do you want to be a part of our team?
We’re always looking for talented and experienced individuals to join team Embryo. Take a look at our latest positions available below.
Join us Company Charity Day
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-benifits-grid{
margin-left: rem-calc(-8);
margin-right: rem-calc(-8);
@include bp($md){
margin-left: auto;
margin-right: auto;
}
@include padding-top(rem-calc(40));
@include padding-bottom(rem-calc(40));
@include bp($lg){
@include padding-top(rem-calc(90));
@include padding-bottom(rem-calc(12));
}
.container-fluid{
@include bp($md,true){
padding-left: 0;
padding-right: 0;
}
}
.heading-wrap{
display: flex;
justify-content: center;
text-align: center;
margin-bottom: rem-calc(35);
@include bp($lg){
margin-bottom: rem-calc(81);
}
h2{
letter-spacing: -4%;
}
}
&__wrapper{
scroll-behavior: smooth;
//overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
@include bp($md,true){
padding-left: 12px;
padding-right: 12px;
}
}
&__items{
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 9px;
overflow-y: visible;
padding-top: rem-calc(5);
@include bp($md){
display: grid;
//overflow-x: hidden;
flex-wrap: wrap;
grid-template-columns: 1fr 1fr;
}
@include bp($lg){
grid-template-columns: 1fr 1fr 1fr;
}
@include bp($xl){
grid-template-columns: 1fr 1fr 1fr 1fr;
}
a.benifit-card{
&:hover{
box-shadow: 0px 16px 34px 0px rgba(0, 0, 0, 0.25);
transform: translateY(-5px);
}
}
.benifit-card{
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
overflow: hidden;
position: relative;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: rem-calc(300);
transition: 0.3s ease-in all;
@include bp($md){
width: auto;
}
&-size__empty,
&-size__cta{
&:hover{
box-shadow: none;
transform: none;
}
}
&-size__large{
@include bp($md){
grid-column: span 2;
}
}
&-size__empty{
display: none;
@include bp($md){
display: flex;
}
}
&-size__standard{
border-radius: 20px;
aspect-ratio: 382/525;
padding: 30px;
}
&-size__cta{
justify-content: center;
@include bp($md){
grid-column: span 2;
}
.content-block{
max-width: rem-calc(636);
padding: rem-calc(40 0);
margin: 0 auto;
text-align: center;
h3{
margin-bottom: rem-calc(20);
letter-spacing: -1.6px;
}
p{
font-size: clamp(rem-calc(20), 2vw, rem-calc(26)) !important;
letter-spacing: -1.6px;
}
}
}
&-type__icon-card{
border: 2px solid rgba(0,0,0,0.2);
}
&-type__image-card{
border-radius: 20px;
padding: rem-calc(12 11);
&.benifit-card-bg__overlay{
&:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.3);
z-index: 1;
}
}
.content-block{
max-width: rem-calc(374);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.1);
border-radius: 13px;
padding: rem-calc(20);
color: $white;
.icon-wrap{
border-color: $white !important;
color: $white !important;
}
h4{
color: $white;
}
p{
color: $white;
}
.cta-btn{
border-color: $white !important;
&:hover{
background-color: $white !important;
color: $black !important;
}
}
}
&.benifit-card-size__large{
.content-block{
.icon-wrap{
background-color: $white !important;
border-color: $white !important;
color: $black !important;
}
}
}
}
&-bg__blue-bg{
background-color: $tertiary;
}
&-bg__white-bg{
background-color: $white;
}
&-bg__orange-bg{
background-color: var(--secondary);
*{
color: $white !important;
border-color: $white !important;
}
.cta-btn{
svg{
path{
transition: .3s;
}
}
&:hover{
background-color: $white !important;
color: $primary !important;
svg{
path{
fill: $primary !important;
transition: .3s ease-in all;
}
}
}
}
}
&-bg__transparent{
background-color: transparent;
}
.content-block{
position: relative;
z-index: 10;
h4{
margin-bottom: rem-calc(18);
}
p{
font-size: clamp(rem-calc(16), 2vw, rem-calc(18));
margin-bottom: rem-calc(18);
}
.icon-wrap{
width: rem-calc(66);
height: rem-calc(66);
background: transparent;
border: 1px solid $black;
padding: rem-calc(5);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: rem-calc(16);
font-family: dashicons;
font-size: rem-calc(40);
img{
width: auto;
height: auto;
max-width: 40px;
max-height: 40px;
}
}
.cta-btn{
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid $black;
padding: rem-calc(9.5 20);
font-size: clamp(rem-calc(16), 2vw, rem-calc(18));
font-weight: 600;
border-radius: 40px;
text-decoration: none;
margin-top: rem-calc(40);
transition: 0.3s ease-in all;
&:hover{
background-color: $black;
color: $white;
}
}
}
}
}
}
There are is no JavaScript file with this component.
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/benifits-grid",
"title": "Benifits Grid",
"description": "Benifits Grid block",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-benifits-grid.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"style": ["dashicons", "file:../../assets/css/benifits-grid/block-benifits-grid.css"]
}
Page Title
Page Type
Page URL
There are is no readme file with this component.