POLITICO Interactive Style

<Ad />

<Ad />

Import

import Ad from '@politico/interactive-style/src/components/Ad';
// or
import { Ad } from '@politico/interactive-style';

Props

Name	Type	Default	Description
type	'cube''supercube''leaderboard'	'supercube'	The type of ad to display
observationThreshold	number	500	How long the ad space must be observed before it loads (in ms)
rootMargin	string	'700px'	How close a user needs to get to the ad space before the observaton starts

CSS

Name	Global Class	Description
root	PibAd-root	Styles applied to root element that will have an ad mounted in it
container	PibAd-container	Styles applied to container div
disclaimer	PibAd-disclaimer	Styles applied to "Advertisement" disclaimer text

Demos

Other Ad Types

By default the "supercube" type is used for ads. You can also use the "cube" and "leaderboard" designation. Sometimes supercubes come through as cubes. That's okay.

<div>
  <Ad type="cube"/>
  <hr />
  <Ad type="leaderboard"/>
</div>
<div>
  <Ad type="cube"/>
  <hr />
  <Ad type="leaderboard"/>
</div>

Observation Threshold

By default, the space for an ad must be observed for 0.01 seconds before the ad is mounted on to the page. You can change this threshold by supplying an observationThreshold in milliseconds. You can also set it to a falsy value to disable this feature and have it mount on page load. Notice the first ad will take longer to load than the others, but the second one will likely already be loaded by the time you read this.

<div>
  <Ad observationThreshold={5000} />
  <hr />
  <Ad observationThreshold={null} />
</div>
<div>
  <Ad observationThreshold={5000} />
  <hr />
  <Ad observationThreshold={null} />
</div>