Colour Palette
Tourism Whistler brand colours and their corresponding hex/rgb codes and sass variable names.
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
- List Item One
- List Item Two
- Link Item Three
<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
- List Item One
- Link Item Two
- List Item Three
<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.
View Code </>Peak chair will remain closed for the remainder of today due to high winds.
<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
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 |
<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
<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.
Upcoming Events
Save The Date
-
April 11 - 20
-
May 17 - 19
-
June 21 - 22
-
July 1
-
July 1 - 5
<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
<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.
Plan Your Trip
or call 1.800.944.7853
<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.
<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.
<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.
<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.
<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.
1 ...
2 ...
3 ...
4 ...
<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
Historic Milestone
Historic Milestone
Historic Milestone
<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
<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
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.
<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
4-Night, 3-Day Stay & Ski Package from $111 per person, per night
Plus Kids Stay, Rent & Airport Transfer for Free
Whistler Olympic Experience Package from $659 per person
Valid for arrival from Feb 1 - Mar 30, 2014
Whistler Romance Package from $177 per person, per night
Valud for arrivals from Feb 1 - Mar 30, 2014
<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
...
<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.
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.
<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.
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.
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.
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.
<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.
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.
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.
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
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.
<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 -->
<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 -->
Sidebars
All sidebar lists should be styled up with the .sidebar__nav class. Adding .sidebar__nav--highlight class will add the grey background too.
Icon Links
Certain links in the sidebar will be given icons based on what they link to.
External Links
Adding rel="external" to a link will cause this link to open in a new tab/window. This works for any link on the site, but only these links in the sidebar will have an icon.
PDF Links
Much the same as external links, any links to PDF files will open in a new tab/window and will be displayed with an icon. Although no special class or attribute is needed, any sidebar link whose href ends in .pdf will inherit this behaviour.
<ul class="sidebar__nav sidebar__nav--highlight">
<li class="sidebar__header">Sidebar Header</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<h3>Related Information</h3>
<ul class="sidebar__nav">
<li><a href="/events/crankworx" class="modal-link">Modal Link</a></li>
<li><a href="https://www.whistlerblackcomb.com" rel="external">External Link</a></li>
<li><a href="https://www.whistler.com/resources/pdf/maps/whistler_hiking_map.pdf">PDF Link</a></li>
</ul>
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
or call 1.800.944.7853
<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
or call 1.800.944.7853
<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
or call 1.800.944.7853
<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
or call 1.800.944.7853
<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
<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
<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
...
<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:
<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.
<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.
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
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.
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.
Title 3
...
<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
<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
...
<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>
Gallery
- Winter 2015/16
- Summer 2015
<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
<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>