@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-cta {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
&__has-image {
padding-top: 5vh;
padding-bottom: 40vh;
}
&__image {
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, transparent 10%, transparent 40%, var(--white) 80%);
z-index: 1;
}
&.has-gradient {
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, var(--black) 10%, transparent 40%, var(--white) 80%);
}
}
img {
transform: translateY(10%);
}
}
&__negative-margin {
margin-bottom: -200px;
@include bp($md) {
margin-bottom: -250px;
}
@include bp($xl) {
margin-bottom: -350px;
}
& + section {
z-index: 1;
}
.block-cta__image {
&:before {
background: linear-gradient(to top, var(--white) 10%, transparent 30%, transparent 50%, var(--white) 90%);
}
}
}
&__content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
padding: 8rem 0;
}
&__heading,
&__link {
max-width: 650px;
text-align: center;
color: var(--primary);
}
&__link {
margin-top: 3rem;
a {
text-decoration: none;
}
}
}
class Cta {
block;
constructor(block) {
this.block = block;
this.init();
}
init() {
/* Swiper Example
this.swiperElem = this.block.querySelector('.swiper');
this.swiper = new Swiper(this.swiperElem, {
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'custom',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
});
*/
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-cta').forEach((block) => {
new Cta(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/cta",
"title": "Cta",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-cta.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Cta"
}
}
},
"style": "file:../../assets/css/cta/block-cta.css"
}