Text and images mosaic

[alaczek]

This is antother pattern from Leven. I wasn't sure if I should change the content though, and provide some real copy. If so, I'm gonna have to change the images because I don't think I can come up with copy about lenses 🙂 .

<!-- wp:columns {"verticalAlignment":"top","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":33.33} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:33.33%"><!-- wp:spacer {"height":110} -->
<div style="height:110px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"style":{"color":{"text":"#ff302c"}}} -->
<h2 class="has-text-color" style="color:#ff302c">Galaxy Deep Field Lens</h2>
<!-- /wp:heading -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"className":"has-small-font-size"} -->
<p class="has-small-font-size">Lectus quisque eligendi eget sagittis praesent sapiente ipsam, nulla dolor, hymenaeos nobis doloremque aspernatur fuga doloribus! Risus praesent porttitor deleniti inceptos magnam, commodi et rerum! Pulvinar! Ante amet facere mattis. Velit pariatur, curabitur qui ex. Repellendus duis nostrum, iure pretium feugiat, pharetra quos, dignissimos parturient pariatur cum, veniam rhoncus, dolores.</p>
<!-- /wp:paragraph -->

<!-- wp:button {"style":{"color":{"text":"#ff302c"}},"align":"left","className":"is-style-outline"} -->
<div class="wp-block-button alignleft is-style-outline"><a class="wp-block-button__link has-text-color" href="#" style="color:#ff302c">Learn more</a></div>
<!-- /wp:button -->

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

<!-- wp:column {"verticalAlignment":"top","width":66.66} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:66.66%"><!-- wp:image {"id":62,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://levendemo.files.wordpress.com/2019/08/image-from-rawpixel-id-432222-jpeg-e1563987029380.jpg?w=750" alt="" class="wp-image-62"/></figure>
<!-- /wp:image -->

<!-- wp:media-text {"mediaId":63,"mediaType":"image","isStackedOnMobile":false,"verticalAlignment":"top","imageFill":true} -->
<div class="wp-block-media-text alignwide is-vertically-aligned-top is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(https://levendemo.files.wordpress.com/2019/08/image-from-rawpixel-id-593223-jpeg.jpg?w=750);background-position:50% 50%"><img src="https://levendemo.files.wordpress.com/2019/08/image-from-rawpixel-id-593223-jpeg.jpg?w=750" alt="" class="wp-image-63"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-small-font-size"} -->
<p class="has-small-font-size">Luctus quasi wisi aspernatur phasellus do urna numquam facere temporibus magni dicta nec quidem nonummy cursus, natoque quibusdam eu fusce felis porttitor fuga a ea non pellentesque! Ligula lorem tempor senectus ridiculus pariatur voluptatum dignissimos. Ipsam dicta at harum? Adipisicing, nascetur.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:spacer {"height":96} -->
<div style="height:96px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[ianstewart]

Tailored copy is always going to be better than Lorem Ipsum. :D

[iamtakashi]

Let's not use Lorem ipsum at all. It will not be translated and look bad in other languages as well.

[alaczek]

Gotcha! In that case I'll probably switch the images too.

[alaczek]

Alright, here goes the updated version. I stumbled upon images of tea and tea pots and got inspired. @iamtakashi please let me know if the cups in the image are Japanese or Chinese (and if the whole thing makes sense) 😄 Hopefully I didn't make any big blunders 🤞

<!-- wp:columns {"verticalAlignment":"top","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":33.33} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:33.33%"><!-- wp:spacer {"height":110} -->
<div style="height:110px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"style":{"color":{"text":"#ff302c"}}} -->
<h2 class="has-text-color" style="color:#ff302c">Japanese Tea Bowls</h2>
<!-- /wp:heading -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>A tea bowl is a central item in the traditional Japanese tea ceremony. In our shop you'll find one-of-a-kind, handmade bowls and cups made to order in our ceramic workshop. Each of our bowls is a unique creation so please allow for slight variances in shape and color. The bowls are glazed with special food-safe glazes.</p>
<!-- /wp:paragraph -->

<!-- wp:button {"style":{"color":{"text":"#ff302c"}},"align":"left","className":"is-style-outline"} -->
<div class="wp-block-button alignleft is-style-outline"><a class="wp-block-button__link has-text-color" href="#" style="color:#ff302c">Learn more</a></div>
<!-- /wp:button -->

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

<!-- wp:column {"verticalAlignment":"top","width":66.66} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:66.66%"><!-- wp:image {"id":791,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://arboretum264259637.files.wordpress.com/2020/05/oriento-rdmks85cli8-unsplash.jpg?w=683" alt="" class="wp-image-791"/></figure>
<!-- /wp:image -->

<!-- wp:media-text {"mediaId":792,"mediaType":"image","isStackedOnMobile":false,"verticalAlignment":"top","imageFill":true} -->
<div class="wp-block-media-text alignwide is-vertically-aligned-top is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(https://arboretum264259637.files.wordpress.com/2020/05/oriento-dpuwgzlsok8-unsplash.jpg?w=640);background-position:50% 50%"><img src="https://arboretum264259637.files.wordpress.com/2020/05/oriento-dpuwgzlsok8-unsplash.jpg?w=640" class="wp-image-792"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p>We're also offering unique, handmade ceramic mugs as well as original sets, consisting of tea, cups and matching tea pot, perfect for gifting.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:spacer {"height":96} -->
<div style="height:96px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[iamtakashi]

My first impression of the image was that it has a stronger Chinese influence, but I'm not a Japanese tea master either :D But, I saw in Unsplash that the image was taken in China.

It's probably safer to use words like "oriental" or "east Asian" so that it's not too specific to a country?

[alaczek]

Alright, I'll just drop "Japanese" from the title and content, and it still makes sense.

[iamtakashi]

👍

[ianstewart]

🚀

[pablohoneyhoney]

You don't actually need the lines/dividers on this one.