Close

Official Destination Website

Tourism Whistler Styleguide

A comprehensive list of all the elements and components available on whistler.com


Colour Palette

Tourism Whistler brand colours and their corresponding hex/rgb codes and sass variable names.

Primary

Hex: #009fab

RGBa: (0, 159, 71, 1)

Sass Variable $turquoise

Secondary

Hex: #0c223e

RGBa: (12, 34, 62, 1)

Sass Variable $blue

Highlight

Hex: #c50e38

RGBa: (197, 14, 56, 1)

Sass Variable $red

Booking

Hex: #ffcc00

RGBa: (255, 204, 0, 1)

Sass Variable $yellow

Primary Highlight

Hex: #00adbb

RGBa: (0, 173, 187, 0.5)

Sass Variable $turquoiseHover

Light Blue

Hex: #3d4e65

RGBa: (61, 78, 101, 1)

Sass Variable $lightBlue

Grey

Hex: #6d7a8b

RGBa: (109, 122, 139, 1)

Sass Variable $grey

Light Grey

Hex: #e6e8eb

RGBa: (230, 232, 235, 1)

Sass Variable $lightGrey


Text

Headings

Text added within a <b> tag wil be highlighted.

Heading Text h1

Heading Text h2

Heading Text h3

Heading Text h4

Heading Text h5
Heading Text h6
View Code </>
<h1>Heading Text <b>h1</b></h1>
<h2>Heading Text <b>h2</b></h2>
<h3>Heading Text <b>h3</b></h3>
<h4>Heading Text <b>h4</b></h4>
<h5>Heading Text <b>h5</b></h5>
<h6>Heading Text <b>h6</b></h6>

All heading sizes are available as reusable classes, meaning they can be added to any heading thus changing the appearance of a heading whilst keeping the semantics.

Heading Text h1

Heading Text h2

Heading Text h3

Heading Text h4

Heading Text h5
Heading Text h6
View Code </>
<h1 class="h6">Heading Text <b>h1</b></h1>
<h2 class="h5">Heading Text <b>h2</b></h2>
<h3 class="h4">Heading Text <b>h3</b></h3>
<h4 class="h3">Heading Text <b>h4</b></h4>
<h5 class="h2">Heading Text <b>h5</b></h5>
<h6 class="h1">Heading Text <b>h6</b></h6>

Lists

Unordered List

View Code </>
<ul>
  <li><a href="https://www.whistler.com/resources/pdf/maps/whistler_hiking_map.pdf">List Item One</a></li>
  <li>List Item Two</li>
  <li><a href="./">Link Item Three</a></li>
</ul>

Ordered List

  1. List Item One
  2. Link Item Two
  3. List Item Three
View Code </>
<ol>
  <li>List Item One</li>
  <li><a href="./">Link Item Two</a></li>
  <li>List Item Three</li>
</ol>

Text Formatting

HTML has a raft of different text-level tags we can use within our text. Some have completely changed from previous versions of HTML while some changes are subtle. These descriptions have been copied wholesale or paraphrased from the Official W3C Specification.

<em>

The <em> element represents stress emphasis of its contents. The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.

<strong>

The <strong> element represents strong importance, seriousness, or urgency for its contents. It can be used to mark up a warning or caution notice and can be used to denote contents that the user needs to see sooner than other parts of the document.

<small>

The <small> element represents side comments such as small print. Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.

<s>

The <s> element represents contents that are no longer accurate or no longer relevant. The <s> element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the <del> element.

<i>

The <i> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

<b>

The <b> element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

<u>

The <u> element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being misspelt.

Blockquotes

The <blockquote> element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Content inside a <blockquote> other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

Peak chair will remain closed for the remainder of today due to high winds.

View Code </>
<blockquote>
  <p>Peak chair will remain closed for the remainder of today due to high winds.</p>
  <footer>
    <cite><a href="https://www.whistlerblackcomb.com" rel="external">Whistler Blackcomb</a></cite>
  </footer>
</blockquote>

Helper Classes

These classes are ideal for situations where specific styling is required but adding extra CSS would be overkill.

Text Alignment

Adding these to an element (preferably a <p> tag) will adust the text alignment accordingly.

Left aligned text

Left justified text

Right aligned text

Mice Type

View Code </>
<p class="text--left">Left aligned text</p>
<p class="text--center">Left justified text</p>
<p class="text--right">Right aligned text</p>
<p class="mice-type">Mice Type</p>

Hiding Content

Elements can be hidden (or forced to show if already hidden).

This content will be hidden.

This content will be unhidden.

View Code </>
<p class="hide">This content will be hidden.</p>
<p class="show">This content will be unhidden.</p>

Buttons

The .button class can be added to the following elements.

Default

Link button

View Code </>
<button class="button">Button</button>
<button type="submit" class="button">Submit button</button>
<a href="./" class="button">Link button</a>
<input type="button" value="Input button" class="button">
<input type="submit" value="Input submit button" class="button">

Colour Variations

The default colour scheme can be overridden in favour of the following colours. These can be applied to all the above elements.

Primary Blue Red Grey Light Grey

View Code </>
<a href="./" class="button button--turquoise">Primary</a>
<a href="./" class="button button--blue">Blue</a>
<a href="./" class="button button--red">Red</a>
<a href="./" class="button button--grey">Grey</a>
<a href="./" class="button button--light-grey">Light Grey</a>

Size Variations

Much the same as the colours, these sizes can be use in conjunction with all elements and/or colours.

Small Default Medium Large Extra Large

View Code </>
<a href="./" class="button button--small">Small</a>
<a href="./" class="button">Default</a>
<a href="./" class="button button--medium">Medium</a>
<a href="./" class="button button--large">Large</a>
<a href="./" class="button button--extra-large">Extra Large</a>

Tables

Default

Operating Dates Hours Mountains PEAK 2 PEAK Gondola
Nov 16 - Nov 28 8:30AM - 3:00 PM Whistler Closed
Nov 16 - Nov 28 8:30AM - 3:00 PM Whistler Closed
Nov 16 - Nov 28 8:30AM - 3:00 PM Whistler Closed
View Code </>
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Operating Dates</th>
        <th>Hours</th>
        <th>Mountains</th>
        <th>PEAK 2 PEAK Gondola</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Nov 16 - Nov 28</td>
        <td>8:30AM - 3:00 PM</td>
        <td>Whistler</td>
        <td>Closed</td>
      </tr>
      <tr>
        <td>Nov 16 - Nov 28</td>
        <td>8:30AM - 3:00 PM</td>
        <td>Whistler</td>
        <td>Closed</td>
      </tr>
      <tr>
        <td>Nov 16 - Nov 28</td>
        <td>8:30AM - 3:00 PM</td>
        <td>Whistler</td>
        <td>Closed</td>
      </tr>
    </tbody>
  </table>
  <p class="table__footer">* Please note all dates, hours and chairlift operations are weather dependent and subject to change. Please confirm with Whistler Blackcomb Guest Relations.</p>
</div>

Definition List

Lift Serviced Vertical
1,500 m / 5,000 ft (from the Peak) Vertical 1,175 m / 3,855 ft (unguided from top of the Whistler Village Gondola)
Top Elevation
1,850 m / 6069 ft (Unguided)
Terrain Type
17% beginner, 23% intermediate, 60% advanced
Total Trails
57
Lift Access and Capacity

Whistler Village Gondola - 450 riders/hr

Fitzsimmons Express Chair - 1,300 riders/hr

Garbanzo Chair - 1,300 riders

View Code </>
<dl class="table">
  <dt>Lift Serviced Vertical</dt>
  <dd>1,500 m / 5,000 ft (from the Peak) Vertical 1,175 m / 3,855 ft (unguided from top of the Whistler Village Gondola)</dd>
  <dt>Top Elevation</dt>
  <dd>1,850 m / 6069 ft (Unguided)</dd>
  <dt>Terrain Type</dt>
  <dd>17% beginner, 23% intermediate, 60% advanced</dd>
  <dt>Total Trails</dt>
  <dd>57</dd>
  <dt>Lift Access and Capacity</dt>
  <dd>
    <p>Whistler Village Gondola - 450 riders/hr</p>
    <p>Fitzsimmons Express Chair - 1,300 riders/hr</p>
    <p>Garbanzo Chair - 1,300 riders</p>
  </dd>
</dl>

Block List

Used here to display event information, but these can theoretically be used to display any text content.

View Code </>
<div class="row">
  <div class="half">
    <h2>Upcoming Events</h2>
    <div class="block-list">
      <a href="./" class="block__link">Events Calendar</a>
      <ul>
        <li>
          <h3>January 12</h3>
          <p><a href="./">Biathlon Series Event #1 - Whistler Olympic Park</a></p>
        </li>
        <li>
          <h3>January 18</h3>
          <p><a href="./">Arc'Teryx Deep Winter Photo Challenge - Fairmont Chateau Whistler</a></p>
        </li>
        <li>
          <h3>February 10</h3>
          <p><a href="./">BC Family Day - Whistler</a></p>
        </li>
      </ul>
    </div>
    <!-- /.block-list -->
  </div>
  <!-- /.half -->
  <div class="half">
    <h2>Save The Date</h2>
    <div class="block-list">
      <a href="./" class="block__link">Annual Events</a>
      <ul>
        <li>
          <h3>April 11 - 20</h3>
          <p><a href="./">World Ski & Snowboard Festival - In and around Whistler</a></p>
        </li>
        <li>
          <h3>May 17 - 19</h3>
          <p><a href="./">Victoria Day Long Weekend - Whistler</a></p>
        </li>
        <li>
          <h3>June 21 - 22</h3>
          <p><a href="./">Tough Mudder Whistler - Whistler Olympic Park</a></p>
        </li>
        <li>
          <h3>July 1</h3>
          <p><a href="./">Canada Day - Whistler</a></p>
        </li>
        <li>
          <h3>July 1 - 5</h3>
          <p><a href="./">Vancouver Symphony Orchestra in Whistler - Whistler Village</a></p>
        </li>
      </ul>
    </div>
    <!-- /.block-list -->
  </div>
  <!-- /.half -->
</div>
<!-- /.row -->

Callouts

Used for simple title/text content. They will default to the grey colour, or can be blue with the correct class override.

Upcoming Meetings

Resort Information Trade Show Dec 10.

Important Member Fee Information

The annual Member Assessment billing due date is changing beginning in 2014. The annual assesment fees will now be due March 31 each year and there will be new payment options available to you... more

...




View Code </>
<div class="callout">
  <h3 class="callout__title">Upcoming Meetings</h3>
  <p><a href="/">Resort Information Trade Show</a> Dec 10.</p>
</div>
<!-- /.callout -->
<div class="callout callout--blue">
  <h3 class="callout__title">Important Member Fee Information</h3>
  <p>The annual Member Assessment billing due date is changing beginning in 2014. The annual assesment fees will now be due March 31 each year and there will be new payment options available to you... <a href="/">more</a></p>
</div>
<!-- /.callout -->
<div class="callout callout--turquoise">
  <p>...</p>
</div>
<!-- /.callout -->

Grid

Using the grid is the easiest way to layout any type of content. Using the following classes on an element will give it a certain width: .full, .half, .two-thirds, .third, .quarter, .fifth. Rows are used to group content together, .row

Usually a row will contain the correct number of equal elements (2 halfs, 3 thirds, 4 quarters etc) but they can also be mixed and matched. Using too many will just push onto the next line. The line break inbetween each is a simple <hr> tag.

Grid Examples

Half 1

Half 2

Two Thirds

Third

Third 1

Third 2

Third 3

Quarter 1

Quarter 2

Quarter 3

Quarter 4

Fifth 1

Fifth 2

Fifth 3

Fifth 4

Fifth 5

Sixth 1

Sixth 2

Sixth 3

Sixth 4

Sixth 5

Sixth 6

View Code </>
<div class="row">
  <div class="half">
    <h3>Half 1</h3>
    <img src="/images/placeholders/800x240.gif">
  </div>
  <!-- /.half -->
  <div class="half">
    <h3>Half 2</h3>
    <img src="/images/placeholders/800x240.gif">
  </div>
  <!-- /.half -->
</div>
<!-- /.row -->
<div class="row">
  <div class="two-thirds">
    <h3>Two Thirds </h3>
    <img src="/images/placeholders/800x240.gif">
  </div>
  <!-- /.two-thirds -->
  <div class="third">
    <h3>Third</h3>
    <img src="/images/placeholders/400x240.gif">
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->
<div class="row">
  <div class="third">
    <h3>Third 1</h3>
    <img src="/images/placeholders/400x240.gif">
  </div>
  <!-- /.third -->
  <div class="third">
    <h3>Third 2</h3>
    <img src="/images/placeholders/400x240.gif">
  </div>
  <!-- /.third -->
  <div class="third">
    <h3>Third 3</h3>
    <img src="/images/placeholders/400x240.gif">
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->
<div class="row">
  <div class="quarter">
    <h3>Quarter 1</h3>
    <img src="/images/placeholders/400x240.gif">
  </div>
  <!-- /.quarter -->
  <div class="quarter">
    <h3>Quarter 2</h3>
    <img src="/images/placeholders/400x240.gif">
  </div>
  <!-- /.quarter -->
  <div class="quarter">
    <h3>Quarter 3</h3>
    <img src="/images/placeholders/400x240.gif">
  </div>
  <!-- /.quarter -->
  <div class="quarter">
    <h3>Quarter 4</h3>
    <img src="/images/placeholders/400x240.gif">
  </div>
  <!-- /.quarter -->
</div>
<!-- /.row -->
<div class="row">
  <div class="fifth">
    <h3>Fifth 1</h3>
    <img src="/images/placeholders/250x200.gif">
  </div>
  <!-- /.fifth -->
  <div class="fifth">
    <h3>Fifth 2</h3>
    <img src="/images/placeholders/250x200.gif">
  </div>
  <!-- /.fifth -->
  <div class="fifth">
    <h3>Fifth 3</h3>
    <img src="/images/placeholders/250x200.gif">
  </div>
  <!-- /.fifth -->
  <div class="fifth">
    <h3>Fifth 4</h3>
    <img src="/images/placeholders/250x200.gif">
  </div>
  <!-- /.fifth -->
  <div class="fifth">
    <h3>Fifth 5</h3>
    <img src="/images/placeholders/250x200.gif">
  </div>
  <!-- /.fifth -->
</div>
<!-- /.row -->
<div class="row">
  <div class="sixth">
    <h3>Sixth 1</h3>
    <img src="/images/placeholders/200x200.gif">
  </div>
  <!-- /.sixth -->
  <div class="sixth">
    <h3>Sixth 2</h3>
    <img src="/images/placeholders/200x200.gif">
  </div>
  <!-- /.sixth -->
  <div class="sixth">
    <h3>Sixth 3</h3>
    <img src="/images/placeholders/200x200.gif">
  </div>
  <!-- /.sixth -->
  <div class="sixth">
    <h3>Sixth 4</h3>
    <img src="/images/placeholders/200x200.gif">
  </div>
  <!-- /.sixth -->
  <div class="sixth">
    <h3>Sixth 5</h3>
    <img src="/images/placeholders/200x200.gif">
  </div>
  <!-- /.sixth -->
  <div class="sixth">
    <h3>Sixth 6</h3>
    <img src="/images/placeholders/200x200.gif">
  </div>
  <!-- /.sixth -->
</div>
<!-- /.row -->

Hero

Hero sections are typically graphical areas that sit at the top of the page. They can contain images, video players and slideshows.

Hero Image

Hero images are main header sections of a page. They can have an overlayed widget too.

Tourism Whistler

Plan Your Trip

Check Availability

or call 1.800.944.7853 Visa, Mastercard and American Express accepted.

View Code </>
<div class="hero">
  <div class="inner">
    <img src="/images/header/ski.jpg" alt="Tourism Whistler">
    <div class="hero__overlay">
      <!-- PASTE WIDGET HERE -->
    </div>
    <!-- /.hero__overlay -->
  </div>
  <!-- /.inner -->
</div>
<!-- /.hero -->

Hero Video

Hero videos are similar to hero images, in that they display an image, but they click through to a fancybox video popup.

View Code </>
<div class="hero hero--video">
  <div class="inner">
    <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&rel=0" class="fancybox.iframe">
      <img src="/images/header/ski.jpg" alt="Tourism Whistler">
    </a>
  </div>
  <!-- /.inner -->
</div>
<!-- /.hero -->

Hero Slideshow

Hero slideshows are the same dimensions as hero images, but they cycle through any number of images. This is acheived by adding the class .hero--slideshow. An extra class of .hero--loading is also needed to deal with layout changes during page load. Adding a widget to these is also possible.

View Code </>
<div class="hero hero--slideshow hero--loading">
  <div class="hero__nav"></div>
  <img src="/images/hero/test/whistler-ski-holiday-2014-ski-magazine.jpg" class="slideshow--image">
  <img src="/images/hero/test/whistler-blackcomb-best-ski-snowboard-resort-ski-magazine.jpg" class="slideshow--image">
  <img src="/images/hero/whistler-village-ski-magazine-3.jpg" class="slideshow--image">
  <div class="inner">
    <div class="hero__overlay">
      <!-- PASTE WIDGET HERE -->
    </div>
    <!-- /.hero__overlay -->
  </div>
  <!-- /.inner -->
</div>
<!-- /.hero -->

Hero Countdown

Adding a countdown timer to hero images.

On the occasion where the text colours (blue/white) clash with the background image, these colours can be overridden with following attributes: data-countdown-label-color and data-countdown-color. The example below only reasserts the defaults.

View Code </>
<div class="hero" data-countdown="2015-11-15 00:00:00" data-countdown-label="Sale ends in" data-countdown-label-color="#0c223e" data-countdown-color="#ffffff">
  <a href="/winter-packages/book-early-and-save/">
    <img src="/images/hero/test/whistler-ski-holiday-2014-ski-magazine.jpg" class="slideshow--image">
  </a>
</div>
<!-- /.hero -->

Banners

Banners can be used list any number of images corresponding with a list of links. Rolling over the link reveals the image.

View Code </>
<div class="banner">
  <div class="banner__images">
    <img src="//placehold.it/840x409" class="banner__image" data-id="1">
    <img src="/images/hero/lake.jpg" class="banner__image" data-id="2">
    <img src="/images/hero/hike-2.jpg" class="banner__image" data-id="3">
    <img src="/images/hero/hike.jpg" class="banner__image" data-id="4">
    <img src="/images/hero/lake.jpg" class="banner__image" data-id="5">
    <img src="/images/hero/hike-2.jpg" class="banner__image" data-id="6">
    <img src="/images/hero/hike.jpg" class="banner__image" data-id="7">
    <img src="/images/hero/lake.jpg" class="banner__image" data-id="8">
  </div>
  <!-- /.banner__images -->
  <div class="banner__list">
    <h3 class="banner__title">Summer Itineraries</h3>
    <ul>
      <li><a href="./" data-id="1">Adrenaline Adventure</a></li>
      <li><a href="./" data-id="2">Soft Adventure</a></li>
      <li><a href="./" data-id="3">Family friendly Activities</a></li>
      <li><a href="./" data-id="4">Fitness & Recreation</a></li>
      <li><a href="./" data-id="5">On The Water</a></li>
      <li><a href="./" data-id="6">Iconic Whistler Sightseeing</a></li>
      <li><a href="./" data-id="7">Arts & Culture</a></li>
      <li><a href="./" data-id="8">Food & Drink</a></li>
    </ul>
    <div class="banner__link">
      <a href="./">View All Itineraries</a>
    </div>
    <!-- /.banner__link -->
  </div>
  <!-- /.banner__list -->
</div>
<!-- /.banner -->

Tabs

Tabs can contain any type of content. Tab width depends on how many tabs are present. Make sure to match up the data-id="" attribute of the link and the id="" attribute of the tab content div.

2 ...

3 ...

4 ...

View Code </>
<section class="tabs">
  <nav class="tab__nav">
    <ul role="tablist">
      <li><a href="#one" class="tab__link" data-id="one" role="tab">Tab One</a></li>
      <li><a href="#two" class="tab__link" data-id="two" role="tab">Tab Two</a></li>
      <li><a href="#three" class="tab__link" data-id="three" role="tab">Tab Three</a></li>
      <li><a href="#four" class="tab__link" data-id="four" role="tab">Tab Four</a></li>
    </ul>
  </nav>
  <!-- /.tab__nav -->
  <article class="tab" data-id="one" id="one" role="tabpanel"><h2>1 ...</h2></article>
  <!-- /.tab -->
  <article class="tab" data-id="two" id="two" role="tabpanel"><h2>2 ...</h2></article>
  <!-- /.tab -->
  <article class="tab" data-id="three" id="three" role="tabpanel"><h2>3 ...</h2></article>
  <!-- /.tab -->
  <article class="tab" data-id="four" id="four" role="tabpanel"><h2>4 ...</h2></article>
  <!-- /.tab -->
</section>
<!-- /.tabs -->

Tiles

Tiles come in 4 distinct flavours: plain, event, package and image. Used in conjunction with the grid styles you can make tiles of any size (full, half, third etc). Adding data-rel="external" to the tile will force that tile to open its links in a new window/tab.

All tiles, by default, have a click functionality applied to the whole tile. If a tile__link is found, that href will be applied to the whole tile. To override this functionality (to allow separate links within a tile, say for an image and text) add a class="tile--no-link".

Plain Tiles

View Code </>
<div class="row">
  <div class="third">
    <div class="tile tile--plain">
      <h3 class="tile__title">Historic Milestone</h3>
      <ul>
        <li><a href="./">Art Galleries</a></li>
        <li><a href="./">Squamish Lil'wat Cultural Centre</a></li>
        <li><a href="./">Whistler Museum</a></li>
      </ul>
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--plain">
      <h3 class="tile__title">Historic Milestone</h3>
      <ul>
        <li><a href="./">Art Galleries</a></li>
        <li><a href="./">Squamish Lil'wat Cultural Centre</a></li>
        <li><a href="./">Whistler Museum</a></li>
      </ul>
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--plain" data-rel="external">
      <h3 class="tile__title">Historic Milestone</h3>
      <ul>
        <li><a href="./">Art Galleries</a></li>
        <li><a href="./">Squamish Lil'wat Cultural Centre</a></li>
        <li><a href="./">Whistler Museum</a></li>
      </ul>
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->

List Tiles

View Code </>
<div class="row">
  <div class="third">
    <div class="tile tile--list">
      <h3 class="tile__title">Plan</h3>
      <ul>
        <li><a href="/">Resort Reports</a></li>
        <li><a href="/">Markets & Products</a></li>
        <li><a href="/">Industry & Trends</a></li>
        <li><a href="/">Resource Links</a></li>
      </ul>
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--list">
      <h3 class="tile__title">Promote</h3>
      <ul>
        <li><a href="/">Promotional Opportunities</a></li>
        <li><a href="/">Advertising Opportunities</a></li>
        <li><a href="/">Event Opportunities</a></li>
        <li><a href="/">Event Listing</a></li>
        <li><a href="/">View all Tools & Opportunities</a></li>
      </ul>
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--list">
      <h3 class="tile__title">Performance</h3>
      <ul>
        <li><a href="/">TravelTrade</a></li>
        <li><a href="/">Sales Trip Reports</a></li>
        <li><a href="/">Conference Sales updates</a></li>
        <li><a href="/">Marketing Creative Summary</a></li>
      </ul>
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->

Event Tiles

Oct28-10Nov Image Description

What's on This Weekend

Adult ski or snowboard lessons

EverySunday Image Description

Summer Will Be Awesome

Whistler switches into summer mode

View Code </>
<div class="row">
  <div class="third">
    <div class="tile tile--event tile--no-link">
      <span class="tile__label">Aug <b>28</b></span>
      <a href="https://www.whistler.com"><img src="//placehold.it/385x220" alt="Image Description"></a>
      <h3 class="tile__title">Ski & Snowboard</h3>
      <p>From the freeriding to the racing and nightlife, <a href="https://www.whistler.com/events/crankworx">Crankworx</a> is a full-on festival. This <a href="https://www.whistler.com/blog">Whistler Insider</a> has tips on how to survive the week.</p>
      <div class="tile__link">
        <a href="./">View Details</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--event">
      <span class="tile__label"><b>Oct</b>28-10<b>Nov</b></span>
      <img src="//placehold.it/385x220" alt="Image Description">
      <h3 class="tile__title">What's on This Weekend</h3>
      <p>Adult ski or snowboard lessons</p>
      <div class="tile__link">
        <a href="./">View Listings</a>
      </div>
      <!-- /.tile__link -->
    </div>
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--event" data-rel="external">
      <span class="tile__label"><b>Every</b>Sunday</span>
      <img src="//placehold.it/385x220" alt="Image Description">
      <h3 class="tile__title">Summer Will Be Awesome</h3>
      <p>Whistler switches into summer mode</p>
      <div class="tile__link">
        <a href="./">View Summer Activities</a>
      </div>
      <!-- /.tile__link -->
    </div>
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->

Package Tiles

Image Description

4-Night, 3-Day Stay & Ski Package from $111 per person, per night

Plus Kids Stay, Rent & Airport Transfer for Free

Image Description

Whistler Olympic Experience Package from $659 per person

Valid for arrival from Feb 1 - Mar 30, 2014

Image Description

Whistler Romance Package from $177 per person, per night

Valud for arrivals from Feb 1 - Mar 30, 2014

View Code </>
<div class="row">
  <div class="third">
    <div class="tile tile--package">
      <img src="//placehold.it/385x220" alt="Image Description">
      <h3 class="tile__title">4-Night, 3-Day Stay & Ski Package from <b>$111</b> per person, per night</h3>
      <p>Plus Kids Stay, Rent & Airport Transfer for Free</p>
      <div class="tile__link">
        <a href="./">View Details</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--package">
      <img src="//placehold.it/385x220" alt="Image Description">
      <h3 class="tile__title">Whistler Olympic Experience Package from <b>$659</b> per person</h3>
      <p>Valid for arrival from Feb 1 - Mar 30, 2014</p>
      <div class="tile__link">
        <a href="./">View Details</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--package" data-rel="external">
      <img src="//placehold.it/385x220" alt="Image Description">
      <h3 class="tile__title">Whistler Romance Package from <b>$177</b> per person, per night</h3>
      <p>Valud for arrivals from Feb 1 - Mar 30, 2014</p>
      <div class="tile__link">
        <a href="./">View Details</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->

Full Tiles

...

Image Description
3 stars

Four Season Resort Whistler

Save Up To 20%, per night

Image Description
3 stars

Four Season Resort Whistler

Save Up To 20%, per night

Image Description
3 stars

Four Season Resort Whistler

Save Up To 20%, per night

View Code </>
<div class="full">
  <div class="tile tile--package tile--full" data-rel="external">
    <img src="//placehold.it/385x220" alt="Image Description">
    <div class="tile__content">
      <img src="/images/uc/3-stars.png" alt="3 stars">
      <h2 class="tile__title">Four Season Resort Whistler</h2>
      <h3 class="tile__title">Save Up To <b>20%</b>, per night</h3>
    </div>
    <!-- /.tile__content -->
    <div class="tile__link">
      <a href="./">Learn More</a>
    </div>
    <!-- /.tile__link -->
  </div>
  <!-- /.tile -->
</div>
<!-- /.full -->
<div class="full">
  <div class="tile tile--package tile--full" data-rel="external">
    <img src="//placehold.it/385x220" alt="Image Description">
    <div class="tile__content">
      <img src="/images/uc/3-stars.png" alt="3 stars">
      <h2 class="tile__title">Four Season Resort Whistler</h2>
      <h3 class="tile__title">Save Up To <b>20%</b>, per night</h3>
    </div>
    <!-- /.tile__content -->
    <div class="tile__link">
      <a href="./">Learn More</a>
    </div>
    <!-- /.tile__link -->
  </div>
  <!-- /.tile -->
</div>
<!-- /.full -->
<div class="full">
  <div class="tile tile--package tile--full" data-rel="external">
    <img src="//placehold.it/385x220" alt="Image Description">
    <div class="tile__content">
      <img src="/images/uc/3-stars.png" alt="3 stars">
      <h2 class="tile__title">Four Season Resort Whistler</h2>
      <h3 class="tile__title">Save Up To <b>20%</b>, per night</h3>
    </div>
    <!-- /.tile__content -->
    <div class="tile__link">
      <a href="./">Learn More</a>
    </div>
    <!-- /.tile__link -->
  </div>
  <!-- /.tile -->
</div>
<!-- /.full -->

Short Tiles

All tiles are capped at 400px high. If we need a tile with less content in, a class of tile--short can be added to force the height to be 350px.

Aug 28 Image Description

Ski & Snowboard

From the freeriding to the racing and nightlife, Crankworx is a full-on festival. This Whistler Insider has tips on how to survive the week.

View Code </>
<div class="row">
<div class="third">
  <div class="tile tile--event tile--short">
    <span class="tile__label">Aug <b>28</b></span>
    <img src="//placehold.it/385x220" alt="Image Description">
    <h3 class="tile__title">Ski & Snowboard</h3>
    <p>From the freeriding to the racing and nightlife, Crankworx is a full-on festival. This Whistler Insider has tips on how to survive the week.</p>
    <div class="tile__link">
      <a href="./">View Details</a>
    </div>
    <!-- /.tile__link -->
  </div>
  <!-- /.tile -->
</div>
<!-- /.third -->
</div>
<!-- /.row -->

Tile Widgets

Widgets can be pasted into tiles from the widget builder and will be styled accordingly. Obviously most elements will need to be stripped, like title, adults/children, card logos etc so as to only add arrival/departure, button and any hidden fields.

Image Description

Ski & Snowboard

From the freeriding to the racing and nightlife, Crankworx is a full-on festival. This Whistler Insider has tips on how to survive the week.

Check Availability
Image Description

Ski & Snowboard

From the freeriding to the racing and nightlife, Crankworx is a full-on festival. This Whistler Insider has tips on how to survive the week.

Call 1.800.944.7853 to Book

Image Description

Ski & Snowboard

From the freeriding to the racing and nightlife, Crankworx is a full-on festival. This Whistler Insider has tips on how to survive the week.

Check Availability
View Code </>
<div class="row">
  <div class="third">
    <div class="tile tile--event">
      <img src="//placehold.it/385x220" alt="Image Description">
      <h3 class="tile__title">Ski & Snowboard</h3>
      <p>From the freeriding to the racing and nightlife, Crankworx is a full-on festival. This Whistler Insider has tips on how to survive the week.</p>
      <div class="tile__widget">
        <!-- PASTE WIDGET HERE -->
      </div>
      <!-- /.tile__widget -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--event">
      <img src="//placehold.it/385x220" alt="Image Description">
      <h3 class="tile__title">Ski & Snowboard</h3>
      <p>From the freeriding to the racing and nightlife, Crankworx is a full-on festival. This Whistler Insider has tips on how to survive the week.</p>
      <div class="tile__widget">
        <!-- PASTE WIDGET HERE -->
      </div>
      <!-- /.tile__widget -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--event">
      <img src="//placehold.it/385x220" alt="Image Description">
      <h3 class="tile__title">Ski & Snowboard</h3>
      <p>From the freeriding to the racing and nightlife, Crankworx is a full-on festival. This Whistler Insider has tips on how to survive the week.</p>
      <div class="tile__widget">
        <h3>Call <a href="tel:18009447853">1.800.944.7853</a> to Book</h3>
      </div>
      <!-- /.tile__widget -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->

Image Tiles

View Code </>
<div class="row">
  <div class="third">
    <div class="tile tile--image">
      <img src="/images/placeholders/tile--heli2.jpg" alt="Image Description">
      <div class="tile__link">
        <a href="./">Heli Skiing</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--image">
      <img src="/images/placeholders/tile--heli2.jpg" alt="Image Description">
      <div class="tile__link">
        <a href="./">Cat Skiing</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--image" data-rel="external">
      <img src="/images/placeholders/tile--heli2.jpg" alt="Image Description">
      <div class="tile__link">
        <a href="./">Terrain Parks</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->

Video Tiles

...

View Code </>
<div class="row">
  <div class="third">
    <div class="tile tile--video">
      <img src="/images/placeholders/tile-video-1.jpg">
      <div class="tile__link">
        <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&rel=0">Summer Family Fun in Whistler</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--video">
      <img src="/images/placeholders/tile-video-2.jpg">
      <div class="tile__link">
        <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&rel=0">Olympic Plaza Grand Opening</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--video">
      <img src="/images/placeholders/tile-video-3.jpg">
      <div class="tile__link">
        <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&rel=0">Dog-Friendly Whistler</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->

Promo Tiles

These are capped at 620px high and there is no scaling on the images, so image heights may vary.

Insider's Guide to Whistler Ep.1: Planning Your Trip Video

Insider's Guide to Whistler Ep.1: Planning Your Trip

International travel writer and guide Robin Esrock joins local insider Feet Banks for an introduction to Whistler in this first of five videos intended to give travellers the lay of the land, and a laugh or two.

Whistler Skiing Secrets - 7 Top Spots and Stashes Insider Blog

Whistler Skiing Secrets - 7 Top Spots and Stashes

Local ski guide, and founder of Extremely Canadian, Peter Smart dishes on his favourite spots to take his clients. In this blog post he gives up the best groomers, powder, bowls, glacier, gladed and bump skiing to be had on both Whistler and Blackcomb Mountains.

Guest Instagramer Nadia Samer takes you on a virtual visual smorgasbord Instagram

Guest Instagramer Nadia Samer takes you on a virtual visual smorgasbord

There is truly no place like home. This is one of my favourite views in the sea to sky. #Whistler #WhistlerUnfiltered #discoverWhistler Guest instagrammer: @nadia_samer

Insider's Guide to Whistler Ep.3: In the Village Video

Insider's Guide to Whistler Ep.3: In the Village

Whistler Insider Feet Banks takes travel writer and guide Robin Esrock for a behind the scenes look at Whistler's famous village and apres, dining and activities.

View Code </>
<div class="row">
  <div class="quarter">
    <div class="tile tile--promo">
      <img src="/images/placeholders/promo--1.jpg" alt="Insider's Guide to Whistler Ep.1: Planning Your Trip">
      <strong class="tile__subtitle">Video</strong>
      <h3 class="tile__title">Insider's Guide to Whistler Ep.1: Planning Your Trip</h3>
      <p>International travel writer and guide Robin Esrock joins local insider Feet Banks for an introduction to Whistler in this first of five videos intended to give travellers the lay of the land, and a laugh or two.</p>
      <div class="tile__link">
        <a href="./">Read More</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.quarter -->
  <div class="quarter">
    <div class="tile tile--promo">
      <img src="/images/placeholders/promo--2.jpg" alt="Whistler Skiing Secrets - 7 Top Spots and Stashes">
      <strong class="tile__subtitle">Insider Blog</strong>
      <h3 class="tile__title">Whistler Skiing Secrets - 7 Top Spots and Stashes</h3>
      <p>Local ski guide, and founder of Extremely Canadian, Peter Smart dishes on his favourite spots to take his clients. In this blog post he gives up the best groomers, powder, bowls, glacier, gladed and bump skiing to be had on both Whistler and Blackcomb Mountains.</p>
      <div class="tile__link">
        <a href="./">Read More</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.quarter -->
  <div class="quarter">
    <div class="tile tile--promo">
      <img src="/images/placeholders/promo--3.jpg" alt="Guest Instagramer Nadia Samer takes you on a virtual visual smorgasbord">
      <strong class="tile__subtitle">Instagram</strong>
      <h3 class="tile__title">Guest Instagramer Nadia Samer takes you on a virtual visual smorgasbord</h3>
      <p>There is truly no place like home. This is one of my favourite views in the sea to sky. #Whistler #WhistlerUnfiltered #discoverWhistler Guest instagrammer: @nadia_samer</p>
      <div class="tile__link">
        <a href="./">Read More</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.quarter -->
  <div class="quarter">
    <div class="tile tile--promo">
      <img src="/images/placeholders/promo--4.jpg" alt="Insider's Guide to Whistler Ep.3: In the Village">
      <strong class="tile__subtitle">Video</strong>
      <h3 class="tile__title">Insider's Guide to Whistler Ep.3: In the Village</h3>
      <p>Whistler Insider Feet Banks takes travel writer and guide Robin Esrock for a behind the scenes look at Whistler's famous village and apres, dining and activities.</p>
      <div class="tile__link">
        <a href="./">Read More</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.quarter -->
</div>
<!-- /.row -->

Offer Tiles

...

View Code </>
<div class="row">
  <div class="third">
    <div class="tile tile--offer">
      <img src="https://www.whistler.com/images/placeholders/room-only-bonus-extras.gif" alt="Offer 1: $99 + Free Extras">
      <div class="tile__link">
        <a href="/summer-packages/offers/">View Offer</a>
      </div>
      <!-- /.tile__link -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--offer">
      <img src="https://www.whistler.com/images/placeholders/room-only-bonus-extras.gif" alt="Offer 1: $99 + Free Extras">
      <div class="tile__cta">
        <a href="/" class="button button--red">View Offer</a>
      </div>
      <!-- /.tile__cta -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
  <div class="third">
    <div class="tile tile--offer">
      <img src="https://www.whistler.com/images/placeholders/room-only-bonus-extras.gif" alt="Offer 1: $99 + Free Extras">
      <div class="tile__cta">
        <a href="/" class="button button--blue">View Offer</a>
      </div>
      <!-- /.tile__cta -->
    </div>
    <!-- /.tile -->
  </div>
  <!-- /.third -->
</div>
<!-- /.row -->


Widgets

Widgets differ in how they look and what action they perform, but they are all essentially a form containing any number of different parameters that are passed along to the booking funnel.

Alternative Widget (A/B)

Book Your Trip

Check Availability

or call 1.800.944.7853 Visa, Mastercard and American Express accepted.

View Code </>
<div class="widget widget--alt widget--example" data-action="/cart/lodging-search/">
  <h3 class="widget__title">Book Your Trip</h3>
  <fieldset>
    <legend>Check Availability</legend>
    <div class="row">
      <div class="field">
        <select name="search-type" id="search-type" class="select" data-hiddenParameter>
          <option value="lodging-search">Lodging</option>
          <option value="transport-search">Transfers</option>
          <option value="activity-search">Activities</option>
          <option value="rental-search">Rentals</option>
        </select>
      </div>
    </div>
    <div class="widget--column half">
      <div class="field">
        <label for="arrivaldate">Check-in</label>
        <input type="text" id="arrivaldate" name="arrivaldate">
      </div>
      <!-- /.field -->
      <div class="field">
        <label for="departuredate">Check-out</label>
        <input type="text" id="departuredate" name="departuredate">
      </div>
      <!-- /.field -->
    </div>
    <!-- /.field -->
    <div class="widget--column half">
      <div class="field field--adult">
        <label for="adultcount">Adults</label>
        <select name="adultcount" id="adultcount" class="select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
        </select>
      </div>
      <div class="field field--children">
        <label for="childcount">Children</label>
        <select name="childcount" id="childcount" class="select">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
        </select>
      </div>
    </div>
    <!-- /.field -->
  </fieldset>
  <fieldset>
    <div class="text--center">
      <button class="button widget__submit">Check Availability</button>
    </div>
  </fieldset>
  <p class="widget__text">
    or call <a href="tel:18009447853" class="widget__phone">1.800.944.7853</a>
    <img src="/images/card-logos.png" alt="Visa, Mastercard and American Express accepted.">
  </p>
</div>
<!-- /.widget -->

Accommodation Widget

Plan Your Trip

Check Availability

or call 1.800.944.7853 Visa, Mastercard and American Express accepted.

View Code </>
<div data-action="/cart/lodging-search/" class="widget">
  <h3 class="widget__title">Plan Your Trip</h3>
  <fieldset class="row">
    <legend>Check Availability</legend>
    <div class="widget__dates">
      <div class="field half">
        <input type="text" id="arrivaldate" name="arrivaldate" value="">
      </div>
      <div class="field half">
        <input type="text" id="departuredate" name="departuredate" value="">
      </div>
    </div>
    <!-- /.widget__dates -->
    <div class="field">
      <select name="search-type" id="search-type" class="select" data-hiddenParameter>
        <option value="lodging-search">Lodging</option>
        <option value="transport-search">Transfers</option>
        <option value="activity-search">Activites</option>
        <option value="rental-search">Rentals</option>
      </select>
    </div>
    <div class="field half">
      <select name="adultcount" id="adultcount" class="select">
        <option value="1">1 Adult</option>
        <option value="2">2 Adults</option>
        <option value="3">3 Adults</option>
        <option value="4">4 Adults</option>
        <option value="5">5 Adults</option>
        <option value="6">6 Adults</option>
        <option value="7">7 Adults</option>
        <option value="8">8 Adults</option>
        <option value="9">9 Adults</option>
      </select>
    </div>
    <div class="field half">
      <select name="childcount" id="childcount" class="select">
        <option value="0">No Children</option>
        <option value="1">1 Child</option>
        <option value="2">2 Children</option>
        <option value="3">3 Children</option>
        <option value="4">4 Children</option>
        <option value="5">5 Children</option>
        <option value="6">6 Children</option>
      </select>
    </div>
    <div class="field text--center">
      <button class="button widget__submit">Check Availability</button>
    </div>
  </fieldset>
  <p class="widget__text">
    or call <a href="tel:18009447853" class="widget__phone">1.800.944.7853</a>
    <img src="/images/card-logos.png" class="widget__card-types" alt="Visa, Mastercard and American Express accepted.">
  </p>
</div>
<!-- /.widget -->

Activity Widget

Plan Your Trip

Check Availability

or call 1.800.944.7853 Visa, Mastercard and American Express accepted.

View Code </>
<div data-action="/cart/activity-search/" class="widget">
  <h3 class="widget__title">Plan Your Trip</h3>
  <fieldset class="row">
    <legend>Check Availability</legend>
    <div class="widget__dates">
      <div class="field half">
        <input type="text" id="arrivaldate" name="arrivaldate" value="">
      </div>
      <div class="field half">
        <input type="text" id="departuredate" name="departuredate" value="">
      </div>
    </div>
    <!-- /.widget__dates -->
    <div class="field">
      <select class="select" name="productcategoryid" id="productcategoryid">
        <option value="-1">All</option>
        <option value="142">4x4 Tours</option>
        <option value="165">ATV Tours</option>
        <option value="174">Backcountry Skiing</option>
        <option value="197">Bike Park</option>
        <option value="198">Bungee Jumping</option>
        <option value="169">Canoe/Kayak Trip</option>
        <option value="164">Climbing</option>
        <option value="121">Rafting</option>
        <option value="129">Cross Country Skiing</option>
        <option value="206">Dining & Nightlife</option>
        <option value="160">Dog Sledding</option>
        <option value="125">Fishing</option>
        <option value="1008">Fitness</option>
        <option value="1007">Health & Wellness</option>
        <option value="122">Adventure Tours</option>
        <option value="140">Heli-skiing</option>
        <option value="127">Helicopter Tours</option>
        <option value="172">Hiking</option>
        <option value="183">Mountain Biking</option>
        <option value="1028">Olympic Experience</option>
        <option value="127">Scenic Tours</option>
        <option value="126">Horseback Riding</option>
        <option value="202">Ski/Board School</option>
        <option value="144">Sleigh Rides</option>
        <option value="141">Snowmobiling</option>
        <option value="139">Snowcat Skiing</option>
        <option value="176">Snowshoeing</option>
        <option value="186">Water Sports</option>
        <option value="188">Zip-line</option>
      </select>
    </div>
    <div class="field text--center">
      <button class="button widget__submit">Check Availability</button>
    </div>
  </fieldset>
  <p class="widget__text">
    or call <a href="tel:18009447853" class="widget__phone">1.800.944.7853</a>
    <img src="/images/card-logos.png" class="widget__card-types" alt="Visa, Mastercard and American Express accepted.">
  </p>
</div>
<!-- /.widget -->

Activity Widget (pre set as ATV Tours)

Plan Your Trip

Check Availability

or call 1.800.944.7853 Visa, Mastercard and American Express accepted.

View Code </>
<div data-action="/cart/activity-search/" class="widget">
  <h3 class="widget__title">Plan Your Trip</h3>
  <fieldset class="row">
    <legend>Check Availability</legend>
    <div class="widget__dates">
      <div class="field half">
        <input type="text" id="arrivaldate" name="arrivaldate" value="">
      </div>
      <div class="field half">
        <input type="text" id="departuredate" name="departuredate" value="">
      </div>
    </div>
    <!-- /.widget__dates -->
    <div class="field text--center">
      <input type="hidden" id="productcategoryid" name="productcategoryid" value="165">
      <button class="button widget__submit">Check Availability</button>
    </div>
  </fieldset>
  <p class="widget__text">
    or call <a href="tel:18009447853" class="widget__phone">1.800.944.7853</a>
    <img src="/images/card-logos.png" class="widget__card-types" alt="Visa, Mastercard and American Express accepted.">
  </p>
</div>
<!-- /.widget

Login Widget

Whistler Rewards

Sign in here with your email address

Login
View Code </>
<div data-action="/" class="widget widget--rewards">
  <h3 class="widget__title">Whistler Rewards</h3>
  <p><b>Sign in</b> here with your email address</p>
  <fieldset class="row">
    <legend>Login</legend>
    <div class="field text--center">
      <input type="email" id="email" name="email" placeholder="Email address">
      <button class="button widget__submit">Login</button>
    </div>
  </fieldset>
</div>
<!-- /.widget -->

Reservations Widget

Reservations by Phone

Visa, Mastercard and American Express accepted.

View Code </>
<div data-action="/" class="widget widget--reservations">
  <h3 class="widget__title">Reservations by Phone</h3>
  <div class="widget__numbers">
    <p class="widget__text">
      <a href="tel:18009447853" class="widget__phone">1.800.944.7853</a>
      <a href="tel:16049320606" class="widget__phone widget__phone--alt">INT'L 1.604.932.0606</a>
    </p>
  </div>
  <!-- /.widget__numbers -->
  <p class="widget__text">
    <img src="/images/card-logos.png" class="widget__card-types" alt="Visa, Mastercard and American Express accepted.">
  </p>
</div>
<!-- /.widget -->

Inline Widget

...

Plan Your Trip

Check Availability
View Code </>
<div data-action="/cart/lodging-search/" class="widget widget--inline" data-name="widgetName">
  <h3 class="widget__title">Plan Your Trip</h3>
  <fieldset class="row">
    <legend>Check Availability</legend>
    <div class="widget__dates">
      <div class="field half">
        <input type="text" id="arrivaldate" name="arrivaldate" value="">
      </div>
      <div class="field half">
        <input type="text" id="departuredate" name="departuredate" value="">
      </div>
    </div>
    <!-- /.widget__dates -->
    <div class="field text--center">
      <button class="button widget__submit">Check Availability</button>
    </div>
  </fieldset>
</div>
<!-- /.widget -->

Footer Widget

The footer widget can be found at the bottom of this page (here). The HTML is as follows:

View Code </>
<div class="footer__widget">
  <div class="inner">
    <div data-action="/cart/lodging-search/" class="widget widget--inline widget--footer">
      <h3 class="widget__title hide--small hide--medium">Plan Your Trip</h3>
      <div class="footer__widget--tablet">
        <strong class="h3">Plan Your Trip</strong> <p>or call <a href="tel:18009447853">1.800.944.7853</a> to speak to a local agent</p>
      </div>
      <fieldset class="row">
        <legend>Check Availability</legend>
        <div class="widget__dates">
          <div class="field half">
            <input type="text" id="arrivaldate" name="arrivaldate" value="">
          </div>
          <div class="field half">
            <input type="text" id="departuredate" name="departuredate" value="">
          </div>
        </div>
        <!-- /.widget__dates -->
        <div class="field">
          <select name="search-type" id="search-type" class="select" data-hiddenParameter>
            <option value="lodging-search">Lodging</option>
            <option value="transport-search">Transfers</option>
            <option value="activity-search">Activities</option>
            <option value="rental-search">Rentals</option>
          </select>
        </div>
        <div class="field half">
          <select name="adultcount" id="adultcount" class="select">
            <option value="1">1 Adult</option>
            <option value="2">2 Adults</option>
            <option value="3">3 Adults</option>
            <option value="4">4 Adults</option>
            <option value="5">5 Adults</option>
            <option value="6">6 Adults</option>
            <option value="7">7 Adults</option>
            <option value="8">8 Adults</option>
            <option value="9">9 Adults</option>
          </select>
        </div>
        <div class="field half">
          <select name="childcount" id="childcount" class="select">
            <option value="0">No Children</option>
            <option value="1">1 Child</option>
            <option value="2">2 Children</option>
            <option value="3">3 Children</option>
            <option value="4">4 Children</option>
            <option value="5">5 Children</option>
            <option value="6">6 Children</option>
          </select>
        </div>
        <div class="field text--center">
          <button class="button widget__submit">Check Availability</button>
        </div>
      </fieldset>
    </div>
    <!-- /.widget -->
  </div>
</div>
<!-- /.footer__widget -->

Widget Options

Options can be added to a widget to add or override specific behaviour. These can be added as data attributes on the widget <div> tag.

data-arrival

By default a widget's arrival date will be tomorrow, but adding this attribute will override the arrival date. Most sensible date formats will be accepted, such as MM/DD/YYYY or 'tomorrow', 'tomorrow + 5' etc.

<div class="widget" data-action="/cart/lodging-search/" data-arrival="05/01/2010">

data-departure

By default a widget's departure date will be 3 days from today (tomorrow plus 2 days), but adding this attribute will override the departure date. Most sensible date formats will be accepted, such as MM/DD/YYYY or 'tomorrow', 'tomorrow + 5' etc.

<div class="widget" data-action="/cart/lodging-search/" data-departure="06/31/2011">

Widget Parameters

These parameters directly correlate to the URL parameters we pass to Inntopia. Required parameters such as arrival/departure date and adult count will need to be dropdowns, but most can be hidden fields within the form and set accordingly.

salesid

Default: 1321967

<input type="hidden" id="salesid" name="salesid" value="98765">

arrivaldate

Default: Tomorrow's date. (MM/DD/YYYY)

departuredate

Default: Three days from now, tomorrow plus 2 days. (MM/DD/YYYY)

adultcount

Number of adults.

Default: 2

Accepted values: 0-9

childcount

Number of children.

Default: 0

Accepted values: 0-9

packageid

Used to filter search results by package ID.

Default: N/A

<input type="hidden" id="packageid" name="packageid" value="123456">

locationid

Used to filter search results by location ID.

Default: N/A

<input type="hidden" id="locationid" name="locationid" value="123456">

supplierid

Used to filter search results by supplier ID.

Default: N/A

<input type="hidden" id="supplierid" name="supplierid" value="123456">

features

Used to filter accommodation results based on accommodation type/rating.

Accepted Values
  • 5 star - P,506,1,9,P,506,1,10,
  • 4 star - P,506,1,8,
  • 3/4 star - P,506,1,6,P,506,1,7,
  • Hotels - P,500,1,1,
  • Condos - P,500,5,1,
  • Townhomes - P,500,8,1,
  • Homes - P,500,7,1,
  • Studio - P,501,1,0,
  • 1 Room - P,501,1,1,
  • 2 Rooms - P,501,1,2,
  • 3 Rooms - P,501,1,3,
  • 4+ Rooms - P,501,1,4,
<input type="hidden" id="features" name="features" value="P,500,7,1,">

minprice

Used to apply a price range to a returned result set (amount in $CAD).

Default: N/A

<input type="hidden" id="minprice" name="minprice" value="200">

maxprice

Used to apply a price range to a returned result set (amount in $CAD).

Default: N/A

<input type="hidden" id="maxprice" name="maxprice" value="1000">

sortcode

Default: 0

Accepted Values
  • 0 - Whistler Picks
  • 1 - Name (a-z)
  • 2 - Price (low to high)
  • 3 - Price (high to low)
  • 4 - Trip Advisor Recommend
<input type="hidden" id="sortcode" name="sortcode" value="0">

delegates

Add this flag to only search the delegates events.

Accepted Value: 1

<input type="hidden" id="delegates" name="delegates" value="1">

productid

<input type="hidden" id="productid" name="productid" value="98765">

productcategoryid

Using this will filter search results by the given activity category (skiing, snowmobiling, zip-line etc). Multiple categories should be pipe separated (123456|98765|112233).

<input type="hidden" id="productcategoryid" name="productcategoryid" value="123456">

productsupercategoryid

<input type="hidden" id="productsupercategoryid" name="productsupercategoryid" value="98765">

data-hiddenParameter

Adding this attribute will stop that value being added to the URL.

<input type="hidden" id="" name="productsupercategoryid" value="98765" data-hiddenParameter>

User Defined Parameters

As well as adding hidden fields to filter a search, a widget's values can be altered on the fly, based on user input.

Search Type

Adding this select box will change the base url of the search being performed. The value should match the exact url slug used in the booking funnel.

Suggested Values
  • lodging-search
  • transport-search
  • rental-search
<select name="search-type" id="search-type" class="select" data-hiddenParameter>
  <option value="lodging-search">Lodging</option>
  <option value="transport-search">Transfers</option>
  <option value="activity-search">Activites</option>
  <option value="rental-search">Rentals</option>
</select>

Custom Parameters

These are specific paramters that are only added to the filter if the user selects certain options. The attribute must be named data-parameter and the value should be name:value, colon separated. In theory, any combination of name:value can be passed to a url. Multiple fields can be added by comma separating any number of name|value pairs.

<select name="search-type" id="search-type" class="select" data-hiddenParameter>
  <option value="lodging-search" data-parameter="productid:123,packageid:999">Lodging</option>
  <option value="transport-search" data-parameter="packageid:123|456|789">Transfers</option>
  <option value="activity-search" data-parameter="productcategoryid:789">Activities</option>
  <option value="rental-search">Rentals</option>
</select>

Sliders

Image Slider

Sliders are scrollable lists of image thumbnails that link to either a larger image or a YouTube video. Any video thumbnails will need a slider--video class adding. Control links are added automatically. A title="" attribute will be used as description and the rel="" attribute ties all images together so they can be scrolled through.

All slider images will be capped at 230px high, unless a slider--autoHeight is added the the slider element, which will allow images to retain their natural height.

View Code </>
<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__image slider--video">
      <a href="https://vimeo.com/101657757" rel="sliderName" title="Image Description">
        <img src="../images/placeholders/tile--heli.jpg" alt="Image Title">
      </a>
    </div>
    <!-- /.slider__image -->
    <div class="slider__image slider--video">
      <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&rel=0" rel="sliderName" title="Video Description">
        <img src="../images/placeholders/tile--ski.jpg" alt="Image Title">
      </a>
    </div>
    <!-- /.slider__image -->
    <div class="slider__image">
      <a href="https://www.whistler.com/images/wallpapers/downloads/01_phone.jpg" rel="sliderName" title="Image Description">
        <img src="../images/placeholders/tile--heli2.jpg" alt="Image Title">
      </a>
    </div>
    <!-- /.slider__image -->
    <div class="slider__image">
      <a href="https://www.whistler.com/images/wallpapers/downloads/01_phone.jpg" rel="sliderName" title="Image Description">
        <img src="/images/placeholders/tile--ski.jpg" alt="Image Title">
      </a>
    </div>
    <!-- /.slider__image -->
    <div class="slider__image slider--video">
      <a href="http://www.youtube.com/embed/RAi_637fC6c?autoplay=1&rel=0" rel="sliderName" title="Video Description">
        <img src="/images/placeholders/tile--heli2.jpg" alt="Image Title">
      </a>
    </div>
    <!-- /.slider__image -->
  </div>
  <!-- /.slider__wrapper -->
</div>
<!-- /.slider -->

Content Slider

Essentially the same functionality as image sliders, but the contorls are styled differently and any sort of content can be placed inside.

1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

7 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

9 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

10 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

View Code </>
<div class="slider slider--content">
  <div class="slider__wrapper">
    <div class="slider__image">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
    </div>
    <div class="slider__image">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
    </div>
    <div class="slider__image">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
    </div>
    <div class="slider__image">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
    </div>
    <div class="slider__image">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
    </div>
    <!-- /.slider__image -->
  </div>
  <!-- /.slider__wrapper -->
</div>
<!-- /.slider -->

Showcase

Very similar to sliders, these are intended to showcase more content. The functionality is essentially the same. Only the content and images need to be added - numbering and navigation are added in automatically. Adding more content is simply a case of adding more .showcase__item

Itinerary 1

Title 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Itinerary 1

Title 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Itinerary 1

Title 3

...

View Code </>
<div class="showcase">
  <div class="showcase__items">
    <div class="showcase__item">
      <img src="/images/showcase/1.jpg" class="showcase__image" alt="Itinerary 1" title="Itinerary 1">
      <div class="showcase__text">
        <h2 class="showcase__title">Title 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad <a href="./">minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat.</p>
      </div>
      <!-- /.showcase__text -->
    </div>
    <!-- /.showcase__item -->
    <div class="showcase__item">
      <img src="/images/showcase/1.jpg" class="showcase__image" alt="Itinerary 1" title="Itinerary 1">
      <div class="showcase__text">
        <h2 class="showcase__title">Title 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad <a href="./">minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat.</p>
      </div>
      <!-- /.showcase__text -->
    </div>
    <!-- /.showcase__item -->
    <div class="showcase__item">
      <img src="/images/showcase/1.jpg" class="showcase__image" alt="Itinerary 1" title="Itinerary 1">
      <div class="showcase__text">
        <h2 class="showcase__title">Title 3</h2>
        <p>...</p>
      </div>
      <!-- /.showcase__text -->
    </div>
    <!-- /.showcase__item -->
  </div>
  <!-- /.showcase__items -->
</div>
<!-- /.showcase -->

Show/Hide Content

Lesson Information

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Link

View Code </>
<div class="show-hide">
  <h3 class="show-hide__title">Lesson Information</h3>
  <div class="show-hide__content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.</p>
  </div>
  <!-- /.show-hide__content -->
</div>
<!-- /.show-hide -->

Forms

...

Better Checkboxes

View Code </>
<fieldset class="row">
  <div class="field">
    <label for="inputbox" class="label">Input Label</label>
    <input type="text" id="inputbox" name="inputbox" class="" placeholder="Input box">
  </div>
  <!-- /.field -->
  <div class="field">
    <label for="textbox" class="label">Textbox Label</label>
    <textarea id="textbox" name="textbox" class="" placeholder="Input box"></textarea>
  </div>
  <!-- /.field -->
  <div class="field">
    <label for="dropdown" class="label">Multiple choice question?</label>
    <select id="dropdown" name="dropdown" class="select">
      <option value="-1">Please Select</option>
      <option value="whistler">Whistler</option>
      <option value="blackcomb">Blackcomb</option>
      <option value="other">Other</option>
    </select>
  </div>
  <!-- /.field -->
  <div class="field half">
    <input type="radio" name="radio" id="radio_yes" value="yes" class="radio">
    <label for="radio_yes">Yes</label>
  </div>
  <!-- /.field -->
  <div class="field half">
    <input type="radio" name="radio" id="radio_no" value="no" class="radio" checked="checked">
    <label for="radio_no">No</label>
  </div>
  <!-- /.field -->
  <div class="field third">
    <input type="checkbox" name="checkbox" id="checkbox_yes" value="yes" class="checkbox">
    <label for="checkbox_yes">Yes</label>
  </div>
  <!-- /.field -->
  <div class="field third">
    <input type="checkbox" name="checkbox" id="checkbox_no" value="no" class="checkbox" checked="checked">
    <label for="checkbox_no">No</label>
  </div>
  <!-- /.field -->
  <div class="field third">
    <input type="checkbox" name="checkbox" id="checkbox_maybe" value="maybe" class="checkbox">
    <label for="checkbox_maybe">Maybe</label>
  </div>
  <!-- /.field -->
  <div class="field">
    <button class="button">Check Availability</button>
    <button class="button button--alt">Check Availability</button>
  </div>
  <!-- /.field -->
</fieldset>
View Code </>
<img id="scroller_image_0" class="tab_header_image image_on" src="https://www.whistlerbc.com/images/header/ski.jpg" alt="Tourism Whistler">
<img id="scroller_image_1" class="tab_header_image" src="https://www.whistlerbc.com/images/header/climbing-whistler.jpg" alt="Tourism Whistler">
<div id="header_tab_scroller">
<div id="tab_scroller_nav_left" class="Left_off" onclick="tabLeft();"></div>
<div id="tab_scroller_nav_right" onclick="tabRight()"></div>
<ul id="tab_scroller_holder">
<li id="tab_0" data-id="0" data-setid="72157648953573026" class="tab_show tab_on">Winter 2015/16</li>
<li id="tab_1" data-id="1" class="tab_show" data-setid="72157644051983639">Summer 2015</li>
                        </ul>
                    </div>
<div id="tab_content_0" class="tab_content content_on"></div>
<div id="tab_content_1" class="tab_content"></div>

Trails

Image Description

Title

Time: ? hours
Length: ? km
Total Ascent: 318 m / 1043 feet


Riverside Loop
View Code </>

    
   <div class="tile tile--route Easy" style="background-image: url(https://www.whistler.com/images/bike/bike-tile-bg-white.jpg);">
                              <img src="https://www.whistler.com/images/bike/bike-tile01.jpg" alt="Image Description">
                              <h2 class="tile__title">Title</h2>
                              <p>Time: <b>? hours</b><br />Length: <b>? km</b><br />Total Ascent: <b>318 m / 1043 feet</b></p>
                              <div class="tile__link">
                                  <a href="./">View Route Details</a>
                              </div>
                          </div>
<br />
           <div class="route-stats half" data-id="160">
                              <div class="title">Riverside Loop</div>
                              <div>
                                  <div class="graph"></div>
                                  <div class="stats"></div>
                              </div>
                          </div>