Automattic / blockpatterns

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

Link in Bio with Flowery Wallpaper #301

Closed iamtakashi closed 1 year ago

iamtakashi commented 1 year ago

An additional LiB pattern based on the feedback from Matt. With the busy background, the readability suffers a bit, but I don't think it's critical, as the tagline isn't the most important thing in there.

Category: Link in Bio

Tag: Layout, Pattern

Screenshot: dotcompatterns wordpress com__p=8120 preview=true (1)

Markup:

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/10/image-from-rawpixel-id-496074-edit.jpg","id":8121,"dimRatio":20,"overlayColor":"black","focalPoint":{"x":0.5,"y":0.82},"minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-8121" alt="" src="https://dotcompatterns.files.wordpress.com/2022/10/image-from-rawpixel-id-496074-edit.jpg" style="object-position:50% 82%" data-object-fit="cover" data-object-position="50% 82%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-text-color has-link-color"><!-- wp:site-logo {"align":"center","className":"is-style-rounded"} /-->

<!-- wp:site-title {"textAlign":"center","isLink":false,"align":"wide","style":{"typography":{"fontSize":"min(15vw, 99px)","lineHeight":"1","fontStyle":"normal","fontWeight":"500"}},"fontFamily":"dm-sans"} /-->

<!-- wp:site-tagline {"textAlign":"center","style":{"typography":{"fontSize":"1.4375rem"}},"fontFamily":"dm-sans"} /--></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"2.5rem"} -->
<div style="height:2.5rem" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"background","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background-color has-text-color has-link-color"><!-- wp:buttons {"style":{"spacing":{"blockGap":"1rem"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"border":{"radius":"1000px"}},"fontFamily":"dm-sans"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-dm-sans-font-family has-custom-font" style="font-family:dm-sans"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">Tree Following September 2022</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"border":{"radius":"1000px"}},"fontFamily":"dm-sans"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-dm-sans-font-family has-custom-font" style="font-family:dm-sans"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">5 Reasons Why Gardeners Must Go Peat-Free</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"border":{"radius":"1000px"}},"fontFamily":"dm-sans"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-dm-sans-font-family has-custom-font" style="font-family:dm-sans"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">The Rock Garden is Back</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"border":{"radius":"1000px"}},"fontFamily":"dm-sans"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-dm-sans-font-family has-custom-font" style="font-family:dm-sans"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">Why Don’t We Love Dandelions?</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"border":{"radius":"1000px"}},"fontFamily":"dm-sans"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-dm-sans-font-family has-custom-font" style="font-family:dm-sans"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">Every Rose in England</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

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

cc @alaczek @onuro

alaczek commented 1 year ago

Are any of these new patterns meant to be added to the Link in Bio signup flow and/or the Lynx theme?

iamtakashi commented 1 year ago

Are any of these new patterns meant to be added to the Link in Bio signup flow and/or the Lynx theme?

I believe so. Is that the plan? @pablohoneyhoney @mtias

iamtakashi commented 1 year ago

I assume that's the plan, but I'll make sure before adding it to the flow.

I'll publish this anyway, but let me know if you have a concern or/and an opinion against it.