<?php
/**
 * Title: Supporting Card
 * Slug: absolute-2026/supporting-card
 * Description: A heading, lead, supporting copy, button, and image inside a bordered card.
 * Categories: absolute-2026/components
 * Keywords: image
 * Viewport Width: 768
 */
?>

<!-- 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', 'Sample heading for the Supporting Card pattern', 'absolute-2026' ); ?></h3>
		<!-- /wp:heading -->

		<!-- wp:paragraph {"className":"is-style-lead"} -->
		<p class="is-style-lead"><?php echo esc_html_x( 'Supporting lead copy.', 'Sample lead for the Supporting Card pattern', 'absolute-2026' ); ?></p>
		<!-- /wp:paragraph -->

		<!-- wp:paragraph -->
		<p><?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 bebefits for longer blocks of copy', 'Sample supporting copy for the Supporting Card pattern', 'absolute-2026' ); ?></p>
		<!-- /wp:paragraph -->

		<!-- 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 Supporting Card pattern', '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 -->
