Automattic / blockpatterns

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

Contact Info with Map #223

Closed iamtakashi closed 2 years ago

iamtakashi commented 2 years ago

dotcompatterns wordpress com__p=5634 preview=true

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"7vw","bottom":"7vw"},"margin":{"top":"0px","bottom":"0px"},"blockGap":"0px"}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:7vw;padding-bottom:7vw"><!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"layout":{"contentSize":"860px"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2><strong>San Francisco Office</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We earned a reputation for designing beautiful and innovative buildings that delight and inspire. We strive to deliver innovative solutions that have a minimal impact on the environment.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"2vw"} -->
<div style="height:2vw" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:33.33%"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6","fontStyle":"normal","fontWeight":"500"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:500;line-height:1.6">Address:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:1.6">123 Example St, San Francisco,<br>CA 12345-6789</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6","fontStyle":"normal","fontWeight":"500"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:500;line-height:1.6">Telephone:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:1.6">0123-456-7890</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6","fontStyle":"normal","fontWeight":"500"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:500;line-height:1.6">Email:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:1.6"><a rel="noreferrer noopener" href="#" target="_blank">contact@example.com</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:jetpack/map {"zoom":11.985645183140942,"mapCenter":{"lng":-122.4176084191771,"lat":37.77832825108254},"mapHeight":null,"className":"is-style-black_and_white"} -->
<div class="wp-block-jetpack-map is-style-black_and_white" data-map-style="black_and_white" data-map-details="true" data-points="[]" data-zoom="11.985645183140942" data-map-center="{&quot;lng&quot;:-122.4176084191771,&quot;lat&quot;:37.77832825108254}" data-marker-color="red" data-show-fullscreen-button="true"></div>
<!-- /wp:jetpack/map --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

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

onuro commented 2 years ago

Imho the headings for the address/phone/email could use some weight(or maybe an all caps treatment). Otherwise, this is nice!

alaczek commented 2 years ago

I agree with Onur, otherwise it's looking great!

iamtakashi commented 2 years ago

the headings for the address/phone/email could use some weight(or maybe an all caps treatment).

It has 500 (medium), but it was probably too subtle to notice :) I'll make them bold before publishing.