Featured Image Content

man and young girl examining hey girls education cards

we start conversations, never limit them…

Our collaborative way of working and development of our products means we never leave anyone out of the conversation.
We question existing messaging and ways things are done to improve outcomes for people facing period poverty or period inequality.

Shop now

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Image

image

Title

text

title

Content

wysiwyg

content

Buttons

repeater

buttons

-- Button

link

button

-- Show Download Icon

true_false

download

Apply Black and White Filter

true_false

If checked, a CSS grayscale filter will be applied to the image.

Image Treatment Style

radio

image_treatment_style

Remove background

true_false

remove_background

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.featured-image-content {
	background: var(--lighter-colour);

	&.no-bg {
		background: none;
	}
	.image-content {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	.image-side {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rem 3rem;

		@include media-breakpoint-down(lg) {
			padding: 5rem 3rem;
		}
		@include media-breakpoint-down(md) {
			padding: 3rem 2rem;

			&.has-map {
				min-height: 34rem;
			}
		}
		@include media-breakpoint-down(xs) {
			padding: 2rem 15px;
		}
		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--theme-colour);
			transform: translateX(-100%);
			transition: transform 0.7s cubic-bezier(0.62, 0.38, 0.17, 0.85);
			transition-delay: 0.8s;
			z-index: 1;
		}
		.image {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.main-img {
			display: flex;
			justify-content: center;
			align-items: center;
			max-width: 80%;
			max-height: 80%;
		}
		img {
			display: block;
			margin: 0 auto;
		}
		.lines {
			position: absolute;
			right: 1.25rem;
			top: calc(100% - 3.5rem);
		}
	}
	&.switch {
		.content {
			position: relative;
			z-index: 2;
		}
		.image-side {
			&:after {
				transform: translateX(-200%);
			}
		}
		&.aos-animate {
			.image-side {
				&:after {
					transform: translateX(-100%);
				}
			}
		}
	}
	.image,
	.map {
		position: relative;
		z-index: 2;
	}
	.content-side {
		padding: 10rem 3rem;
		display: flex;
		justify-content: center;
		align-items: center;

		@include media-breakpoint-down(lg) {
			padding: 5rem 3rem;
		}
		@include media-breakpoint-down(sm) {
			display: block;
			padding: 5rem;
		}
		@include media-breakpoint-down(xs) {
			padding: 3rem 15px;
		}
		.content {
			max-width: 34rem;

			@include media-breakpoint-down(sm) {
				max-width: none;
			}
		}
		.buttons {
			margin-top: 3rem;

			@include media-breakpoint-down(xs) {
				margin-top: 2rem;
			}
		}
	}
	&.aos-animate {
		.image-side {
			&:after {
				transform: translateX(0);
			}
		}
	}
}

.community-partners-map {
	.image-side:after {
		display: none;
	}	
}

There are is no JavaScript file with this component.