Buttons Image Callout

Ordering is simple, contact us for a pricelist and product catalogue to get started.
From there, we just need an order form and PO to process and payment can be made by BAC’s or by credit card upon receipt of invoice.

We can send loose products in bulk and we have a selection of ‘business bundles’ that are great as a sample kit.
We have a variety of dispensing solutions so you can show off your sustainable products in style. Choose from 4 designs ranging from free standing mini troughs to wall mounted dispensers.

Please note, lead times vary depending on order size and product availability but we will keep you updated every step of the way and can advise how far in advance to reorder with us to ensure you don’t run out of products.

learn how businesses work with Hey Girls

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Title

text

title

Content

wysiwyg

content

Buttons

repeater

buttons

-- Button

link

button

-- Button Style

select

button_style

Image

image

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

Theme

select

theme

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

.buttons-image-callout {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.buttons-image-callout-inner {
	background: var(--theme-colour);
	display: flex;

	@include media-breakpoint-down(sm) {
		flex-direction: column;
	}
	.content {
		width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 4.5rem;

		@include media-breakpoint-down(sm) {
			width: 100%;
			text-align: center;
			padding: 3rem 2rem;

			.buttons {
				justify-content: center;

				.button {
					margin: 0 0.65625rem 1.5rem 0.65625rem;
				}
			}
		}
	}
	h2 {
		margin-bottom: 3rem;
	}
	.buttons {
		margin-top: 2rem;
	}
	.image {
		width: 45%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5rem;

		@include media-breakpoint-down(md) {
			padding: 2rem;
		}
		@include media-breakpoint-down(sm) {
			width: 100%;
			padding: 0 2rem 3rem 2rem;
		}
		img {
			width: 100%;
		}
	}
}

There are is no JavaScript file with this component.