Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Add new Product collections: featured collections pattern (#9388)
Browse files Browse the repository at this point in the history
* Add new `Product collections: featured collections` pattern

* Update image paths

* Add buttons

* Add colors to buttons

* Change branded image
  • Loading branch information
albarin authored May 12, 2023
1 parent 00d7e64 commit b9148b4
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions patterns/product-collections-featured-collections.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<?php
/**
* Title: Product Collections: Featured Collections
* Slug: woocommerce-blocks/product-collections-featured-collections
* Categories: WooCommerce
*/
?>

<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"0","left":"0"}}}} -->
<div class="wp-block-columns alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
<!-- wp:column {"width":"50%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"color":{"background":"#f3edd8"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-column has-background" style="background-color:#f3edd8;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:50%">
<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"},"color":{"text":"#000000"}},"fontSize":"x-large"} -->
<h2 class="wp-block-heading has-text-color has-x-large-font-size" style="color:#000000;font-style:normal;font-weight:700">Tech gifts under $100</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"style":{"spacing":{"padding":{"left":"18px","right":"18px","top":"9px","bottom":"9px"}},"typography":{"fontSize":"16px"},"color":{"background":"#000000","text":"#ffffff"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:16px">
<a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#ffffff;background-color:#000000;padding-top:9px;padding-right:18px;padding-bottom:9px;padding-left:18px">Shop tech</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group">
<!-- wp:image {"width":94,"height":108,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-electronics-1.png', dirname( __FILE__ ) ) ); ?>" alt="" width="94" height="108" />
</figure>
<!-- /wp:image -->

<!-- wp:image {"width":80,"height":108,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-7.png', dirname( __FILE__ ) ) ); ?>" alt="" width="80" height="108" />
</figure>
<!-- /wp:image -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"color":{"background":"#d8f2f3"}}} -->
<div class="wp-block-column has-background" style="background-color:#d8f2f3;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:50%">
<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"},"color":{"text":"#000000"}},"fontSize":"x-large"} -->
<h2 class="wp-block-heading has-text-color has-x-large-font-size" style="color:#000000;font-style:normal;font-weight:700">For the gamers</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"style":{"spacing":{"padding":{"left":"18px","right":"18px","top":"9px","bottom":"9px"}},"typography":{"fontSize":"16px"},"color":{"background":"#000000","text":"#ffffff"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:16px">
<a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#ffffff;background-color:#000000;padding-top:9px;padding-right:18px;padding-bottom:9px;padding-left:18px">Shop games</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group">
<!-- wp:image {"width":100,"height":60,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-electronics-3.png', dirname( __FILE__ ) ) ); ?>" alt="" width="100" height="60" />
</figure>
<!-- /wp:image -->

<!-- wp:image {"width":100,"height":100,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-electronics-2.png', dirname( __FILE__ ) ) ); ?>" alt="" width="100" height="100" />
</figure>
<!-- /wp:image -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->

0 comments on commit b9148b4

Please sign in to comment.