Components
51
Accordion Items Article Selection Author Info Basic Carousel Basic Hero Basic Map Blog Pull Out Contact Content Accordion Content Carousel Content Image Cta Cta Bar Cta Blocks Cta Collage Event Content Events Grid Example Find Firm Firm Search Firms By Town Gated Content Download Guides Carousel Hero History Homepage Hero Image Content Cta Image List Content Industries Job Content Job Listings Local Firm Carousel Our Firms Pages Carousel Partners Partners Slider People Listing Post Carousel Post Feed Pullquote Section Wrap Service List Split Content Stats Tax Guides Team Grid Title Logos Two Column Video Video Carousel Video Old

Hero

View example

Monitoring, Evaluation, and Learning Integration

Afghanistan poses distinctive auditing challenges — from documentation gaps to limited access and infrastructure.
Moore Afghanistan’s methodologies have evolved to accommodate these factors without compromising assurance quality.

There are no ACF fields assigned to this component.

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

.block-hero {

	@include bp($lg) {
		margin-left: $container-spacing-desktop;
	}

	.position-relative {
		&:has(.hero__svg) {
			overflow: hidden;
		}
	}

	.hero__svg {
		z-index: 1;
		transform: translateX(100%);
		opacity: 0;
		animation: heroSvgFadeIn 1s ease-out forwards;
		animation-delay: 0.3s;
	}

	.hero__svg-left {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		transform: translateX(100%);
		opacity: 0;
		animation: heroSvgFadeInReverse 2s cubic-bezier(0.25, 0.1, 0.05, 1) forwards;
		animation-delay: 0.3s;
	}

	.hero__svg-right {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		transform: translateX(-100%);
		opacity: 0;
		animation: heroSvgFadeIn 2s cubic-bezier(0.25, 0.1, 0.05, 1) forwards;
		animation-delay: 1s;
	}

	@keyframes heroSvgFadeIn {
		0% {
			opacity: 0;
			transform: translateX(100%);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes heroSvgFadeInReverse {
		0% {
			opacity: 0;
			transform: translateX(-100%);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	&--large {
		margin-left: 0;

		.hero {
			background: transparent;
		}

		&.has-secondary-background-color {
			.hero__content-wrapper {
				background-color: $secondary;
			}
		}

		&.has-primary-background-color {
			.hero__content-wrapper {
				background-color: $primary;
			}
		}

		&.has-prussian-blue-background-color {
			background-color: transparent !important;
			.hero__content-wrapper  {
				background: $prussian-blue;
			}
		}

		&.has-primary-gradient-gradient-background {
			background: transparent !important;
			.hero__content-wrapper  {
				background: var(--primary-gradient);
			}
		}

		&.has-secondary-gradient-gradient-background {
			background: transparent !important;
			.hero__content-wrapper  {
				background: var(--secondary-gradient);
			}
		}

		&.has-tertiary-gradient-gradient-background {
			background: transparent !important;
			.hero__content-wrapper {
				background: var(--tertiary-gradient);
			}
		}


	}

	&--heading-above-image {
		@include bp($lg) {
			border-left: 1px solid $border-grey;
			margin-right: $container-spacing-desktop;
		}

		.hero {
			min-height: 410px;

			@include bp($md) {
				min-height: 570px;
			}

			&--call-to-action {
				justify-content: flex-end;

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

	&.has-secondary-background-color {
		background-color: transparent !important;

		.hero {
			background: $secondary;
		}
	}

	&.has-white-background-color {
		.hero {
			background: $white;
		}
		.hero__title, .hero__content p {
			color: $black;
		}
	}

	&.has-light-blue-background-color {
		.hero {
			background: $light-blue;
		}
		.hero__title, .hero__content p {
			color: $black;
		}
	}

	&.has-primary-background-color {
		.hero {
			background: $primary;
		}
	}

	&.has-prussian-blue-background-color {
		background-color: transparent !important;
		.hero {
			background: $prussian-blue;
		}
	}

	&.has-primary-gradient-gradient-background {
		background: transparent !important;
		.hero {
			background: var(--primary-gradient);
		}
	}

	&.has-secondary-gradient-gradient-background {
		background: transparent !important;
		.hero {
			background: var(--secondary-gradient);
		}
	}

	&.has-tertiary-gradient-gradient-background {
		background: transparent !important;
		.hero {
			background: var(--tertiary-gradient);
		}
	}
}
There are is no JavaScript file with this component.
{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/hero",
    "title": "Hero",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-hero.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 - Hero",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/hero/block-hero.css"],
    "viewScript": ["hero"]
}
Page Title
Page Type
Page URL
Monitoring, Evaluation, and Learning Integration
service
Market-Mapping and Value-Chain Research
service
Institutional and Governance Assessments
service
Enterprise, Market, and Sector Surveys
service
Baseline, Midline, and Endline Surveys
service
Partner, Grantee, and Subcontractor Management
service
There are is no readme file with this component.