Advertisement - Core Styles Documentation

The Core framework contains an advertisement solution that will work with responsive and centered page layouts.

Use the buttons to toggle the demo ad placements on this page to see how they affect the page layout. Zoom or resize your browser window to see how the ads will look on different display sizes.

Implementation
Toggling Ads
Loading Ads
A Note on Full-width Pages

Implementation

Ads are placed at the bottom of the page wrapper. The page wrapper, in turn, gets the additional page-wrapper--with-ads class, which will reserve the necessary space to the top and right.

Placement of advertisement containers

<body>
  <div class="page-wrapper page-wrapper--with-ads">
    <!--
      Lots and lots of other interesting content here
    -->
    <div class="ad-superbanner"></div>
    <div class="ad-skyscraper--right"></div>
    <div class="ad-skyscraper--left"></div>
  </div>
</body>

Toggling Ads

All ad containers are by default hidden. They are shown only if the <body> element has the respective activation class.

Super Banner: has-ad-superbanner
Skyscraper (Right): has-ad-skyscraper--right
Skyscraper (Left): has-ad-skyscraper--left

The Hockey Stick advertisement requires both the super banner and the right skyscraper to be visible.

Hidden and un-hidden advertisement placements

<body class="has-ad-superbanner">
  <div class="page-wrapper page-wrapper--with-ads">
    <div class="ad-superbanner">
      <!-- This placement was loaded and is being shown because of the .has-ad-superbanner class on the body. -->
      <span class="some-ad">This product is so great, we won't even try to keep you from giving us money for it!</span>
    </div>
    <div class="ad-skyscraper--right">
      <!-- This one's empty, but that's okay because nobody can see it, and no space is being reserved for it. -->
    </div>
    <div class="ad-skyscraper--left">
      <!-- Same here. -->
    </div>
  </div>
</body>

Generally, if you are unsure whether an advertisement is actually booked, you should always apply the appropriate classes for all potential advertisements regardless.

Reserving unused space when no ad is booked is generally preferable to having the page jump vertically and horizontally after the initial rendering has finished.

Loading Ads

For the time being, assembling and executing the actual ad server requests stays up to each application. If you show the advertisement containers by default, you can continue to use your regular ad script without any further changes.

If you want to show the ad containers based on whether a banner was actually loaded, you will need to apply the respective activation class to the body element on successful retrieval of a banner.

A Note on Full-width Pages

Note that these advertisement layouts work only with the default – that is, the centered – page layout. It is not supported in pages using the full-width layout.