Centre Aligned Header

[iamtakashi]

Category: Header

Tag: Pattern

Screenshot:

Markup:

<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignwide" style="padding-top:0;padding-bottom:0"><!-- wp:spacer {"height":"6vw"} -->
<div style="height:6vw" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:site-logo {"width":96,"shouldSyncIcon":false,"align":"center"} /-->

<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"left":"0.5em"}},"typography":{"letterSpacing":"0.5em","textTransform":"uppercase","fontSize":"1.6rem","fontStyle":"normal","fontWeight":"400","lineHeight":"1"}},"fontFamily":"eb-garamond"} /-->

<!-- wp:site-tagline {"textAlign":"center","style":{"spacing":{"margin":{"top":"0.63rem"}},"typography":{"fontSize":"0.8rem","fontStyle":"italic","fontWeight":"400"}},"fontFamily":"eb-garamond"} /--></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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

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

cc: @alaczek @onuro

[onuro]

LGTM!

[iamtakashi]

Published