patternspiration.com

001230423

  • Twenty Twenty One

    Twenty Twenty One had art at the heart of the theme. This pattern takes that as inspiration, creating a purely visual moment of an image display wall that uses borders not quite like the default theme, but inspired by it. Drawing on the legacy of the galleries where art hangs for people to view.

    Of note, is how by resizing the experience means on certain devices the images themselves vanish. This adds to the experience, hiding the art – you are encouraged to interact with your screen-size on this one.

    Pattern

    Code

    <!-- wp:group {"align":"wide","style":{"color":{"background":"#d1e4dd"},"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"clamp(2.5rem, 8vw, 4.5rem)","right":"clamp(2.5rem, 8vw, 4.5rem)"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide has-background" style="background-color:#d1e4dd;padding-top:var(--wp--preset--spacing--50);padding-right:clamp(2.5rem, 8vw, 4.5rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(2.5rem, 8vw, 4.5rem)"><!-- wp:columns {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}}}} -->
<div class="wp-block-columns" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0"><!-- wp:column {"style":{"spacing":{"padding":{"bottom":"0"}}}} -->
<div class="wp-block-column" style="padding-bottom:0"><!-- wp:image {"id":1356,"sizeSlug":"large","linkDestination":"none","style":{"border":{"width":"30px"}}} -->
<figure class="wp-block-image size-large has-custom-border"><img src="https://patternspiration.com/wp-content/uploads/2023/07/roses-tremieres-hollyhocks-1884-846x1024.jpg" alt="" class="wp-image-1356" style="border-width:30px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"style":{"spacing":{"padding":{"right":"0vw","left":"0vw"}}}} -->
<div class="wp-block-columns" style="padding-right:0vw;padding-left:0vw"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"right":"10vw"}}}} -->
<div class="wp-block-column" style="padding-right:10vw"><!-- wp:image {"id":1357,"sizeSlug":"large","linkDestination":"none","style":{"border":{"width":"15px"}}} -->
<figure class="wp-block-image size-large has-custom-border"><img src="https://patternspiration.com/wp-content/uploads/2023/07/young-woman-in-mauve-1-828x1024.jpg" alt="" class="wp-image-1357" style="border-width:15px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"0vh"}}}} -->
<div class="wp-block-columns" style="margin-top:0vh"><!-- wp:column {"style":{"spacing":{"padding":{"top":"clamp(1.5rem, 5vw, 2rem)","bottom":"clamp(1.5rem, 5vw, 2rem)","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"border":{"width":"0px","style":"none"}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:clamp(1.5rem, 5vw, 2rem);padding-right:var(--wp--preset--spacing--30);padding-bottom:clamp(1.5rem, 5vw, 2rem);padding-left:var(--wp--preset--spacing--30)"><!-- wp:image {"id":1358,"sizeSlug":"large","linkDestination":"none","style":{"border":{"width":"80px"}}} -->
<figure class="wp-block-image size-large has-custom-border"><img src="https://patternspiration.com/wp-content/uploads/2023/07/in-the-bois-de-boulogne-1024x842.jpg" alt="" class="wp-image-1358" style="border-width:80px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

    Screenshot

Posted

in

Tags: