Image, Title, Date and Author Name

[iamtakashi]

Aa an editorial pattern.

Screenshot:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"7vw","bottom":"7vw"}},"color":{"background":"#707070"}},"textColor":"background","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background-color has-text-color has-background" style="background-color:#707070;padding-top:7vw;padding-bottom:7vw"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%"} -->
<div class="wp-block-column" style="flex-basis:60%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:paragraph {"align":"right","style":{"typography":{"lineHeight":"1.3"}},"fontSize":"small"} -->
<p class="has-text-align-right has-small-font-size" style="line-height:1.3">October 9, 2022</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%","style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"style":{"typography":{"lineHeight":"1.3","fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
<h2 class="has-small-font-size" style="font-style:normal;font-weight:700;line-height:1.3">Stillness</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.3"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:1.3">by Noah Jones</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%","style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:spacer {"height":"6vw"} -->
<div style="height:6vw" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"id":7674,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/10/sam-burriss-zhsx9o2_b7y-unsplash.jpg?w=682" alt="" class="wp-image-7674"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

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

cc: @alaczek @onuro

[alaczek]

Could you give some more context to this one? How do you envision it being used? At first glance, it looks like a blog post, but it's just text, which is slightly confusing.

[iamtakashi]

Good point. It's probably better to be in the portfolio and photography categories. Just like these patterns

• https://dotcompatterns.wordpress.com/2020/06/01/right-aligned-text-and-image/
• https://dotcompatterns.wordpress.com/2020/01/17/portfolio-6/

I'll also remove the date so that it'll just have the month and the year.

[alaczek]

Yeah, ok, that makes sense 👍

[iamtakashi]

Thanks. Published!