This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 219
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Pattern] Add new
Hero product 3 split pattern (#9319)
* Add new `Hero product 3 split` pattern * Improve colors and margins
- Loading branch information
Showing
2 changed files
with
94 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <?php | ||
| /** | ||
| * Title: Hero Product 3 Split | ||
| * Slug: woocommerce-blocks/hero-product-3-split | ||
| * 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":"66.66%"} --> | ||
| <div class="wp-block-column" style="flex-basis:66.66%"> | ||
| <!-- wp:media-text {"mediaPosition":"right","mediaId":3800,"mediaLink":"https://store.local/p/image/","mediaType":"image","style":{"color":{"background":"#000000","text":"#ffffff"}}} --> | ||
| <div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile has-text-color has-background" style="color:#ffffff;background-color:#000000"> | ||
| <div class="wp-block-media-text__content"> | ||
| <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","left":"20px","right":"20px"}}},"layout":{"type":"flex","orientation":"vertical"}} --> | ||
| <div class="wp-block-group" style="padding-top:0;padding-right:20px;padding-left:20px"> | ||
| <!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"large"} --> | ||
| <h2 class="wp-block-heading has-large-font-size" style="font-style:normal;font-weight:700">New in: 3-in-1 parka</h2> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph {"fontSize":"small"} --> | ||
| <p class="has-small-font-size">With high-quality materials and expert craftsmanship, our products are built to last and exceed your expectations.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:buttons --> | ||
| <div class="wp-block-buttons"> | ||
| <!-- wp:button {"backgroundColor":"background","textColor":"foreground"} --> | ||
| <div class="wp-block-button"> | ||
| <a class="wp-block-button__link has-foreground-color has-background-background-color has-text-color has-background wp-element-button">Shop now</a> | ||
| </div> | ||
| <!-- /wp:button --> | ||
| </div> | ||
| <!-- /wp:buttons --> | ||
| </div> | ||
| <!-- /wp:group --> | ||
| </div> | ||
| <figure class="wp-block-media-text__media"> | ||
| <img src="<?php echo esc_url( plugins_url() ); ?>/woocommerce-blocks/images/pattern-placeholders/product-apparel-4.jpg" alt="" class="wp-image-3800 size-full" /> | ||
| </figure> | ||
| </div> | ||
| <!-- /wp:media-text --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
|
|
||
| <!-- wp:column {"verticalAlignment":"center","width":"25%","style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}}}} --> | ||
| <div class="wp-block-column is-vertically-aligned-center" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;flex-basis:25%"> | ||
| <!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} --> | ||
| <h2 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:15px;font-style:normal;font-weight:700">Waterproof Membrane</h2> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}}} --> | ||
| <p style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0;font-size:12px">Never worry about the weather again. Keep yourself dry, warm, and looking stylish.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:separator {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}},"className":"is-style-wide"} --> | ||
| <hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:20px;margin-bottom:20px" /> | ||
| <!-- /wp:separator --> | ||
|
|
||
| <!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} --> | ||
| <h2 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:15px;font-style:normal;font-weight:700">Expert Craftsmanship</h2> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}}} --> | ||
| <p style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0;font-size:12px">Our products are made with expert craftsmanship and attention to detail, ensuring that every stitch and seam is perfect.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:separator {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}},"className":"is-style-wide"} --> | ||
| <hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:20px;margin-bottom:20px" /> | ||
| <!-- /wp:separator --> | ||
|
|
||
| <!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} --> | ||
| <h2 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:15px;font-style:normal;font-weight:700">Durable Fabric</h2> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}}} --> | ||
| <p style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0;font-size:12px">We use only the highest-quality materials in our products, ensuring that they look great and last for years to come.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:separator {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}},"className":"is-style-wide"} --> | ||
| <hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:20px;margin-bottom:20px" /> | ||
| <!-- /wp:separator --> | ||
|
|
||
| <!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} --> | ||
| <h2 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:15px;font-style:normal;font-weight:700">Sustainable Dyes</h2> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}}} --> | ||
| <p style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0;font-size:12px">From bold prints and colors to intricate details and textures, our products are a perfect combination of style and function.</p> | ||
| <!-- /wp:paragraph --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
| </div> | ||
| <!-- /wp:columns --> |