[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Pricing
   4   * Slug: twentytwentyfour/cta-pricing
   5   * Categories: call-to-action, services
   6   * Viewport width: 1400
   7   * Description: A pricing section with a title, a paragraph and three pricing levels.
   8   *
   9   * @package WordPress
  10   * @subpackage Twenty_Twenty_Four
  11   * @since Twenty Twenty-Four 1.0
  12   */
  13  
  14  ?>
  15  
  16  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Pricing Table', 'Name for the pricing pattern', 'twentytwentyfour' ); ?>"},"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
  17  <div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;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)">
  18      <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}},"border":{"radius":"16px"}},"backgroundColor":"base-2","layout":{"type":"constrained"}} -->
  19      <div class="wp-block-group alignwide has-base-2-background-color has-background" style="border-radius:16px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)">
  20          <!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  21          <div class="wp-block-group alignwide">
  22              <!-- wp:heading {"textAlign":"center"} -->
  23              <h2 class="wp-block-heading has-text-align-center"><?php echo esc_html_x( 'Our Services', 'Sample heading for pricing pattern', 'twentytwentyfour' ); ?></h2>
  24              <!-- /wp:heading -->
  25  
  26              <!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.125rem"},"spacing":{"margin":{"top":"var:preset|spacing|10"}}}} -->
  27              <p class="has-text-align-center" style="margin-top:var(--wp--preset--spacing--10);font-size:1.125rem"><?php echo esc_html_x( 'We offer flexible options, which you can adapt to the different needs of each project.', 'Sample description for a pricing table', 'twentytwentyfour' ); ?></p>
  28              <!-- /wp:paragraph -->
  29          </div>
  30          <!-- /wp:group -->
  31  
  32          <!-- wp:spacer {"height":"var:preset|spacing|30"} -->
  33          <div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
  34          <!-- /wp:spacer -->
  35  
  36          <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|20"}}}} -->
  37          <div class="wp-block-columns alignwide">
  38              <!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast-3","width":"1px"}}}} -->
  39              <div class="wp-block-column" style="border-top-color:var(--wp--preset--color--contrast-3);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
  40                  <!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"padding":{"top":"1px"}}},"fontSize":"medium"} -->
  41                  <h4 class="wp-block-heading has-text-align-center has-medium-font-size" style="padding-top:1px">
  42                      <em><?php echo esc_html_x( 'Free', 'Sample heading for the first pricing level', 'twentytwentyfour' ); ?></em>
  43                  </h4>
  44                  <!-- /wp:heading -->
  45  
  46                  <!-- wp:heading {"textAlign":"center","level":5,"fontSize":"x-large"} -->
  47                  <h5 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php echo esc_html_x( '$0', 'Sample price for the first pricing level', 'twentytwentyfour' ); ?></h5>
  48                  <!-- /wp:heading -->
  49  
  50                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
  51                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
  52                  </div>
  53                  <!-- /wp:spacer -->
  54  
  55                  <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  56                  <div class="wp-block-group">
  57                      <!-- wp:paragraph {"align":"center"} -->
  58                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Access to 5 exclusive <em>Études Articles</em> per month.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
  59                      <!-- /wp:paragraph -->
  60  
  61                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
  62                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
  63                      <!-- /wp:separator -->
  64  
  65                      <!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2"} -->
  66                      <p class="has-text-align-center has-contrast-2-color has-text-color has-link-color">
  67                          <s><?php echo esc_html_x( 'Weekly print edition.', 'Feature for pricing level', 'twentytwentyfour' ); ?></s>
  68                      </p>
  69                      <!-- /wp:paragraph -->
  70  
  71                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
  72                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
  73                      <!-- /wp:separator -->
  74  
  75                      <!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2"} -->
  76                      <p class="has-text-align-center has-contrast-2-color has-text-color has-link-color">
  77                          <s><?php echo wp_kses_post( _x( 'Exclusive access to the <em>Études</em> app for iOS and Android.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></s>
  78                      </p>
  79                      <!-- /wp:paragraph -->
  80                  </div>
  81                  <!-- /wp:group -->
  82  
  83                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
  84                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
  85                  </div>
  86                  <!-- /wp:spacer -->
  87  
  88                  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  89                  <div class="wp-block-buttons">
  90                      <!-- wp:button {"width":100,"className":"is-style-outline"} -->
  91                      <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline">
  92                          <a class="wp-block-button__link wp-element-button"><?php echo esc_html_x( 'Subscribe', 'Button text for the first pricing level', 'twentytwentyfour' ); ?></a>
  93                      </div>
  94                      <!-- /wp:button -->
  95                  </div>
  96                  <!-- /wp:buttons -->
  97              </div>
  98              <!-- /wp:column -->
  99  
 100              <!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast","width":"2px"}}}} -->
 101              <div class="wp-block-column" style="border-top-color:var(--wp--preset--color--contrast);border-top-width:2px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
 102                  <!-- wp:heading {"textAlign":"center","level":4} -->
 103                  <h4 class="wp-block-heading has-text-align-center">
 104                      <em><?php echo esc_html_x( 'Connoisseur', 'Sample heading for the second pricing level', 'twentytwentyfour' ); ?></em>
 105                  </h4>
 106                  <!-- /wp:heading -->
 107  
 108                  <!-- wp:heading {"textAlign":"center","level":5,"fontSize":"x-large"} -->
 109                  <h5 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php echo esc_html_x( '$12', 'Sample price for the second pricing level', 'twentytwentyfour' ); ?></h5>
 110                  <!-- /wp:heading -->
 111  
 112                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
 113                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
 114                  </div>
 115                  <!-- /wp:spacer -->
 116  
 117                  <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 118                  <div class="wp-block-group">
 119                      <!-- wp:paragraph {"align":"center"} -->
 120                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Access to 20 exclusive <em>Études Articles</em> per month.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 121                      <!-- /wp:paragraph -->
 122  
 123                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 124                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 125                      <!-- /wp:separator -->
 126  
 127                      <!-- wp:paragraph {"align":"center"} -->
 128                      <p class="has-text-align-center"><?php echo esc_html_x( 'Weekly print edition.', 'Feature for pricing level', 'twentytwentyfour' ); ?></p>
 129                      <!-- /wp:paragraph -->
 130  
 131                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 132                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 133                      <!-- /wp:separator -->
 134  
 135                      <!-- wp:paragraph {"align":"center"} -->
 136                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Exclusive access to the <em>Études</em> app for iOS and Android.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 137                      <!-- /wp:paragraph -->
 138                  </div>
 139                  <!-- /wp:group -->
 140  
 141                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
 142                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
 143                  </div>
 144                  <!-- /wp:spacer -->
 145  
 146                  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
 147                  <div class="wp-block-buttons">
 148                      <!-- wp:button {"width":100,"className":"is-style-fill"} -->
 149                      <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill">
 150                          <a class="wp-block-button__link wp-element-button"><?php echo esc_html_x( 'Subscribe', 'Button text for the second pricing level', 'twentytwentyfour' ); ?></a>
 151                      </div>
 152                      <!-- /wp:button -->
 153                  </div>
 154                  <!-- /wp:buttons -->
 155              </div>
 156              <!-- /wp:column -->
 157  
 158              <!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast-3","width":"1px"}}}} -->
 159              <div class="wp-block-column" style="border-top-color:var(--wp--preset--color--contrast-3);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--30)">
 160                  <!-- wp:heading {"textAlign":"center","level":4,"style":{"spacing":{"padding":{"top":"1px"}}},"fontSize":"medium"} -->
 161                  <h4 class="wp-block-heading has-text-align-center has-medium-font-size" style="padding-top:1px">
 162                      <em><?php echo esc_html_x( 'Expert', 'Sample heading for the third pricing level', 'twentytwentyfour' ); ?></em>
 163                  </h4>
 164                  <!-- /wp:heading -->
 165  
 166                  <!-- wp:heading {"textAlign":"center","level":5,"fontSize":"x-large"} -->
 167                  <h5 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php echo esc_html_x( '$28', 'Sample price for the third pricing level', 'twentytwentyfour' ); ?></h5>
 168                  <!-- /wp:heading -->
 169  
 170                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
 171                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
 172                  </div>
 173                  <!-- /wp:spacer -->
 174  
 175                  <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 176                  <div class="wp-block-group">
 177                      <!-- wp:paragraph {"align":"center"} -->
 178                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Exclusive, unlimited access to <em>Études Articles</em>.', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 179                      <!-- /wp:paragraph -->
 180  
 181                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 182                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 183                      <!-- /wp:separator -->
 184  
 185                      <!-- wp:paragraph {"align":"center"} -->
 186                      <p class="has-text-align-center"><?php echo esc_html_x( 'Weekly print edition.', 'Feature for pricing level', 'twentytwentyfour' ); ?></p>
 187                      <!-- /wp:paragraph -->
 188  
 189                      <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 190                      <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" />
 191                      <!-- /wp:separator -->
 192  
 193                      <!-- wp:paragraph {"align":"center"} -->
 194                      <p class="has-text-align-center"><?php echo wp_kses_post( _x( 'Exclusive access to the <em>Études</em> app for iOS and Android', 'Feature for pricing level', 'twentytwentyfour' ) ); ?></p>
 195                      <!-- /wp:paragraph -->
 196                  </div>
 197                  <!-- /wp:group -->
 198  
 199                  <!-- wp:spacer {"height":"var:preset|spacing|10"} -->
 200                  <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer">
 201                  </div>
 202                  <!-- /wp:spacer -->
 203  
 204                  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
 205                  <div class="wp-block-buttons">
 206                      <!-- wp:button {"width":100,"className":"is-style-outline"} -->
 207                      <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline">
 208                          <a class="wp-block-button__link wp-element-button"><?php echo esc_html_x( 'Subscribe', 'Button text for the third pricing level', 'twentytwentyfour' ); ?></a>
 209                      </div>
 210                      <!-- /wp:button -->
 211                  </div>
 212                  <!-- /wp:buttons -->
 213              </div>
 214              <!-- /wp:column -->
 215          </div>
 216          <!-- /wp:columns -->
 217      </div>
 218      <!-- /wp:group -->
 219  </div>
 220  <!-- /wp:group -->