Explore our innovative solutions to collect, manage, and report sustainability data, enhancing strategies across supply chains and business operations with actionable insights for lasting change.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-split-image-hero {
height: auto;
padding: 0 0;
display: flex;
flex-direction: column-reverse;
@include bp($lg){
padding: 4rem 0;
height: auto;
display: block;
}
&__image-container {
width: 100%;
position: relative;
right: unset;
top: unset;
transform: unset;
border-radius: 0 0 32px 32px;
overflow: hidden;
max-height: 40vh;
height: 40vh;
@include bp($lg){
width: 50%;
height: 100%;
max-height: 64vh;
border-radius: 60px;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
position: absolute;
display: flex;
}
img, picture{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
&__container{
padding-top: 2rem;
padding-bottom: 2rem;
@include bp($lg){
padding-bottom: 0;
padding-top: 0;
}
}
&__heading{
*{
color: var(--text-color);
}
}
&__content{
p{
@include fluid-type(18, 22);
}
}
}
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/split-image-hero",
"title": "Split Image Hero",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-split-image-hero.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 - Example",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/split-image-hero/block-split-image-hero.css"
}