Homepage Example

Sample Home Page show card php:

<!-- Show Card -->
      <div class="card mb-3 h-100 tessera-show-card" id="<?php echo get_the_ID() ?>" data-venue="<?php echo get_field('venue')->post_title ?>" data-month="<?php echo $formattedMonthNum ?>" data-tags="">

        <!-- Card Header -->
        <div class="card-header">
          <div class="tessera-has-inventory">
            <?php if( get_field('special_notice') ): ?><div class="special_notice"><?php the_field('special_notice'); ?></div><?php endif; ?>
            <a href="<?php if ($allLinksExternal == true){ echo $externalLink; } else { echo get_permalink(); } ?>"><img class="card-img-top" src="<?php echo $showImageURL ?>"></a>
          </div>
        </div>

        <!-- Card Body -->
        <div class="card-body d-flex flex-column">
          <div class="tessera-date">
            <span class="date"><?php echo $formattedDate ?></span>
          </div>
          <div class="tessera-primaryBandAppend mt-3"><?php if (the_field('primary_band_append') != '') { ?><div class="tessera-primaryBandAppend"><?php echo the_field('primary_band_append') ?></div><?php } ?></div>
          <a href="<?php if ($allLinksExternal == true){ echo $externalLink; } else { echo get_permalink(); } ?>"><h4 class="card-title fw-bold my-1"><?php echo $headlinersString ?></h4></a>
          <?php if ($additionalArtistsString != '') { ?><div class="tessera-additionalArtists"><?php echo $additionalArtistsString ?></div><?php } ?>

          <div class="row mt-auto align-items-center tessera-buttons-container">
            <div class="col-10">
              <div class="buy-now" data-sku-id="" data-sku-count="" data-uses-seating-chart=""><?php if($externalLink != ''){ ?> <a target="_blank" href="<?php echo $externalLink ?>"><?php echo $externalLinkButtonText ?><i class="bi bi-box-arrow-up-right external-link-icon"></i></a> <?php } else { echo $buyNowButtonText; } ?></div>
            </div>
            <div class="col-2">
              <a href="<?php if ($allLinksExternal == true){ echo $externalLink; } else { echo get_permalink(); } ?>" class="more-info text-end"><i class="bi bi-info-circle"></i></a>
            </div>
          </div>
        </div>

        <!-- Card Footer -->
        <div class="card-footer text-start">
          <div class="tessera-venue fw-bold"> <i class="bi bi-geo-alt-fill mr-1"></i> <?php echo get_field('venue')->post_title ?> <?php if (get_field('genre') != '') { ?> <i class="bi bi-dot"></i> <?php echo the_field('genre') ?><?php } ?></div>
          <div class="tessera-showTimes">Doors <?php echo $formattedDoorTime ?> | Show <?php echo $formattedTime ?></div>
        </div>

      <!-- End Show Card   -->
      </div>

Example HTML output:

<!-- Show Card -->
      <div class="card mb-3 h-100 tessera-show-card" id="18" data-venue="EXAMPLE VENUE" data-month="03" data-tags="">

        <!-- Card Header -->
        <div class="card-header">
          <div class="tessera-has-inventory">
            <div class="special_notice">Special Notice</div>            <a href="https://demo.tessera-tickets.com/shows/the-yeah-yeah-yeahs/"><img class="card-img-top lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://demo.tessera-tickets.com/wp-content/uploads/2022/02/Karen-O-1024x512.jpg"></a>
          </div>
        </div>

        <!-- Card Body -->
        <div class="card-body d-flex flex-column">
          <div class="tessera-date">
            <span class="date">Mar 16</span>
          </div>
          <div class="tessera-primaryBandAppend mt-3"></div>
          <a href="https://demo.tessera-tickets.com/shows/the-yeah-yeah-yeahs/"><h4 class="card-title fw-bold my-1">Yeah Yeah Yeahs</h4></a>
          <div class="tessera-additionalArtists">Misfits</div>
          <div class="row mt-auto align-items-center tessera-buttons-container">
            <div class="col-10">
              <div class="buy-now" data-sku-id="" data-sku-count="" data-uses-seating-chart="">Buy Now</div>
            </div>
            <div class="col-2">
              <a href="https://demo.tessera-tickets.com/shows/the-yeah-yeah-yeahs/" class="more-info text-end"><i class="bi bi-info-circle"></i></a>
            </div>
          </div>
        </div>

        <!-- Card Footer -->
        <div class="card-footer text-start">
          <div class="tessera-venue fw-bold"> <i class="bi bi-geo-alt-fill mr-1"></i> Hey Nonny  <i class="bi bi-dot"></i> Alternative</div>
          <div class="tessera-showTimes">Doors 5PM | Show 12AM</div>
        </div>

      <!-- End Show Card   -->
      </div>