Tourism Whistler Widget Guide
Header Widget
1 widget of this type per page...adds custom mobile widget.
<div class="hero">
<div class="tw-widget home"></div>
<img src="//cdn.whistler.com/s3/images/header/summer-activities-1.jpg" alt="Whistler Summer Activities">
</div>
<div class="tw-widget home"></div>
<img src="//cdn.whistler.com/s3/images/header/summer-activities-1.jpg" alt="Whistler Summer Activities">
</div>
Basic Widget
Base model widget.
<div class="tw-widget"></div>
Inline Widget
Linear widget that breaks down to base model gracefully.
<div class="tw-widget inline"></div>
Tile Widget
<div class="row">
<div class="third">
<div class="tile tile--package tile--no-link">
<img src="//cdn.whistler.com/s3/images/uc/ski-rentals.jpg" alt="Ski Butlers Rental Delivery Service">
<h3 class="tile__title">Ski Butlers<br>Save <b>10%</b> on Rental Delivery Service</h3>
<p>Save 10% off all rental deliveries when booked 7+ days in advance.</p>
<div class="tw-widget tile" data-type="rental" data-search="Search" data-simple="true" ></div>
</div>
</div>
</div>
<div class="third">
<div class="tile tile--package tile--no-link">
<img src="//cdn.whistler.com/s3/images/uc/ski-rentals.jpg" alt="Ski Butlers Rental Delivery Service">
<h3 class="tile__title">Ski Butlers<br>Save <b>10%</b> on Rental Delivery Service</h3>
<p>Save 10% off all rental deliveries when booked 7+ days in advance.</p>
<div class="tw-widget tile" data-type="rental" data-search="Search" data-simple="true" ></div>
</div>
</div>
</div>
Anchor Widget
On demand widget, can choose between base, inline, and tile.
<a class="tw-widget-link" ><b>From $149 per person</b></a>
Widget Options
You can change the style and type of widget by adding these data-attributes to the widget. Click here to view
Widget Search Parameters
You can pass custom search parameters by adding these data-attributes to the widget. Click here to view