<?php
/**
 * Title: Two Columns — Image + Supporting Cards
 * Slug: absolute-2026/two-columns-image-supporting
 * Description: A responsive section with sticky desktop text, a primary image, and two supporting cards.
 * Categories: absolute-2026/sections, absolute-2026/media
 * Keywords: image
 * Viewport Width: 1280
 */
?>

<!-- wp:group {"tagName":"section","align":"wide","className":"is-style-section-divider two-columns-image-supporting","layout":{"type":"default"}} -->
<section class="wp-block-group alignwide is-style-section-divider two-columns-image-supporting">
	<!-- wp:group {"className":"two-columns-image-supporting__content","style":{"spacing":{"blockGap":"var:preset|spacing|100"}},"layout":{"type":"default"}} -->
	<div class="wp-block-group two-columns-image-supporting__content">
		<!-- wp:group {"className":"two-columns-image-supporting__intro","style":{"spacing":{"blockGap":"var:preset|spacing|100"}},"layout":{"type":"default"}} -->
		<div class="wp-block-group two-columns-image-supporting__intro">
			<!-- wp:paragraph {"className":"is-style-eyebrow"} -->
			<p class="is-style-eyebrow"><?php echo esc_html_x('Section eyebrow', 'Sample eyebrow for the Two Columns — Image + Supporting Cards pattern', 'absolute-2026'); ?></p>
			<!-- /wp:paragraph -->

			<!-- wp:heading {"style":{"border":{"bottom":{"color":"var:preset|color|border","style":"solid","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|100"}}}} -->
			<h2 class="wp-block-heading" style="border-bottom-color:var(--wp--preset--color--border);border-bottom-style:solid;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--100)"><?php echo esc_html_x('Two-columns plus Supporting Cards', 'Sample heading for the Two Columns — Image + Supporting Cards pattern', 'absolute-2026'); ?></h2>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"className":"is-style-lead"} -->
			<p class="is-style-lead"><?php echo esc_html_x('A concise lead introduces the section and its supporting material.', 'Sample lead for the Two Columns — Image + Supporting Cards pattern', 'absolute-2026'); ?></p>
			<!-- /wp:paragraph -->
		</div>
		<!-- /wp:group -->

		<!-- wp:group {"className":"two-columns-image-supporting__lower","style":{"spacing":{"blockGap":"var:preset|spacing|200"}},"layout":{"type":"default"}} -->
		<div class="wp-block-group two-columns-image-supporting__lower">
			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|100"}},"layout":{"type":"default"}} -->
			<div class="wp-block-group">
				<!-- wp:paragraph -->
				<p><?php echo esc_html_x('Use this area to develop the section’s main idea and provide context for the accompanying material.', 'First sample paragraph for the Two Columns — Image + Supporting Cards pattern', 'absolute-2026'); ?></p>
				<!-- /wp:paragraph -->

				<!-- wp:paragraph -->
				<p><?php echo esc_html_x('Additional copy can explain the work, service, or subject in enough detail to support the next action.', 'Second sample paragraph for the Two Columns — Image + Supporting Cards pattern', 'absolute-2026'); ?></p>
				<!-- /wp:paragraph -->
			</div>
			<!-- /wp:group -->

			<!-- wp:buttons -->
			<div class="wp-block-buttons">
				<!-- wp:button {"className":"is-style-outline"} -->
				<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#"><?php echo esc_html_x('Learn more →', 'Sample button label for the Two Columns — Image + Supporting Cards pattern', 'absolute-2026'); ?></a></div>
				<!-- /wp:button -->
			</div>
			<!-- /wp:buttons -->
		</div>
		<!-- /wp:group -->
	</div>
	<!-- /wp:group -->

	<!-- wp:group {"className":"two-columns-image-supporting__media","style":{"spacing":{"blockGap":"var:preset|spacing|150"}},"layout":{"type":"default"}} -->
	<div class="wp-block-group two-columns-image-supporting__media">
		<!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"is-style-framed two-columns-image-supporting__primary-media"} -->
		<figure class="wp-block-image size-large is-style-framed two-columns-image-supporting__primary-media"><img alt="" style="aspect-ratio:4/3;object-fit:cover" /></figure>
		<!-- /wp:image -->

		<!-- wp:group {"className":"two-columns-image-supporting__cards","style":{"spacing":{"blockGap":"var:preset|spacing|150"}},"layout":{"type":"default"}} -->
		<div class="wp-block-group two-columns-image-supporting__cards">
			<!-- wp:group {"className":"is-style-supporting-card","layout":{"type":"default"}} -->
			<div class="wp-block-group is-style-supporting-card">
				<!-- wp:group {"backgroundColor":"surface-soft","style":{"spacing":{"blockGap":"var:preset|spacing|100","padding":{"top":"var:preset|spacing|150","right":"var:preset|spacing|150","bottom":"var:preset|spacing|150","left":"var:preset|spacing|150"}}},"layout":{"type":"default"}} -->
				<div class="wp-block-group has-surface-soft-background-color has-background" style="padding-top:var(--wp--preset--spacing--150);padding-right:var(--wp--preset--spacing--150);padding-bottom:var(--wp--preset--spacing--150);padding-left:var(--wp--preset--spacing--150)">
					<!-- wp:heading {"level":3,"style":{"border":{"bottom":{"color":"var:preset|color|border","style":"solid","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|100"}}}} -->
					<h3 class="wp-block-heading" style="border-bottom-color:var(--wp--preset--color--border);border-bottom-style:solid;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--100)"><?php echo esc_html_x('Supporting heading', 'First supporting card heading', 'absolute-2026'); ?></h3>
					<!-- /wp:heading -->

					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|075"}},"layout":{"type":"constrained"}} -->
					<div class="wp-block-group"><!-- wp:paragraph {"className":"is-style-lead","fontSize":"abs-large"} -->
						<p class="is-style-lead has-abs-large-font-size"><?php echo esc_html_x('Supporting lead copy.', 'First supporting card lead', 'absolute-2026'); ?></p>
						<!-- /wp:paragraph -->

						<!-- wp:paragraph {"fontSize":"abs-ui"} -->
						<p class="has-abs-ui-font-size"><?php echo esc_html_x('Add concise supporting copy that expands on this item and gives readers enough context to take the next step. This pattern benefits from longer blocks of copy.', 'First supporting card copy block one', 'absolute-2026'); ?></p>
						<!-- /wp:paragraph -->

						<!-- wp:paragraph {"fontSize":"abs-ui"} -->
						<p class="has-abs-ui-font-size"><?php echo esc_html_x('This pattern benefits from longer blocks of copy. Quae enim cupiditates a natura proficiscuntur, facile explentur sine ulla iniuria: quae autem inanes sunt, iis parendum non est.', 'First supporting card copy block two', 'absolute-2026'); ?></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:group -->

					<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|150"}}}} -->
					<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--150)"><!-- wp:button {"className":"is-style-outline"} -->
						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#"><?php echo esc_html_x('Learn more →', 'First supporting card button label', 'absolute-2026'); ?></a></div>
						<!-- /wp:button -->
					</div>
					<!-- /wp:buttons -->
				</div>
				<!-- /wp:group -->

				<!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"margin-top-zero supporting-card-media"} -->
				<figure class="wp-block-image size-large margin-top-zero supporting-card-media"><img alt="" style="aspect-ratio:4/3;object-fit:cover" /></figure>
				<!-- /wp:image -->
			</div>
			<!-- /wp:group -->

			<!-- wp:group {"className":"is-style-supporting-card","layout":{"type":"default"}} -->
			<div class="wp-block-group is-style-supporting-card">
				<!-- wp:group {"backgroundColor":"surface-soft","style":{"spacing":{"blockGap":"var:preset|spacing|100","padding":{"top":"var:preset|spacing|150","right":"var:preset|spacing|150","bottom":"var:preset|spacing|150","left":"var:preset|spacing|150"}}},"layout":{"type":"default"}} -->
				<div class="wp-block-group has-surface-soft-background-color has-background" style="padding-top:var(--wp--preset--spacing--150);padding-right:var(--wp--preset--spacing--150);padding-bottom:var(--wp--preset--spacing--150);padding-left:var(--wp--preset--spacing--150)">
					<!-- wp:heading {"level":3,"style":{"border":{"bottom":{"color":"var:preset|color|border","style":"solid","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|100"}}}} -->
					<h3 class="wp-block-heading" style="border-bottom-color:var(--wp--preset--color--border);border-bottom-style:solid;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--100)"><?php echo esc_html_x('Supporting heading', 'Second supporting card heading', 'absolute-2026'); ?></h3>
					<!-- /wp:heading -->

					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|075"}},"layout":{"type":"constrained"}} -->
					<div class="wp-block-group"><!-- wp:paragraph {"className":"is-style-lead","fontSize":"abs-large"} -->
						<p class="is-style-lead has-abs-large-font-size"><?php echo esc_html_x('Supporting lead copy.', 'Second supporting card lead', 'absolute-2026'); ?></p>
						<!-- /wp:paragraph -->

						<!-- wp:paragraph {"fontSize":"abs-ui"} -->
						<p class="has-abs-ui-font-size"><?php echo esc_html_x('Add concise supporting copy that expands on this item and gives readers enough context to take the next step. This pattern benefits from longer blocks of copy.', 'Second supporting card copy block one', 'absolute-2026'); ?></p>
						<!-- /wp:paragraph -->

						<!-- wp:paragraph {"fontSize":"abs-ui"} -->
						<p class="has-abs-ui-font-size"><?php echo esc_html_x('This pattern benefits from longer blocks of copy. Quae enim cupiditates a natura proficiscuntur, facile explentur sine ulla iniuria: quae autem inanes sunt, iis parendum non est.', 'Second supporting card copy block two', 'absolute-2026'); ?></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:group -->

					<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|150"}}}} -->
					<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--150)"><!-- wp:button {"className":"is-style-outline"} -->
						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#"><?php echo esc_html_x('Learn more →', 'First supporting card button label', 'absolute-2026'); ?></a></div>
						<!-- /wp:button -->
					</div>
					<!-- /wp:buttons -->
				</div>
				<!-- /wp:group -->

				<!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"margin-top-zero supporting-card-media"} -->
				<figure class="wp-block-image size-large margin-top-zero supporting-card-media"><img alt="" style="aspect-ratio:4/3;object-fit:cover" /></figure>
				<!-- /wp:image -->
			</div>
			<!-- /wp:group -->
		</div>
		<!-- /wp:group -->
	</div>
	<!-- /wp:group -->
</section>
<!-- /wp:group -->
