[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Events, 3 columns with event images and titles
   4   * Slug: twentytwentyfive/event-3-col
   5   * Categories: banner
   6   * Description: A header with title and text and three columns that show 3 events with their images and titles.
   7   * Keywords: events, columns, images
   8   *
   9   * @package WordPress
  10   * @subpackage Twenty_Twenty_Five
  11   * @since Twenty Twenty-Five 1.0
  12   */
  13  
  14  ?>
  15  <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
  16  <div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
  17      <!-- wp:group {"align":"wide","layout":{"type":"constrained","justifyContent":"left"}} -->
  18      <div class="wp-block-group alignwide">
  19          <!-- wp:heading {"fontSize":"x-large"} -->
  20          <h2 class="wp-block-heading has-x-large-font-size"><?php esc_html_e( 'Events', 'twentytwentyfive' ); ?></h2>
  21          <!-- /wp:heading -->
  22  
  23          <!-- wp:paragraph -->
  24          <p><?php esc_html_e( 'These are some of the upcoming events.', 'twentytwentyfive' ); ?></p>
  25          <!-- /wp:paragraph -->
  26      </div>
  27      <!-- /wp:group -->
  28  
  29      <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0","left":"var:preset|spacing|50"},"padding":{"top":"0","bottom":"0"}}}} -->
  30      <div class="wp-block-columns alignwide" style="padding-top:0;padding-bottom:0">
  31          <!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|70"},"blockGap":"0"}}} -->
  32          <div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--70)">
  33              <!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
  34              <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/ruins-image.webp' ); ?>" alt="<?php esc_attr_e( 'Event image', 'twentytwentyfive' ); ?>"/></figure>
  35              <!-- /wp:image -->
  36  
  37              <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
  38              <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30)">
  39                  <!-- wp:heading {"level":3,"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}}} -->
  40                  <h3 class="wp-block-heading" style="padding-top:var(--wp--preset--spacing--20)"><?php esc_html_e( 'Tell your story', 'twentytwentyfive' ); ?></h3>
  41                  <!-- /wp:heading -->
  42  
  43                  <!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-4"}}}},"textColor":"accent-4","fontSize":"medium"} -->
  44                  <p class="has-accent-4-color has-text-color has-link-color has-medium-font-size"><?php echo esc_html_x( 'Mon, Jan 1', 'Example event date in pattern.', 'twentytwentyfive' ); ?></p>
  45                  <!-- /wp:paragraph -->
  46              </div>
  47              <!-- /wp:group -->
  48  
  49              <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"}}}} -->
  50              <p style="padding-top:var(--wp--preset--spacing--40)"><a href="#"><?php esc_html_e( 'Event details', 'twentytwentyfive' ); ?></a></p>
  51              <!-- /wp:paragraph -->
  52          </div>
  53          <!-- /wp:column -->
  54  
  55          <!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|70"},"blockGap":"0"}}} -->
  56          <div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--70)">
  57              <!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
  58              <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/ruins-image.webp' ); ?>" alt="<?php esc_attr_e( 'Event image', 'twentytwentyfive' ); ?>"/></figure>
  59              <!-- /wp:image -->
  60  
  61              <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
  62              <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30)">
  63                  <!-- wp:heading {"level":3,"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}}} -->
  64                  <h3 class="wp-block-heading" style="padding-top:var(--wp--preset--spacing--20)"><?php esc_html_e( 'Tell your story', 'twentytwentyfive' ); ?></h3>
  65                  <!-- /wp:heading -->
  66  
  67                  <!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-4"}}}},"textColor":"accent-4","fontSize":"medium"} -->
  68                  <p class="has-accent-4-color has-text-color has-link-color has-medium-font-size"><?php echo esc_html_x( 'Mon, Jan 1', 'Example event date in pattern.', 'twentytwentyfive' ); ?></p>
  69                  <!-- /wp:paragraph -->
  70              </div>
  71              <!-- /wp:group -->
  72  
  73              <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"}}}} -->
  74              <p style="padding-top:var(--wp--preset--spacing--40)"><a href="#"><?php esc_html_e( 'Event details', 'twentytwentyfive' ); ?></a></p>
  75              <!-- /wp:paragraph -->
  76          </div>
  77          <!-- /wp:column -->
  78  
  79          <!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|70"},"blockGap":"0"}}} -->
  80          <div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--70)">
  81              <!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
  82              <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/ruins-image.webp' ); ?>" alt="<?php esc_attr_e( 'Event image', 'twentytwentyfive' ); ?>"/></figure>
  83              <!-- /wp:image -->
  84  
  85              <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
  86              <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30)">
  87                  <!-- wp:heading {"level":3,"style":{"spacing":{"padding":{"top":"var:preset|spacing|20"}}}} -->
  88                  <h3 class="wp-block-heading" style="padding-top:var(--wp--preset--spacing--20)"><?php esc_html_e( 'Tell your story', 'twentytwentyfive' ); ?></h3>
  89                  <!-- /wp:heading -->
  90  
  91                  <!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-4"}}}},"textColor":"accent-4","fontSize":"medium"} -->
  92                  <p class="has-accent-4-color has-text-color has-link-color has-medium-font-size"><?php echo esc_html_x( 'Mon, Jan 1', 'Example event date in pattern.', 'twentytwentyfive' ); ?></p>
  93                  <!-- /wp:paragraph -->
  94              </div>
  95              <!-- /wp:group -->
  96  
  97              <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"}}}} -->
  98              <p style="padding-top:var(--wp--preset--spacing--40)"><a href="#"><?php esc_html_e( 'Event details', 'twentytwentyfive' ); ?></a></p>
  99              <!-- /wp:paragraph -->
 100          </div>
 101          <!-- /wp:column -->
 102      </div>
 103      <!-- /wp:columns -->
 104  </div>
 105  <!-- /wp:group -->