Close

Official Destination Website

Whistler Summer Activities

Tourism Whistler Widget Guide

Basic Widget

Base model widget.

<div class="tw-widget"></div>

Hero Widget

1 widget of this type per page...adds custom mobile widget.

<div class="hero">
<div class="inner">
<img src="//www.whistler.com/images/header/summer-activities-1.jpg" alt="Whistler Summer Activities">
<div class="hero__overlay">
<div class="tw-widget hero"></div>
</div>
</div>
</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="//www.whistler.com/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

Test Custom Widget