Components
53
Accordion Items Animated Gallery Basic Hero Basic Map Case Studies Feed Case Studies Hero Case Study Hero Case Study Slider Column Content Content Grid Content Image Content Slider Cta Cta Blocks Embed Block Enriched Accordion Error Event Feed Example Features Slider Full Width Image Hero Full Width Media Image And Form Image Content Image Split Content Image Stats Logo Slider Map Post Feed Pricing Publications Feed Simple Accordion Simple Header Simple Hero Solutions Animated Block Split Content Split Content Carousel Split Content Content Split Content Post Split Content Pricing Split Content Video Split Image Hero Stats Slider Team Carousel Team Hero Team Listing Testimonial Case Study Timeline Trivia Bar Two Column Rich Text Vacancies Table Video Video Expand

Split Content

View example

What’s trending in Sustainability

Discover the latest in sustainability with our exclusive insights and reports. Our resources include the Navigating Social Value Guide, helping organisations understand and maximise their social impact, the Supplier Diversity Benchmarking Report, which highlights trends and best practices for improving inclusivity in supply chains, and the State of Sustainable Procurement Report, offering an in-depth analysis of sustainable procurement practices and innovations.

Whether you’re looking to enhance your sustainability strategy or drive meaningful change, our content provides valuable knowledge to support your journey towards a more socially responsible and sustainable future.

Whitepapers
Mgmt-Lead-Office-People-Shutterstock (5) – Copy
September 2023
Energy & Carbon
Practical Procurement Guidance Launched to Combat Modern Slavery in Solar PV Supply Chains
Action Sustainability has today released new guidance, highlighting how to address modern slavery and labour exploitation risks in the solar photovoltaic supply chain. With the effects of climate change becoming apparent in all corners of the world, the transition to a low-carbon economy is more urgent than ever. Solar photovoltaic (PV) technology is vital in […]
Action Sustainability Staff Action Sustainability Staff
Field
Field Type
Field Name
Instructions
Settings
tab
Mode
select
mode
Negative Top Margin
true_false
negative_top_margin
Content
tab
Heading Type
select
heading_type
Heading Text
textarea
heading_text
Content
wysiwyg
content
Swap Sides
true_false
swap_sides
Button Type
select
button_button_type
Button Color
select
button_button_color
Button Link
link
button_button_link
Image
tab
Background Image
image
background_image 

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

.block-split-content {
    padding-top: clamp(40px, 8vw, 140px);
	padding-bottom: clamp(40px, 8vw, 140px);
    color: var(--primary);

    &.has-background {
        border-radius: 30px;

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

    &.negative-top-margin {
        padding-top: 0;
        margin-top: -8rem;

        @include bp($lg) {
            margin-top: -7rem;
        }
    }

    .container {
        max-width: 98vw
    }

    &--swap {
        .row {
            flex-direction: row-reverse;
        }
    }

    .row {
        gap: 1rem;
        @include bp($lg) {
            flex-wrap: nowrap;

            .col-lg-6 {
                width: calc(50% - 0.5rem);
            }
        }
    }

    .heading {
        font-family: 'Montserrat';
        font-size: clamp(24px, 3vw, 44px);
        font-weight: 600;
    }

    .split-content {
        border-radius: 50px;
        background: var(--grey-primary);
        --text-color: var(--primary);
        position: relative;

        padding: 2rem;

        @include bp($md, true) {
            border-radius: 30px;
        }

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

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

        display: flex;
        flex-direction: column;
        gap: 26px;

        .content {
            h1,h2,h3{
                margin-bottom: 1rem;
            }
            p {
                @include fluid-type(16, 18);

                &:last-of-type {
                    margin: 0;
                }
            }
        }

        .btn {
            @include fluid-type(16, 18);
            margin-top: 1rem;
            text-decoration-color: var(--contrast);

            @include bp($md) {
                margin-top: 2rem;
            }
        }
    }

    &__image {
        border-radius: 50px;

        @include bp($md, true) {
            border-radius: 30px;
            min-height: 250px;
        }
        
        img {
            border-radius: 50px;

            @include bp($md, true) {
                border-radius: 30px;
            }
        }
    }

    .button-wrapper {
        margin-top: auto;
    }

    .split-inner {
        background-color: var(--grey-primary);
        --text-color: var(--primary);
        border-radius: 50px;
        position: relative;
        overflow: hidden;
        padding: 0;
        /* min-height: rem-calc(400); */

        @include bp($md, true) {
            border-radius: 30px;
        }

        @include bp($lg) {
            aspect-ratio: unset;
            /* min-height: rem-calc(495); */
        }

        @include bp($xl) {
            aspect-ratio: unset;
            /* min-height: rem-calc(650); */
        }
    }

    .acf-innerblocks-container {

        .block-image {
            @include bp($md){
                width: calc(calc(11/12) * 100%);
            }
        }
    }

    .swap-sides {
        @include bp($lg) {
            .row {
                flex-direction: row-reverse;
            }
        }
    }

}

.editor-styles-wrapper {
    .row {
        @include bp($lg) {
            flex-wrap: nowrap !important;
        }
    }
    .acf-innerblocks-container {
        & > div:first-child {
            height: 100%;
            overflow-y: scroll;
        }
        .acf-block-fields {
            padding-left: 0 !important;
            overflow-y: scroll;

            .wp-editor-area {
                color: var(--primary) !important;
            }
        }
    }
    .acf-link a {
        pointer-events: all !important;
    }
}

class SplitContent {

	constructor() {
		this.blocks = document.querySelectorAll('.block-split-content');
		this.init();
	}

	init() {
		this.blocks.forEach((block) => {
			this.initSingle(block);
		});
	}

	initSingle(block){

	}
}

new SplitContent();

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/split-content",
    "title": "Split Content",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-split-content.php"
    },
    "allowedBlocks": ["strategiq/split-content-post","strategiq/split-content-content","strategiq/split-content-video","strategiq/split-content-carousel"],
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Split Content",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": "file:../../assets/css/split-content/block-split-content.css"
}
There are is no readme file with this component.