TheaterMania Component Library

Ads: 300x250 

<div class="ad-container">
    <a href="#">
        <picture>
            <source srcset="/assets/images/ads/300x250.jpg" media="(min-width: 769px)">
            <img src="/assets/images/ads/300x250.jpg" alt="Ad for Noel Coward&#x27;s Present Laughter starring Kevin Kline with badge displaying NY Times Critic&#x27;s Pick" />
        </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": "300x250.jpg",
  "imageSmall": "300x250.jpg",
  "image-alt": "Ad for Noel Coward's Present Laughter starring Kevin Kline with badge displaying NY Times Critic's Pick"
}
  • 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.