CALL TO ACTION (CTA)
Product Highlight Card with CTA
This pattern displays a clean and modern product highlight section designed to showcase a single product with strong visual appeal.
Unique Smart Watch
Stay stylish and punctual with our sleek Digital Watch, featuring an LED display, multiple time zones, a stopwatch, and alarm functions.
Pattern Markup
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:columns {"verticalAlignment":null,"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small","right":"var:preset|spacing|x-small"},"margin":{"top":"0","bottom":"0"}},"border":{"width":"1px","radius":"12px"}}} -->
<div class="wp-block-columns" style="border-width:1px;border-radius:12px;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"id":456,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"8px","topRight":"8px","bottomLeft":"8px","bottomRight":"8px"}},"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<figure class="wp-block-image size-full has-custom-border" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><img src="https://wppatterns.com/wp-content/uploads/2025/12/Unique-Smart-Watch.jpg" alt="" class="wp-image-456" style="border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"0","left":"0"},"blockGap":"var:preset|spacing|x-small"}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-right:0;padding-left:0"><!-- wp:paragraph {"style":{"typography":{"fontSize":"24px","lineHeight":"1.5"},"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:24px;line-height:1.5"><strong>Unique Smart Watch</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5","fontSize":"18px","fontStyle":"normal","fontWeight":"300"},"color":{"text":"#606060"},"elements":{"link":{"color":{"text":"#606060"}}},"spacing":{"margin":{"bottom":"0","top":"var:preset|spacing|x-small"}}}} -->
<p class="has-text-color has-link-color" style="color:#606060;margin-top:var(--wp--preset--spacing--x-small);margin-bottom:0;font-size:18px;font-style:normal;font-weight:300;line-height:1.5">Stay stylish and punctual with our sleek Digital Watch, featuring an LED display, multiple time zones, a stopwatch, and alarm functions.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","orientation":"horizontal","verticalAlignment":"top","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"color":{"background":"#101010"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#101010">$20 from Amazon</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->How to Use This Pattern
1. Copy and paste the pattern into your post or page.
2. Replace the product image with your own by selecting the image block.
3. Edit the heading to reflect your product name.
4. Update the description text to highlight key feature.
5. Customize the CTA button text (e.g., “Buy Now” or “Check Price”) and link it to your product or affiliate URL.
6. Adjust colors, spacing, or border radius from block settings to match your site’s branding.
