TheaterMania Component Library

Ads: 320x50 

<div class="ad-container">
    <a href="#">
        <picture>
            <source srcset="/assets/images/ads/320x50.jpg" media="(min-width: 769px)">
            <img src="/assets/images/ads/320x50.jpg" alt="Text ad for Dear Evan Hansen, a new musical on a blue background" />
        </picture>
    </a>
</div>
 
<div class="ad-container{{#if class}} {{class}}{{/if}}">
  <a href="#">
    <picture>
      <source srcset="/assets/images/ads/{{image}}" media="(min-width: {{media-size}})">
      <img src="/assets/images/ads/{{imageSmall}}" alt="{{image-alt}}" />
    </picture>
  </a>
</div>
 
{
  "media-size": "769px",
  "image": "320x50.jpg",
  "imageSmall": "320x50.jpg",
  "image-alt": "Text ad for Dear Evan Hansen, a new musical on a blue background"
}
  • Content: 
    .ad-container {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}

.ad-container--billboard {
  margin-bottom: 0.25rem;
}

.ad-container--footer {
  margin-bottom: 0;
  padding-bottom: 2.5rem;
}
  • URL: /components/raw/ads/Ads.scss
  • Filesystem Path: src/components/01-Units/Ads/Ads.scss
  • Size: 211 Bytes

Ads utilize the picture element to illustrate ad changes across breakpoints. The ads are based on provided sizes. The ads and the associated picture elements are for presentational/demonstration purposes only.

The persistent mobile ad and wallpaper takeover ad rely on additional styling and can be seen here: persistent mobile at mobile sizes, and wallpaper takeover.