Testimonial Case Study

“As always, we experienced great service from Action Sustainability in helping us conduct our double materiality assessment. They were thorough in their process and worked very professionally with our internal and stakeholders to assess what key material issues we, at Amtico, should be focusing on. The finished product is exactly what we require and is instrumental to our overall sustainability strategy and roadmap.”

Barry Large Head of Learning & Development and Sustainability Implementation

Fields
PHP
SCSS
JavaScript
Pages
JSON
Notes

There are no ACF fields assigned to this component.

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-testimonial-case-study {
	padding: 4rem 0;
	margin: 0 0;
	height: auto;
	min-height: 92vh;

	@include bp($lg){
		padding: 4rem 1.5rem;
		min-height: 80vh;
	}

	@include bp($xl) {
		min-height: unset;
	}

	.swiper{
		overflow: visible;
	}

	&__wrapper{
		height: 100%;
	}

	&__item{
		height: 100%;

		&-row{
			height: 100%;
			flex-wrap: wrap;
			margin: 0 !important;

			@include bp($lg){
				flex-wrap: nowrap;
			}

			@include bp($xl) {
				min-height: unset;
			}
		}

		&-testimonial{
			flex-shrink: unset;
			display: flex;
			padding: 1rem;

			@include bp($lg){
				padding: 0;
			}
		}

		&-media{
			padding-left: 0;
		}

		&-media-image-container{
			width: 100%;
			height: 600px;
			border-radius: 0;
			overflow: hidden;
			position: relative;
			display: flex;
			min-height: 600px;

			@include bp($lg){
				border-radius: 52px;
				height: 100%;
			}

			img, picture{
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}

		&-case-study{
			position: absolute;
			left: 20px;
			bottom: 20px;
			background: var(--white);
			padding: 32px;
			border-radius: 32px;
			width: calc(100% - 104px);
			color: var(--primary);
			text-decoration: none;

			@include bp($sm){
				width: 30%;
				border-radius: 50px;
			}

			@include bp($lg){
				width: 20vw;
			}

			&:hover{
				.ico{
					transform: translateX(6px);
					transition: .6s ease-in-out;
				}
			}
		}

		&-testimonial-container{
			background: $grey-4;
			padding: 1.5rem;
			// height: 100%;
			border-radius: 52px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			@include bp($md){
				padding: 4rem;
			}
		}

		&-testimonial-content{
			@include fluid-type(18, 22);
			*{
				@include fluid-type(18, 22);
				color: var(--primary);

				@include bp($md, true) {
					font-size: 1rem;
				}
			}

			font-style: italic;

			@include bp($md, true) {
				margin-bottom: 2rem;
			}
		}

		&-testimonial-name{
			display: block;
			width: 100%;
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 2px;
			color: var(--primary);
		}

		&-testimonial-job-title{
			color: var(--primary);
		}

		&-navigation{
			margin-top: 2rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 1rem;
			justify-content: flex-start;
			
			@include bp($md, true) {
				margin-top: 0;
				margin-bottom: 2rem;
				align-self: center;
			}

			&-btn{
				width: 44px;
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100px;
				border: solid 1px var(--primary);
				cursor: pointer;
				transition: .3s ease-in-out;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 24px;


				&:hover{
					background: var(--primary);
					transition: .3s ease-in-out;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 24px;

					&.block-testimonial-case-study__item-navigation-btn--prev{
						background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23FFF'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23FFF'/%3E%3C/svg%3E%0A");
						transition: .3s ease-in-out;
					}

					&.block-testimonial-case-study__item-navigation-btn--next{
						background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23FFF'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23FFF'/%3E%3C/svg%3E%0A");
						transition: .3s ease-in-out;
					}
				}

				&--prev{
					background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23383551'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
				}

				&--next{
					background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
				}
			}
		}

		&-case-study-meta{
			display: flex;
			flex-direction: column;

			.label{
				background: var(--primary);
				font-size: 14px;
				text-transform: uppercase;
				padding: 2px 6px;
				border-radius: 4px;
				color: var(--white);
				width: fit-content;
				display: inline-block;
			}

			.value{
				border: solid 1px rgba(56,53,81,0.2);
				padding: 2px 6px;
				border-radius: 4px;
				font-size: 14px;
				width: fit-content;
				display: inline-block;
				color: var(--primary);
			}
		}

		&-case-study-title{
			margin-top: 20px;

			h3{
				@include fluid-type(18, 24);
				font-weight: 600;
				margin-bottom: 20px;
			}
		}

		&-case-study-link {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 4px;
			margin-bottom: 20px;
			font-weight: 600;
			text-decoration: none;
			transition: .3s ease-in-out;
			text-transform: uppercase;

			&:hover{
				.ico{
					transform: translateX(6px);
					transition: .6s ease-in-out;
				}
			}

			.ico{
				width: 16px;
				height: 16px;
				transition: .6s ease-in-out;

				&--arrow-circle{
					background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.8623' cy='11.5103' r='10.5' stroke='%23383551'/%3E%3Cpath d='M15.1621 15.5103L18.3621 11.5103L15.1621 7.51025' stroke='%23383551'/%3E%3Cpath d='M18.3623 11.5103L5.3623 11.5103' stroke='%23383551'/%3E%3C/svg%3E%0A");
				}

			}
		}

		&-case-study-logo-container{
			background: $grey-4;
			padding: 24px;
			border-radius: 32px;
			border: solid 1px rgba(56,53,81,0.2);
			margin: 0 -22px -22px -22px;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: unset;

			@include bp($sm){
				border-radius: 44px;
			}

			@include bp($lg){
				min-height: 104px;
			}

			picture{
				display: flex;
				align-items: center;
				justify-content: center;
			}

			img{
				width: 50%;

				@include bp($lg){
					width: 60%;

				}

			}
		}
	}

	&__content-wrap {
		@include bp($md, true) {
			order: 2;
		}
	}
}

class TestimonialCaseStudy {
	/**
	 * 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-testimonial-case-study');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const carousel = block.querySelector('.block-testimonial-case-study__wrapper');
			if(carousel){
				const swiper = new Swiper(carousel, {
					loop: true,
					spaceBetween: 32,
					navigation: {
						nextEl: '.block-testimonial-case-study__item-navigation-btn--next',
						prevEl: '.block-testimonial-case-study__item-navigation-btn--prev',
					},
					slidesPerView: 1,
					autoHeight: true
				});
			}
		});
	}
}


document.addEventListener('DOMContentLoaded', () => {
	new TestimonialCaseStudy();
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/testimonial-case-study",
    "title": "Testimonial & Case Study",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-testimonial-case-study.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/testimonial-case-study/block-testimonial-case-study.css",
		"swiper"
	],
	"viewScript": ["testimonial-case-study", "swiper"]
}

Page Title

Page Type

Page URL

Amtico Improves Strategic Direction Through Double Materiality Assessment

case-studies

https://www.actionsustainability.com/case-studies/carrying-out-amticos-double-materiality-assessment/

Keepmoat Homes Aligns Sustainable Procurement Processes Through Full ISO20400 Evaluation

case-studies

https://www.actionsustainability.com/case-studies/iso-20400-full-evaluation-for-keepmoat-homes/

Canary Wharf Group Accurately Captures Scope 3 Emissions with Carbon Calculator

case-studies

https://www.actionsustainability.com/case-studies/how-canary-wharf-group-accurately-captures-scope-3-emissions-2/