List of events

[alaczek]

This pattern comes from the Munchies theme. For the purpose of making it more universal I used a color from the default palette to highlight each row. I'm also won during if I should keep the heading above the list or not.

Screenshot:

<!-- wp:group {"layout":{"inherit":false}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Upcoming Stops</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"inherit":false},"align":"full","style":{"spacing":{"blockGap":"12px"}}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"},"align":"full","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"tertiary"} -->
<div class="wp-block-group alignfull has-tertiary-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"wrap"},"style":{"spacing":{"blockGap":"5px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><strong>April 27th:</strong> 377 Brewery</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>2027 Yale Blvd SE</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p><strong>11:00 AM - 6:00 PM</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"},"align":"full","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"tertiary"} -->
<div class="wp-block-group alignfull has-tertiary-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"wrap"},"style":{"spacing":{"blockGap":"5px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><strong>April 27th:</strong> Bow &amp; Arrow Brewing Co.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>608 McKnight Ave NW</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p><strong>11:00 AM - 6:00 PM</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"},"align":"full","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"tertiary"} -->
<div class="wp-block-group alignfull has-tertiary-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"wrap"},"style":{"spacing":{"blockGap":"5px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><strong>April 27th:</strong> 377 Brewery</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>2027 Yale Blvd SE</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p><strong>11:00 AM - 6:00 PM</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"},"align":"full","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"tertiary"} -->
<div class="wp-block-group alignfull has-tertiary-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"wrap"},"style":{"spacing":{"blockGap":"5px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><strong>April 27th:</strong> Bow &amp; Arrow Brewing Co.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>608 McKnight Ave NW</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p><strong>11:00 AM - 6:00 PM</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

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

cc @iamtakashi @onuro

[iamtakashi]

A few thoughts:

I'm not too sure about the use of bold weight. Maybe like this makes more sense?

Date: Name Address

I personally don't like the right column content being aligned vertically to the middle. I'd prefer them to be aligned at the top.

[alaczek]

I moved the elements around a bit - does this feel more balance @iamtakashi ?

[iamtakashi]

Yes, that looks fine to me.

[alaczek]

Thanks, published!