Global Elements
2
Footer Header Services Strip Services Tabs
Components
36
Card Carousel Cards Grid Content Overlap Content Strip Cta Bar Featured Article Featured Blocks Featured Expert Featured Pods Featured Tabs Form Block Full Screen Carousel Full Width Content Heading Strip Hero Hero Featured Links List Location Tabs Logo Carousel Map Block People Grid Quote Block Reviews Carousel Reviews Tabs Service Tiles Services Strip Services Tabs Staggered Content Sticky Accordion Sticky List Sub Navigation Team Carousel Team Filters Team Strip Tile Carousel Tile Grid

Hero

Complaints Procedure

Field
Field Type
Field Name
Instructions
Block Data
tab
Heading Type
select
heading_type
Heading Text
text
heading_text
Sub Heading
text
sub_heading
Content
wysiwyg
content
Buttons
repeater
buttons_list
-- Button
link
button
Featured Link
link
featured_link
Background
tab
Background Image
image
background_img
Video
url
video
Gradient Overlay
true_false
gradient_overlay
Tint Overlay
true_false
tint_overlay
Block Meta
tab
Block Size
select
block_size
ID
text
block_id
Block Classes
text
block_classes
Block Theme
select
block_theme
Background Colors
select
background_colors
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom

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

.block-hero {
	background-color: $navy;
	color: $white;
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(64);
	min-height: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	flex-direction: column;
	position: relative;

	@include bp($md) {
		min-height: rem-calc(400);
	}

	@include bp($lg) {
		padding-top: rem-calc(64);
	}

	.heading {
		color: $white;
		font-weight: 700;
		@include fluid-type(40, 64);

		.single-post &,
		.single-news & {
			@include fluid-type(32, 56);
		}
	}

	&__details {
		margin-top: rem-calc(30);
	}

	&__background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: $navy;
		background-image: url('#{$asset-path}/images/jagged-lines.svg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.single-team & {
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba($navy, 0.7);
				display: block;

				@include bp($lg) {
					display: none;
				}
			}
		}
	}

	&__container {
		width: 100%;
		margin-bottom: rem-calc(64);
		position: relative;
		z-index: 99;

		@include bp($md) {
			margin-bottom: 0;
		}
	}

	&__video-link {
		color: $darkBlue;
		text-decoration: none;
		font-size: rem-calc(18);
		position: relative;
		display: flex;
		align-items: center;
		transition: all 0.3s ease-out;
		padding-top: rem-calc(24);

		@include bp($md) {
			color: $white;
			padding-top: 0;
		}

		&:hover {
			&:before {
				transform: scale(1.1);
				background-color: $lightBlue;
			}
		}

		&:before {
			content: '';
			width: rem-calc(50);
			height: rem-calc(50);
			background-color: $lightBlue;
			border-radius: 50%;
			margin-right: rem-calc(16);
			background-image: url('#{$asset-path}/icons/icon-play.svg');
			background-size: 16px;
			background-repeat: no-repeat;
			background-position: center;
			transition: all 0.3s ease-out;

			@include bp($md) {
				background-color: $white;
			}
		}
	}

	&__featured-link {
		background-color: $white;
		display: flex;
		padding: rem-calc(24 24 24 15);
		text-decoration: none;
		color: $darkBlue;
		@include fluid-type(18, 20);
		position: relative;
		align-items: center;
		transition: all 0.3s ease-out;

		.single-team & {
			background-color: $navy;
			color: $white;
		}

		&:hover {
			&:before {
				transform: scale(1.1);
			}
		}

		@include bp($md) {
			padding: rem-calc(24);
		}

		&:before {
			content: '';
			width: rem-calc(50);
			height: rem-calc(50);
			display: inline-block;
			border-radius: 50%;
			background-color: $orange;
			margin-right: rem-calc(16);
			background-image: url('#{$asset-path}/icons/icon-full-arrow-right-navy.svg');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 40%;
			transition: all 0.3s ease-out;

			.single-service &,
			.single-sector &, {
				background-image: url('#{$asset-path}/icons/icon-full-arrow-right-navy.svg');
			}
		}

		// &:after {
		// 	content: '';
		// 	position: absolute;
		// 	left: 100%;
		// 	top: 0;
		// 	bottom: 0;
		// 	background-color: $white;
		// 	width: rem-calc(1000);
		// }
	}

	&__header {
		display: flex;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	&__footer {
		display: flex;
		width: 100%;
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		background-color: $white;
		z-index: 99;

		@include bp($md) {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: transparent;
		}
	}

	&__sub-heading {
		@include fluid-type(24, 32);
		margin-bottom: rem-calc(20);

		@include bp($md) {
			margin-bottom: 0;
		}

		.single-service &,
		.single-sector & {
			@include fluid-type(18, 22);
		}

		.orange {
			background-color: $orange;
			margin-bottom: 2.1rem;

			&:hover {
				box-shadow: inset 18em 0 0 0 #3185B2;
				color: #fff;
			}
		}
	}

	&__content {
		@include fluid-type(18, 20);

		p {
			@include fluid-type(18, 20);

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

	&--extra-small {
		min-height: 0;

		@include bp($md) {
			min-height: rem-calc(240);
		}
	}

	&--small {
		min-height: 0;

		@include bp($md) {
			min-height: rem-calc(300);
		}

		.heading {
			@include fluid-type(32, 52);
		}
	}

	&--medium {
		min-height: 0;

		@include bp($md) {
			min-height: rem-calc(400);
		}
	}

	&--large {
		min-height: 0;

		@include bp($md) {
			min-height: rem-calc(480);
		}
	}

	&--with-featured-link {
		padding-bottom: 0;

		@include bp($md) {
			padding-bottom: rem-calc(64);
		}
	}

	&--gradient-overlay {
		picture {
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgb(26,47,60);
				background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 75%);

				.single-service &,
				.single-sector &,
				.single-post &,
				 {
					background: rgb(26,47,60);
					background: linear-gradient(270deg, rgba($navy,0) 0%, rgba($navy,0.9) 75%);
				}

				.single-team & {
					opacity: 0.8;
				}
			}
		}
	}

	&--tint-overlay {
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba($navy, 0.85);
		}
	}
}

.single-team {
	.block-hero__background {
		background-image: none;
		background-color: $navy;

		picture {
			width: 100%;
			padding-right: rem-calc(15);
			padding-left: rem-calc(15);
			margin-right: auto;
			margin-left: auto;
			position: relative;

			@media only screen and (min-width: 576px) {
				max-width: rem-calc(540);
			}

			@media only screen and (min-width: 768px) {
				max-width: rem-calc(720);
			}

			@media only screen and (min-width: 992px) {
				max-width: rem-calc(960);
			}

			@media only screen and (min-width: 1200px) {
				max-width: rem-calc(1200);
			}

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 50%;
				z-index: 9;
				background: rgb(0,44,91);
				background: linear-gradient(90deg, rgba(0,44,91,1) 45%, rgba(0,44,91,0) 100%);
			}

			&:after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				left: auto;
				bottom: 0;
				width: 25%;
				z-index: 9;
				background: rgb(0,44,91);
				background: linear-gradient(270deg, rgba(0,44,91,1) 10%, rgba(0,44,91,0) 100%);
				opacity: 1;
			}
		}
	}
}
// class Example {
// 	/**
// 	 * 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-example');
// 		this.init();
// 	}

// 	/**
// 	 * Example function to run class logic
// 	 * Can access `this.block`
// 	 */
// 	init() {
// 		this.blocks.forEach((block) => {
// 			console.log("🚀 ~ file: Example.js ~ line 20 ~ Example ~ init ~ this.block", block);
// 		});
// 	}
// }

// new Example();

Animation / States

  • If a main CTA has been added (in the bottom right hand corner) - on hover the background colour will change, as well as the icon expanding slowly
  • On page load the heading text will fade in from the left slowly

External Libraries

  • None

Notes (Design / Dev / SEO)

No notes.