CALL TO ACTION (CTA)
Contact CTA Banner
A sleek call-to-action banner with an image, text, and a bold contact button. Perfect for encouraging visitors to get in touch, book a call, or ask questions.

Have questions?
We have answers. Let’s talk.
Pattern Markup
<!-- wp:group {"align":"full","className":"nfd-container nfd-my-0 nfd-px-lg nfd-py-md","style":{"spacing":{"blockGap":"64px"}},"backgroundColor":"white","textColor":"black","layout":{"type":"constrained","contentSize":"760px"}} -->
<div class="wp-block-group alignfull nfd-container nfd-my-0 nfd-px-lg nfd-py-md has-black-color has-white-background-color has-text-color has-background"><!-- wp:group {"className":"nfd-bg-gray-100 nfd-text-md","style":{"spacing":{"blockGap":"24px","padding":{"left":"30px","right":"30px","top":"20px","bottom":"20px"}},"border":{"radius":"100px","width":"3px"},"color":{"background":"#eeeeee"}},"textColor":"black","borderColor":"base","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group nfd-bg-gray-100 nfd-text-md has-border-color has-base-border-color has-black-color has-text-color has-background" style="border-width:3px;border-radius:100px;background-color:#eeeeee;padding-top:20px;padding-right:30px;padding-bottom:20px;padding-left:30px"><!-- wp:group {"style":{"spacing":{"blockGap":"24px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:image {"id":110,"width":"50px","height":"undefinedpx","scale":"cover","sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-full is-resized is-style-rounded"><img src="https://wppatterns.com/wp-content/uploads/2024/01/Istiak-Rayhan.jpeg" alt="" class="wp-image-110" style="object-fit:cover;width:50px;height:undefinedpx"/></figure>
<!-- /wp:image -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"layout":{"selfStretch":"fit","flexSize":null}}} -->
<p style="font-style:normal;font-weight:600">Have questions?</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"nfd-text-opacity-80 nfd-text-base"} -->
<p class="nfd-text-opacity-80 nfd-text-base">We have answers. Let's talk.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:buttons {"className":"nfd-text-inherit","layout":{"type":"flex"}} -->
<div class="wp-block-buttons nfd-text-inherit"><!-- wp:button {"style":{"spacing":{"padding":{"left":"30px","right":"30px","top":"12px","bottom":"12px"}},"border":{"radius":"100px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:100px;padding-top:12px;padding-right:30px;padding-bottom:12px;padding-left:30px">Contact Us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
How to Use This Pattern
Copy this pattern and paste it directly into your WordPress Block Editor. Then replace the image, text, and button link with your own details.