Last active
June 10, 2021 16:52
-
-
Save melchoyce/6c0d596ea7d434f1eb15c6f6df0dc4c8 to your computer and use it in GitHub Desktop.
WordPress Pattern: Cover block with caption
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- wp:cover {"url":"https://www.anarieldesign.com/blockpatterns/image-from-rawpixel-id-414445-bigjpeg-scaled.jpeg","id":20466,"dimRatio":0,"focalPoint":{"x":"0.69","y":"0.32"},"minHeight":100,"minHeightUnit":"vh","align":"full"} --> | |
<div class="wp-block-cover alignfull" style="min-height:100vh"><img class="wp-block-cover__image-background wp-image-20466" alt="" src="https://www.anarieldesign.com/blockpatterns/image-from-rawpixel-id-414445-bigjpeg-scaled.jpeg" style="object-position:69% 32%" data-object-fit="cover" data-object-position="69% 32%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"wide","style":{"color":{"text":"#28303d"}},"backgroundColor":"white","className":"is-style-default"} --> | |
<div class="wp-block-group alignwide is-style-default has-white-background-color has-text-color has-background" style="color:#28303d"><!-- wp:columns {"align":"wide"} --> | |
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> | |
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:cover {"customOverlayColor":"#ece7d6"} --> | |
<div class="wp-block-cover has-background-dim" style="background-color:#ece7d6"><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","id":20468,"width":201,"height":201,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> | |
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://www.anarieldesign.com/blockpatterns/bird.jpeg" alt="" class="wp-image-20468" width="201" height="201"/></figure></div> | |
<!-- /wp:image --></div></div> | |
<!-- /wp:cover --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"verticalAlignment":"center","width":"66.66%"} --> | |
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:heading {"style":{"color":{"text":"#28303d"}}} --> | |
<h2 class="has-text-color" style="color:#28303d"><strong>A lovely day in the nature</strong></h2> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"textColor":"gray"} --> | |
<p class="has-gray-color has-text-color">The word <em>nature</em> is borrowed from the <a href="https://en.wikipedia.org/wiki/Old_French">Old French</a> <em>nature</em> and is derived from the <a href="https://en.wikipedia.org/wiki/Latin">Latin</a> word <em>natura</em>, or "essential qualities, innate disposition", and in ancient times, literally meant "birth".</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons --> | |
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#28303d","text":"#ffffff"}}} --> | |
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="background-color:#28303d;color:#ffffff">Read More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --></div> | |
<!-- /wp:columns --></div> | |
<!-- /wp:group --></div></div> | |
<!-- /wp:cover --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment