Subscription Yellow Background

[onuro]

Screenshot:

<!-- wp:cover {"customOverlayColor":"#ffffb9","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"3.5vw","right":"3.5vw","bottom":"3.5vw","left":"3.5vw"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:3.5vw;padding-right:3.5vw;padding-bottom:3.5vw;padding-left:3.5vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#ffffb9"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"color":{"background":"#fffffa"},"border":{"width":"8px"},"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}}}} -->
<div class="wp-block-group alignwide has-background" style="border-width:8px;background-color:#fffffa;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:heading {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","fontSize":"2.2rem"}},"fontFamily":"space-mono"} -->
<h2 class="has-space-mono-font-family has-custom-font" style="font-size:2.2rem;font-style:normal;font-weight:700;text-transform:uppercase;font-family:space-mono">Over 60K people have signed up. Join the crowd.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Enter your mail to get the latest to your inbox, delivered weekly.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"buttonOnNewLine":true,"buttonWidth":"100%","borderWeight":5,"customBorderColor":"#111111","className":"is-style-split"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline is-style-split">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="true" custom_font_size="16px" custom_border_radius="0" custom_border_weight="5" custom_border_color="#111111" custom_button_width="100%" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true" success_message="Success! An email was just sent to confirm your subscription. Please find the email now and click &#039;Confirm Follow&#039; to start subscribing."]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

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

[alaczek]

I like this one! I'm only wondering why you didn't set a minimum height of cover? I assumed most if not all of the subscription patterns would be full screen.

[onuro]

Thanks for the advice! Full height cover def looks better.

[iamtakashi]

How about adding a break before the second sentence in the heading? The widow doesn't look great with the length of the line, and it seems to be easily solvable.

[onuro]

Cool tip! Thanks @iamtakashi. Updated as follows:

[iamtakashi]

Nice 👍👍👍

[onuro]

Awesome :) Published