Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Text, button and two images" patterns #21

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions woostarter/patterns/about-text-button-two-images.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<?php
/**
* Title: Text, button and two images
* Slug: woostarter/text-button-two-images
* Categories: text, about, media
* Keywords: about, text, story
* Description: A section with text, button and two images.
*

?>
<!-- wp:group {"metadata":{"categories":["intro"],"name":"Text, button and two images","patternName":"a8c/intro-two-column-with-image-and-content"},"align":"full","className":"alignfull is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained","justifyContent":"center"}} -->
<div class="wp-block-group alignfull is-style-default" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"verticalAlignment":"top","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","layout":{"type":"constrained","justifyContent":"left","contentSize":"460px"}} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"fontSize":"xx-large"} -->
<h2 class="wp-block-heading has-xx-large-font-size">About us</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Our essence lies in the beauty of imperfection. Inspired by the Japanese word kiri, meaning fog, the brand embraces the blurry lines, the undefined, and the asymmetrical. We celebrate the charm of the imperfect, inviting you to see the artistry in forms that are raw, organic, and unique.</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">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"%"} -->
<div class="wp-block-column"><!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/pattern-clay-pots-on-a-row.webp","id":420,"alt":"A row of rustic clay pots hanging against a woven reed wall.","dimRatio":0,"align":"wide","style":{"color":[]}} -->
<div class="wp-block-cover alignwide"><img class="wp-block-cover__image-background wp-image-420" alt="A row of rustic clay pots hanging against a woven reed wall." src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/pattern-clay-pots-on-a-row.webp" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/pattern-ceramic-decoration.webp","id":417,"alt":"A stone-like ceramic vessel shaped like a bird with intricate carvings.","dimRatio":0,"focalPoint":{"x":0,"y":1},"isDark":false,"style":{"color":[]}} -->
<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-417" alt="A stone-like ceramic vessel shaped like a bird with intricate carvings." src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/pattern-ceramic-decoration.webp" style="object-position:0% 100%" data-object-fit="cover" data-object-position="0% 100%"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->