Automattic / blockpatterns

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

Link in Bio (Mesh Gradient) #248

Closed alaczek closed 2 years ago

alaczek commented 2 years ago

Frame 46

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/08/mesh_gradient.jpg","id":5846,"dimRatio":0,"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-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-5846" alt="" src="https://dotcompatterns.files.wordpress.com/2022/08/mesh_gradient.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"20px"}}} -->
<div class="wp-block-group"><!-- wp:image {"id":5849,"width":120,"height":120,"sizeSlug":"large","linkDestination":"none","style":{"border":{"width":"2px"}},"borderColor":"black","className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-resized has-custom-border is-style-rounded"><img src="https://dotcompatterns.files.wordpress.com/2022/08/sharon-pittaway-imdsjoiftzo-unsplash.jpg?w=640" alt="" class="has-border-color has-black-border-color wp-image-5849" style="border-width:2px" width="120" height="120"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"1.125rem"}}} -->
<h2 class="has-text-align-center" style="font-size:1.125rem;font-style:normal;font-weight:700">Color Burst</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","textColor":"black","width":100,"style":{"border":{"radius":"100px"},"typography":{"textTransform":"uppercase"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-background-background-color has-text-color has-background wp-element-button" style="border-radius:100px"><strong>Read the Blog</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"background","textColor":"black","width":100,"style":{"border":{"radius":"100px"},"typography":{"textTransform":"uppercase"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-background-background-color has-text-color has-background wp-element-button" style="border-radius:100px"><strong>YouTube Channel</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"background","textColor":"black","width":100,"style":{"border":{"radius":"100px"},"typography":{"textTransform":"uppercase"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-background-background-color has-text-color has-background wp-element-button" style="border-radius:100px"><strong>Latest Podcast Episode</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"background","textColor":"black","width":100,"style":{"border":{"radius":"100px"},"typography":{"textTransform":"uppercase"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-background-background-color has-text-color has-background wp-element-button" style="border-radius:100px"><strong>Merch Store</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","iconBackgroundColorValue":"#ffffff","className":"is-style-default","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color is-style-default"><!-- wp:social-link {"url":"#","service":"wordpress"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Preview: https://dotcompatterns.wordpress.com/?p=5844

onuro commented 2 years ago

This one also has a "none" image alignment which makes the avatar left aligned to me. I centered it

image
<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/08/mesh_gradient.jpg","id":5846,"dimRatio":0,"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-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-5846" alt="" src="https://dotcompatterns.files.wordpress.com/2022/08/mesh_gradient.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"20px"}}} -->
<div class="wp-block-group"><!-- wp:image {"id":5849,"width":120,"height":120,"sizeSlug":"large","linkDestination":"none","style":{"border":{"width":"2px"}},"borderColor":"black","className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-resized has-custom-border is-style-rounded"><img src="https://dotcompatterns.files.wordpress.com/2022/08/sharon-pittaway-imdsjoiftzo-unsplash.jpg?w=640" alt="" class="has-border-color has-black-border-color wp-image-5849" style="border-width:2px" width="120" height="120"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"1.125rem"}}} -->
<h2 class="has-text-align-center" style="font-size:1.125rem;font-style:normal;font-weight:700">Color Burst</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","textColor":"black","width":100,"style":{"border":{"radius":"100px"},"typography":{"textTransform":"uppercase"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-background-background-color has-text-color has-background wp-element-button" style="border-radius:100px"><strong>Read the Blog</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"background","textColor":"black","width":100,"style":{"border":{"radius":"100px"},"typography":{"textTransform":"uppercase"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-background-background-color has-text-color has-background wp-element-button" style="border-radius:100px"><strong>YouTube Channel</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"background","textColor":"black","width":100,"style":{"border":{"radius":"100px"},"typography":{"textTransform":"uppercase"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-background-background-color has-text-color has-background wp-element-button" style="border-radius:100px"><strong>Latest Podcast Episode</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"background","textColor":"black","width":100,"style":{"border":{"radius":"100px"},"typography":{"textTransform":"uppercase"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-background-background-color has-text-color has-background wp-element-button" style="border-radius:100px"><strong>Merch Store</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","iconBackgroundColorValue":"#ffffff","className":"is-style-default","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color is-style-default"><!-- wp:social-link {"url":"#","service":"wordpress"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
alaczek commented 2 years ago

Good catch! I also ended up making the background image fixed. Published!