This repository has been archived by the owner on Nov 18, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 127
Add: Services - Two-column boxed pricing table #165
Merged
Merged
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
9beb0f5
Add the two-column pricing table pattern.
juanfra d062eb3
Adjust the button font-size.
juanfra e3bfb25
Fix margin for the services three-column pattern.
juanfra 55e633b
Remove `<strong>`
juanfra 30a3d87
Add checkmark for lists.
juanfra f132eab
Add checkmark style for the pricing pattern lists.
juanfra ee00d80
Merge branch 'trunk' into add/pricing-2-col-pattern
juanfra 3373bfd
Merge branch 'trunk' into add/pricing-2-col-pattern
juanfra d59a5e8
Add columns. Apply suggestions from code review.
juanfra 4915b1a
Apply suggestions from the review.
juanfra File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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,137 @@ | ||
| <?php | ||
| /** | ||
| * Title: Pricing two columns | ||
| * Slug: twentytwentyfive/cta-pricing | ||
| * Categories: call-to-action, featured | ||
| * Viewport width: 1400 | ||
| * Description: A pricing section with a title, a paragraph and two pricing levels. | ||
| * | ||
| * @package WordPress | ||
| * @subpackage Twenty_Twenty_Five | ||
| * @since Twenty Twenty-Five 1.0 | ||
| */ | ||
|
|
||
| ?> | ||
| <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} --> | ||
| <div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> | ||
| <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} --> | ||
| <div class="wp-block-group alignwide" style="padding-bottom:var(--wp--preset--spacing--50)"> | ||
| <!-- wp:heading {"textAlign":"center","align":"wide"} --> | ||
| <h2 class="wp-block-heading alignwide has-text-align-center">Pricing</h2> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph {"align":"center"} --> | ||
| <p class="has-text-align-center">These are our membership options. You can cancel or pause anytime.</p> | ||
| <!-- /wp:paragraph --> | ||
| </div> | ||
| <!-- /wp:group --> | ||
|
|
||
| <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"}}}} --> | ||
| <div class="wp-block-columns alignwide"> | ||
| <!-- wp:column {"width":"9%"} --> | ||
| <div class="wp-block-column" style="flex-basis:9%"> | ||
| <!-- 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 --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
|
|
||
| <!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"border":{"width":"1px","color":"var:preset|color|opacity-20","radius":"10px"}}} --> | ||
| <div class="wp-block-column has-border-color" style="border-color:var(--wp--preset--color--opacity-20);border-width:1px;border-radius:10px;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)"> | ||
| <!-- wp:heading {"level":3} --> | ||
| <h3 class="wp-block-heading" id="free">Free</h3> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}},"textColor":"primary","fontSize":"large"} --> | ||
| <p class="has-primary-color has-text-color has-link-color has-large-font-size">0€</p> | ||
carolinan marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:list {"className":"is-style-checkmark-list","style":{"spacing":{"padding":{"left":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"fontSize":"small"} --> | ||
| <ul style="padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)" class="wp-block-list has-small-font-size is-style-checkmark-list"> | ||
| <!-- wp:list-item --> | ||
| <li>Get access to our paid articles and weekly newsletter.</li> | ||
| <!-- /wp:list-item --> | ||
|
|
||
| <!-- wp:list-item --> | ||
| <li>Join our IRL events.</li> | ||
| <!-- /wp:list-item --> | ||
|
|
||
| <!-- wp:list-item --> | ||
| <li>Get a free tote bag.</li> | ||
| <!-- /wp:list-item --> | ||
|
|
||
| <!-- wp:list-item --> | ||
| <li>An elegant addition of home decor collection.</li> | ||
| <!-- /wp:list-item --> | ||
|
|
||
| <!-- wp:list-item --> | ||
| <li>Join our forums.</li> | ||
| <!-- /wp:list-item --> | ||
| </ul> | ||
| <!-- /wp:list --> | ||
|
|
||
| <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> | ||
| <div class="wp-block-buttons"> | ||
| <!-- wp:button {"width":100} --> | ||
| <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Join</a></div> | ||
| <!-- /wp:button --> | ||
| </div> | ||
| <!-- /wp:buttons --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
|
|
||
| <!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"border":{"width":"1px","color":"var:preset|color|opacity-20","radius":"10px"}},"layout":{"type":"default"}} --> | ||
| <div class="wp-block-column has-border-color" style="border-color:var(--wp--preset--color--opacity-20);border-width:1px;border-radius:10px;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)"> | ||
| <!-- wp:heading {"level":3} --> | ||
| <h3 class="wp-block-heading" id="single">Single</h3> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:paragraph {"fontSize":"large"} --> | ||
| <p class="has-large-font-size">20€/month</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:list {"className":"is-style-checkmark-list","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"fontSize":"small"} --> | ||
| <ul style="padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)" class="wp-block-list has-small-font-size is-style-checkmark-list"> | ||
| <!-- wp:list-item --> | ||
| <li>Get access to our paid articles and weekly newsletter.</li> | ||
| <!-- /wp:list-item --> | ||
|
|
||
| <!-- wp:list-item --> | ||
| <li>Join our IRL events.</li> | ||
| <!-- /wp:list-item --> | ||
|
|
||
| <!-- wp:list-item --> | ||
| <li>Get a free tote bag.</li> | ||
| <!-- /wp:list-item --> | ||
|
|
||
| <!-- wp:list-item --> | ||
| <li>An elegant addition of home decor collection.</li> | ||
| <!-- /wp:list-item --> | ||
|
|
||
| <!-- wp:list-item --> | ||
| <li>Join our forums.</li> | ||
| <!-- /wp:list-item --> | ||
| </ul> | ||
| <!-- /wp:list --> | ||
|
|
||
| <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> | ||
| <div class="wp-block-buttons"> | ||
| <!-- wp:button {"width":100} --> | ||
| <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Join</a></div> | ||
| <!-- /wp:button --> | ||
| </div> | ||
| <!-- /wp:buttons --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
|
|
||
| <!-- wp:column {"width":"9%"} --> | ||
| <div class="wp-block-column" style="flex-basis:9%"> | ||
| <!-- 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 --> | ||
| </div> | ||
| <!-- /wp:column --> | ||
| </div> | ||
| <!-- /wp:columns --> | ||
| </div> | ||
| <!-- /wp:group --> | ||
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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This text color needs to be removed to make it consistent with the second pricing option and to make it work with the section styles.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for reviewing, Carolina!
I followed the design, where that particular color is used for that element
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It does not work with the style variations:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it does not look well. We may want to update the "secondary" in some variations, or not use it in this pattern. I'll defer this to @beafialho
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you! We can use the Primary color on the 0€