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.

Back to Library
Aug 28, 2025 CREATED
Aug 28, 2025 UPDATED
0 TIMES USED

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.

Tags

contact section CTA