By creating a Supply Chain Sustainability School, your group can set a new standard for sustainability in your market. This initiative will demonstrate a collective commitment to advancing sustainable practices.
A joint sustainability training program will enhance the overall resilience of your supply chain. Providing essential knowledge and tools to your suppliers and partners will help address environmental challenges and improve market stability.
Implementing sustainable practices can lead to significant cost savings. By working together to promote these practices, your companies can achieve better resource management, reduce waste, and lower operational costs.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-image-content {
padding: 4rem 0;
&__row{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
@include bp($md){
flex-direction: row;
align-items: stretch;
}
}
&__card{
border-radius: 40px;
overflow: hidden;
position: relative;
padding: 24px;
display: flex;
min-height: 350px;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
color: var(--white);
text-decoration: none;
cursor: initial;
width: 100%;
transition: .45s ease-out;
.btn{
@include bp($lg){
font-size: 20px;
padding: 20px 30px;
}
}
@include bp($md){
width: calc(100% / 3);
min-height: 400px;
padding: 36px;
border-radius: 50px;
}
&.gradient-blue{
.block-image-content__card-image-container::after{
background: linear-gradient(0, var(--accentBlue), transparent);
}
}
&.gradient-purple{
.block-image-content__card-image-container::after{
background: linear-gradient(0, var(--primary), transparent);
}
}
&[href]{
cursor: pointer;
}
@include bp($md){
.btn{
display: none;
}
}
&.active{
width: 100%;
transition: .45s ease-out;
@include bp($md){
width: 66%;
}
.btn{
display: inline-flex;
color: var(--white);
&:hover{
color: var(--primary);
}
}
.block-image-content__card-details{
p{
margin-bottom: 1rem
}
h3{
@include fluid-type(24, 32);
}
}
}
&-details{
z-index: 1;
position: relative;
@include bp($md){
h3{
@include fluid-type(16, 24);
}
p{
margin: 0;
}
}
h3{
font-weight: 600;
color: var(--white);
}
p{
color: var(--white);
}
.btn{
color: var(--white);
}
}
&-image-container{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
z-index: 1;
&::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(0, var(--primary), transparent);
}
img, picture{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
}
}
class ImageContent {
/**
* Create and initialise objects of this class
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
* @param {object} block
*/
constructor() {
this.blocks = document.querySelectorAll('.block-image-content');
this.init();
}
/**
* Example function to run class logic
* Can access `this.block`
*/
init() {
this.blocks.forEach((block) => {
const cards = block.querySelectorAll('.block-image-content__card');
if(cards){
const handleCardHover = (cards) => {
cards.forEach((card) => {
card.addEventListener('mouseenter', () => {
card.classList.add('active');
cards.forEach((noCardHover) => {
if(card != noCardHover){
noCardHover.classList.remove('active');
}
});
});
card.addEventListener('mouseleave', () => {
card.classList.remove('active');
});
});
};
const handleCardSwitch = (cards) => {
let currentIndex = 0;
setInterval(() => {
cards.forEach((card, index) => {
card.classList.remove('active');
if (index === currentIndex) {
card.classList.add('active');
} else {
card.classList.remove('active');
}
});
currentIndex = (currentIndex + 1) % cards.length;
}, 5000);
};
const screenWidth = window.innerWidth;
if (screenWidth > 992) {
handleCardHover(cards);
} else if (screenWidth <= 992 && screenWidth >= 767) {
handleCardSwitch(cards);
}
}
});
}
}
new ImageContent();
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/image-content",
"title": "Image Content",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-image-content.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": true
},
"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/image-content/block-image-content.css",
"swiper"
],
"viewScript": ["image-content", "swiper"]
}