Skip to content

Commit

Permalink
Add "Image on the left, description on the right" pattern
Browse files Browse the repository at this point in the history
Add "Image on the left, description on the right" pattern from woocommerce#5
  • Loading branch information
beafialho committed Feb 13, 2025
1 parent cdf8b7b commit 314d675
Showing 1 changed file with 37 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<?php
/**
* Title: Image on the left, description on the right
* Slug: woostarter/left-aligned-image-description-button
* Categories: text, about, media
* Keywords: about, text
* Description: A section with an image on the left, description and button on the right.
*

?>
<!-- wp:group {"metadata":{"name":"Image on the left, description on the right"},"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0"><!-- wp:columns {"align":"wide","className":"is-style-default","style":{"spacing":{"blockGap":{"left":"0"}}}} -->
<div class="wp-block-columns alignwide is-style-default"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:cover {"url":"https://kiri.mystagingwebsite.com/wp-content/uploads/2025/02/pattern-ceramic-decoration.jpg","id":417,"dimRatio":0,"customOverlayColor":"#dedede","isUserOverlayColor":false,"isDark":false,"sizeSlug":"full","style":{"dimensions":{"aspectRatio":"4/3"}},"layout":{"type":"default"}} -->
<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-417 size-full" alt="" src="https://kiri.mystagingwebsite.com/wp-content/uploads/2025/02/pattern-ceramic-decoration.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#dedede"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);flex-basis:50%"><!-- wp:heading {"fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-xx-large-font-size">Curating artistry</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We curate an eclectic mix of collectible vintage treasures and contemporary creations by talented artists from across the globe.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Shop now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

0 comments on commit 314d675

Please sign in to comment.