Automattic / blockpatterns

Repo of block patterns to work with
7 stars 2 forks source link

Call to Action #98

Closed iamtakashi closed 3 years ago

iamtakashi commented 4 years ago

I don't like the font and bold heading in the pattern site for this particular, but... it did look nice with Playfair display normal weight :)

Pattern 108

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2020/07/joshua-fuller-vi-kdgeh4d0-unsplash.jpg","id":1752,"dimRatio":0,"focalPoint":{"x":0.5,"y":"0.45"},"minHeight":760,"contentPosition":"top center","align":"full"} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-top-center" style="background-image:url(https://dotcompatterns.files.wordpress.com/2020/07/joshua-fuller-vi-kdgeh4d0-unsplash.jpg);background-position:50% 45%;min-height:760px"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":24} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"align":"center","level":1,"style":{"color":{"text":"#2d2f34"},"typography":{"lineHeight":"1.2","fontSize":60}}} -->
<h1 class="has-text-align-center has-text-color" style="line-height:1.2;font-size:60px;color:#2d2f34">We help you discover your path to the top</h1>
<!-- /wp:heading -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#007a0c","text":"#ffffff"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#007a0c;color:#ffffff">Get started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->
ianstewart commented 4 years ago

LGTM. 👍🏻 I predict it'll be popular — when we get tracking in place. :)

pablohoneyhoney commented 4 years ago

The green could be brighter and energetic per the metaphor used. Feels a bit discouraging.

iamtakashi commented 4 years ago

A tricky thing is that we want to make sure the green has sufficient contrast with the white to pass AA standard. I was able to make them a little brighter #258917. Let me know if this isn't good enough or I should explore a different idea to increase energy.

Pattern 108

alaczek commented 3 years ago

Closing the loop on that one, as it's already launched.