Footer with Address, Email Address, and Social Links

[iamtakashi]

Screenshot:

<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"0px","padding":{"top":"7vw","bottom":"40px"}}},"layout":{"inherit":true,"type":"constrained","wideSize":"1720px","contentSize":"860px"}} -->
<div class="wp-block-group alignfull" style="padding-top:7vw;padding-bottom:40px"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column"><!-- wp:site-title {"style":{"typography":{"lineHeight":1.8,"fontStyle":"normal","fontWeight":"700"}},"fontSize":"x-small"} /-->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":1.6}},"fontSize":"x-small"} -->
<p class="has-x-small-font-size" style="line-height:1.6">C. de Preciados, 374 37201, Madrid, España</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"1.6"}},"fontSize":"x-small"} -->
<p class="has-x-small-font-size" style="font-style:normal;font-weight:700;line-height:1.6">If you have any questions, let us know.</p>
<!-- /wp:paragraph -->

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

<!-- wp:column {"style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":1.6}},"fontSize":"x-small"} -->
<p class="has-x-small-font-size" style="font-style:normal;font-weight:700;line-height:1.6">Follow us</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"x-small"} -->
<p class="has-x-small-font-size" style="line-height:1.6"><a href="#">Facebook</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"x-small"} -->
<p class="has-x-small-font-size" style="line-height:1.6"><a href="#">Twitter</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"x-small"} -->
<p class="has-x-small-font-size" style="line-height:1.6"><a href="#">Instagram</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"7vw"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:7vw"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"className":"has-x-small-font-size","fontSize":"x-small"} -->
<p class="has-x-small-font-size" style="line-height:1.6">Designed with <a href="https://wordpress.com" rel="nofollow">WordPress.com</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

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

cc: @alaczek @onuro

[alaczek]

A tiny nitpick, take it or leave it. In the middle column I'd keep only the phone number or the email, but not both (probably the email). That way it looks nicer when scaling down and is more readable.

[iamtakashi]

Good idea, thanks! I removed the phone number before publishing.