Implementation example for "fractaslabs/silverstripe-elemental-stylings" module, file path: templates/Fractas/ElementalBlocks/Elements/

ElementContentImage.ss

<div class="page-section page-section-content-image $HeightVariant $StyleVariant<% if $HorAlignVariant %> $HorAlignVariant<% end_if %><% if $ExtraClass %> $ExtraClass<% end_if %>">
	<div class="outside-container<% if $StyleVariant == "style-light" %> pattern<% end_if %>">
		<div class="container">
			<div class="row">
				<div class="$WidthVariant $HeightVariant <% if $VerAlignVariant == "veralign-middle" || $VerAlignVariant == "veralign-bottom" %>veralign <% end_if %>">
					<div class="content $VerAlignVariant $TextAlignVariant">
						<% if $ShowTitle %>
							<h2 class="content-element__title">
								<% if $CallToActionLink.Page %>
									<a href="{$CallToActionLink.Page.Link}" title="{$CallToActionLink.Description}">
								<% end_if %>
									$Title
								<% if $CallToActionLink.Page %>
									</a>
								<% end_if %>
							</h2>
						<% end_if %>
						<% if Content %>
							<div class="content-element__content">$Content</div>
						<% end_if %>
					</div>
				</div>
				<div class="$WidthVariant">
				<% if $CallToActionLink.Page %>
					<a href="{$CallToActionLink.Page.Link}" title="{$CallToActionLink.Description}">
				<% end_if %>
					<% if $HeightVariant == "height-regular" %>
						<img src="$Image.FocusFill(555,600).URL" alt="{$Image.Title}">
					<% else_if $HeightVariant == "height-large" %>
						<img src="$Image.FocusFill(555,800).URL" alt="{$Image.Title}">
					<% else %>
						<img src="$Image.FocusFill(555,400).URL" alt="{$Image.Title}">
					<% end_if %>
				<% if $CallToActionLink.Page %>
					</a>
				<% end_if %>
				</div>
			</div>
		</div>
	</div>
</div>