Call to Action with Image on the right

[alaczek]

This pattern comes from the Marl theme. It's quite similar to this pattern, so I'm wondering if this isn't too similar. cc @onuro @iamtakashi

Screenshot:

<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaId":6736,"mediaType":"image","imageFill":false} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile"><div class="wp-block-media-text__content"><!-- wp:heading {"style":{"typography":{"fontSize":"56px"}}} -->
<h2 id="contemporary-ceramics-handmade-in-australia" style="font-size:56px">Contemporary ceramics, <em>handmade</em> in Australia.</h2>
<!-- /wp:heading -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}}} -->
<div class="wp-block-buttons" style="margin-top:20px;margin-bottom:20px"><!-- wp:button {"style":{"border":{"radius":"100px"},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"36px","right":"36px"}}},"fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size has-small-font-size"><a class="wp-block-button__link wp-element-button" href="#osaka-dinner-set" style="border-radius:100px;padding-top:6px;padding-right:36px;padding-bottom:6px;padding-left:36px">SHOP NOW</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div><figure class="wp-block-media-text__media"><img src="https://dotcompatterns.files.wordpress.com/2022/09/toa-heftiba-yn33ygmulwe-unsplash-edited.jpeg?w=768" alt="" class="wp-image-6736 size-full"/></figure></div>
<!-- /wp:media-text -->

Preview: https://dotcompatterns.wordpress.com/?p=6730&preview=true

[onuro]

Looking good, but I think the proportioning of button and heading is a little off, as if button needs to have a larger size.

[iamtakashi]

I agree. If the button is taller and probably a bit wider, it'd have a good balance.

[alaczek]

I ended up adjusting both the button and the heading size - the original one was a smidge too big and better suited to the font used in the Marl theme.

This pattern is now published.