Components
54
Accordion Items Basic Hero Basic Map Benefits Card Grid Career Testimonials Case Study Carousel Case Study Content Two Column Contact Form Content Centred Content Image Content Three Columns Content Two Column Content Video Cookie Table Cta Blocks Example Faqs Featured Card Featured Latest Cards Footer Banner Glossary Items Hero Insights Hero Rounded Hero With Featured Insight Home Hero Icon Carousel Image Link Carousel Image Link Carousel 2×2 Image Link Grid Insight Content Job Listing Large Image Large Testimonial Leadership Grid Link Grid Locations Locations Archive Logo Scroller Page Heading People Carousel Related Services Resources Carousel Section Anchors Separator Service Hero Services List Services Tabs Tech Partners Testimonial Carousel Testimonial Single Use Case Component Values Scroller Video

Content Image

Effective and consistent data protection compliance means embedding a process, not just appointing a person. Simply recruiting a Data Protection Officer is not enough, and can be problematic.

Discover how to navigate and sidestep these challenges by outsourcing your DPO.
✅ Faster to appoint
✅ Flexible resourcing
✅ More skills for less cost
✅ Ability to offer superior solutions

Field
Field Type
Field Name
Instructions
Block Data
tab
Column Order
radio
column_order
Pre Heading
text
pre_heading
Heading Type
select
heading_type
Heading Text
textarea
heading_text
Content
wysiwyg
content
Buttons
repeater
buttons
-- Button Type
select
button_button_type
-- Button Color
select
button_button_color
-- Button Link
link
button_button_link
Image
image
img
Block Meta
tab
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/variables";
@import "../../resources/scss/util/mixins";

.block-content-image {
	&__buttons {
		margin-top: rem-calc(32);
	}

	&__pre-heading {
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: rem-calc(12);
		margin-bottom: rem-calc(10);
	}

	&__heading {
		margin-bottom: rem-calc(24);
	}

	&__copy {
		font-size: rem-calc(16);
		line-height: rem-calc(24);
	}

	&__image {
		margin-top: rem-calc(40);

		@include bp($lg) {
			margin-top: 0;
		}
	}
	&-inner {
		justify-content: space-between;

		&.reverse {
			flex-direction: row-reverse;
		}
	}
}
class ContentImage {
	/**
	 * 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 ContentImage();
There are is no readme file with this component.