Content Grid

View example

SECTOR

Construction

Canary Wharf Group Accurately Captures Scope 3 Emissions with Carbon Calculator

Case Study

Related Case Studies

Action Sustainability are recognised leaders in sustainability delivery and sustainable procurement.

All case studies

SECTOR

BAM Achieves Greater Transparency and Supplier Engagement with Carbon Calculator

SECTOR

Transport

HS2 Advances Carbon Strategy with Action Sustainability’s Expertise

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-content-grid {
	padding: 4rem 1rem;
	height: auto;

	&.use-as-heading {
		background-color: var(--grey-4);
	}

	@include bp($lg){
		height: 84vh;
		padding: 4rem 32px;
		min-height: 700px;
	}

	&__row{
		height: 100%;
	}

	&__left, &__right{
		height: 100%;
	}

	&__left {
		@include bp($lg, true) {
			order: 2;
		}
	}

	&__right{
		display: flex;
		flex-direction: column;
		gap: 1.5rem;

		@include bp($lg, true) {
			order: 1;
		}
	}

	&[data-rounded-corners="1"]{
		border-radius: 32px;

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

	&__heading{
		*{
			@include fluid-type(24, 32);
			font-weight: 600;
			margin: 0;
			color: var(--primary);
			margin-bottom: 12px;
		}

		h1 {
			font-size: clamp(28px, 3vw, 64px);
			font-weight: 400;
		}
	}

	&__item{
		height: 100%;

		&-media-image-container{
			width: 100%;
			overflow: hidden;
			position: relative;
			display: flex;
			min-height: unset;

			height: 72vh;
			border-radius: 32px;
			margin-bottom: 1.5rem;

			@include bp($lg){
				border-radius: 52px;
				height: 100%;
				margin-bottom: 0;
				min-height: unset;
			}

			.image-wrapper {
				img, picture {
					transition: .3s ease-in-out;
				}
			}

			&:hover{
				> picture img{
					transition: .3s ease-in-out;
					transform: scale(1.05);
				}
			}
		}

		&-case-study{
			position: absolute;
			left: 20px;
			bottom: 20px;
			background: var(--white);
			padding: 32px;
			border-radius: 32px;
			width: calc(100% - 40px);

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

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

			@include bp(1040px){
				width: 22vw;
			}
		}

		&-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;
				color: var(--primary);
			}
		}

		&-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;
			color: var(--primary);

			&: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;

			.logo {
				max-width: rem-calc(200);

				@include bp($lg) {
					max-width: rem-calc(300);
				}
			}

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

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

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

			img {
				width: 100%;
				height: auto;
				max-height: 9rem;
			}
		}
	}

	&__content-block{
		height: 60%;
		background: var(--white);
		border-radius: 32px;
		padding: 32px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

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

		@include bp($xl){
			padding: 52px;
		}

	}

	&__description{
		*{
			color: var(--primary) !important;
			@include fluid-type(18, 22);
		}
	}

	&__content-row{
		height: 40%;
		row-gap: 1.5rem;

		&>.col-12{
			height: 100%;
		}
	}

	&__content-item-small{
		border-radius: 32px;
		overflow: hidden;
		background: var(--secondary);
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		text-decoration: none;
		padding: 2rem;

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

		&-heading {
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;

			@include bp($sm, true) {
				max-width: 90%;
			}
		}

		&.post-type-publication,
		&.post-type-event {
			background: var(--white);
		}

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

		&:hover{
			.ico--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='%23FFF'/%3E%3Cpath d='M18.3623 11.5103L5.3623 11.5103' stroke='%23FFF'/%3E%3C/svg%3E%0A");
				transition: .6s ease-in-out;
			}

			.block-content-grid__content-item-small-btn{
				background: var(--primary);
				border-radius: 100px;

			}

			img{
				transition: .3s ease-in-out;
				transform: scale(1.05);
			}
		}

		&[data-index="2"]{
			justify-content: flex-end;
			@include bp($lg, true) {
				margin-bottom: 1.5rem;
			}

			.block-content-grid__content-item-small-heading{
				color: var(--white);
				width: 90%;
				/* clamp to 3 lines of text */
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				max-width: calc(100% - 2rem);
			}

			.ico--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='%23FFF'/%3E%3Cpath d='M15.1621 15.5103L18.3621 11.5103L15.1621 7.51025' stroke='%23FFF'/%3E%3Cpath d='M18.3623 11.5103L5.3623 11.5103' stroke='%23FFF'/%3E%3C/svg%3E%0A");
			}

			&:hover{
				.block-content-grid__content-item-small-btn{
					background-color: var(--white);
				}

				.ico--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='%23FFF'/%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");
					transition: .6s ease-in-out;
				}
			}
		}

		&-heading{
			@include fluid-type(16, 22);
			color: var(--primary);
			margin-top: 8px;
			margin-bottom: 0;
			font-weight: 600;
		}

		&-btn{
			display: flex;

			font-weight: 600;
			text-decoration: none;
			transition: .3s ease-in-out;

			position: absolute;
			bottom: 24px;
			right: 24px;

			.ico{
				width: 32px;
				height: 32px;
				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");
				}

			}
		}

		&-image-container{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			z-index: 0;
			overflow: hidden;

			&::before{
				content: '';
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				background: linear-gradient(0, var(--primary), transparent);
				z-index: 1;
			}

			img, picture{
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: .3s ease-in-out;
				z-index: 0;
			}
		}

		&-details{
			z-index: 1;

		}
	}

	&:not(.has-background) {
		.block-content-grid__content-block {
			background: var(--grey-4);
		}
	}

}

There are is no JavaScript file with this component.

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/content-grid",
    "title": "Content Grid",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-content-grid.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/content-grid/block-content-grid.css"
}

Page Title

Page Type

Page URL

Willmott Dixon Engages Supply Chain with the Carbon Calculator

case-studies

https://www.actionsustainability.com/case-studies/engaging-willmott-dixons-supply-chains-with-the-carbon-calculator/

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/

Amtico Improves Strategic Direction Through Double Materiality Assessment

case-studies

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