Tourism Whistler Styleguide

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

Link to Widget Guide

Colour Palette

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

Primary

Hex: #0D7079
RGBa: (13, 112, 121, 1)
Sass Variable $turquoise

Secondary

Hex: #00344C
RGBa: (0, 52, 76, 1)
Sass Variable $blue

Highlight

Hex: #E42B13
RGBa: (228, 43, 93, 1)
Sass Variable $red

Booking

Hex: #ffc400
RGBa: (255, 196, 0, 1)
Sass Variable $yellow

Primary Highlight

Hex: #00A393
RGBa: (0, 163, 147, 1)
Sass Variable $turquoiseHover

Text Color

Hex: #5b6778
RGBa: (91, 103, 120, 1)
Sass Variable $textBlue

Grey

Hex: #626262
RGBa: (98, 98, 98, 1)
Sass Variable $grey

Text

Headings

All fonts are "Work Sans" family.
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" rel="external" target="_blank"><span>List Item One</span></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.

<blockquote>

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 & Mice Type Styles

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

Left aligned text

Center 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>

Buttons

The .button class can be added to the following elements.
The default colour scheme can be overridden in favour of the following colours.
Yellow (reserved for booking funnel).
Teal (submit and links to other pages).
Blue (in-page navigation).

Link button

View Code </> 


<button class="button">Button</button>
<button type="submit" class="button">Submit button</button>
<a href="./" class="button button--turquoise">Link button</a>
<input type="button" value="Input button" class="button button--blue">
<input type="submit" value="Input submit button" class="button button--turquoise">

Icons

Tourism Whistler’s Icon Library is available on the shared drive and includes over 130 approved designs. Icons should be clean and simple and can be used in either the Primary Turquoise or Secondary Blue brand colours.

If an icon is needed for a website application, check the Icon Library first. If the required icon is not yet available, contact the Advertising & Creative Services team.

Tables

Default

Operating Dates Hours Mountains PEAK 2 PEAK Gondola
Nov 16 - Nov 28 8:30 AM - 3 PM Whistler Closed
Nov 16 - Nov 28 8:30 AM - 3 PM Whistler Closed
Nov 16 - Nov 28 8:30 AM - 3 PM Whistler Closed

* Please note all dates, hours and chairlift operations are weather dependent and subject to change. Please confirm with Whistler Blackcomb Guest Relations.

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:30 AM - 3 00 PM</td>
        <td>Whistler</td>
        <td>Closed</td>
      </tr>
      <tr>
        <td>Nov 16 - Nov 28</td>
        <td>8:30 AM - 3 PM</td>
        <td>Whistler</td>
        <td>Closed</td>
      </tr>
      <tr>
        <td>Nov 16 - Nov 28</td>
        <td>8:30 AM - 3 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>
      Whistler Village Gondola - 450 riders/hr<br/>
      Fitzsimmons Express Chair - 1,300 riders/hr<br/>
      Garbanzo Chair - 1,300 riders
  </dd>

</dl>

Block List

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

Upcoming Events

Events Calendar

Save The Date

Annual Events
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 &amp; 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

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">

    <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 -->

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="https://placehold.co/800x600.gif" alt="">
    </div><!-- /.half -->

    <div class="half">
        <h3>Half 2</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.half -->

</div><!-- /.row -->

<div class="row">

    <div class="two-thirds">
        <h3>Two Thirds</h3>
        <img src="https:///via.placeholder.com/1620x600.gif" alt="">
    </div><!-- /.third -->

    <div class="third">
        <h3>Third</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.third -->

</div><!-- /.row -->

<div class="row">

    <div class="third">
        <h3>Third 1</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.third -->

    <div class="third">
        <h3>Third 2</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.third -->

    <div class="third">
        <h3>Third 3</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.third -->

</div><!-- /.row -->

<div class="row">

    <div class="quarter">
        <h3>Quarter 1</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.quarter -->

    <div class="quarter">
        <h3>Quarter 2</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.quarter -->

    <div class="quarter">
        <h3>Quarter 3</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.quarter -->

    <div class="quarter">
        <h3>Quarter 4</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.quarter -->

</div><!-- /.row -->

<div class="row">

    <div class="fifth">
        <h3>Fifth 1</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.fifth -->

    <div class="fifth">
        <h3>Fifth 2</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.fifth -->

    <div class="fifth">
        <h3>Fifth 3</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.fifth -->

    <div class="fifth">
        <h3>Fifth 4</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.fifth -->

    <div class="fifth">
        <h3>Fifth 5</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.fifth -->

</div><!-- /.row -->

<div class="row">

    <div class="sixth">
        <h3>Sixth 1</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.sixth -->

    <div class="sixth">
        <h3>Sixth 2</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.sixth -->

    <div class="sixth">
        <h3>Sixth 3</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.sixth -->

    <div class="sixth">
        <h3>Sixth 4</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.sixth -->

    <div class="sixth">
        <h3>Sixth 5</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.sixth -->

    <div class="sixth">
        <h3>Sixth 6</h3>
        <img src="https:///via.placeholder.com/800x600.gif" alt="">
    </div><!-- /.sixth -->

</div><!-- /.row -->

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 ...

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 ... read moretile 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

View Code </> 


 <div class="row">

    <div class="third">

        <div class="tile tile--plain loaded" 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 class="third">

        <div class="tile tile--plain loaded">
            <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 loaded" 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

Plan

Promote

Performance

View Code </> 


<div class="row">

    <div class="third">

        <div class="tile tile--list loaded">

            <h3 class="tile__title">Plan</h3>
            <ul>
                <li><a href="/">Resort Reports</a></li>
                <li><a href="/">Markets &amp; Products</a></li>
                <li><a href="/">Industry &amp; Trends</a></li>
                <li><a href="/">Resource Links</a></li>
            </ul>

        </div><!-- /.tile -->

    </div><!-- /.third -->

    <div class="third">

        <div class="tile tile--list loaded">

            <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 &amp; Opportunities</a></li>
            </ul>

        </div><!-- /.tile -->

    </div><!-- /.third -->

    <div class="third">

        <div class="tile tile--list loaded">

            <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

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 Details
Oct28-10Nov Image Description

What's on This Weekend

Adult ski or snowboard lessons

View Listings
EverySunday Image Description

Summer Will Be Awesome

Whistler switches into summer mode

View Summer Activities
View Code </> 


<div class="row">

    <div class="third">

        <div class="tile tile--event tile--no-link loaded">

            <span class="tile__label">Aug <b>28</b></span>

            <a href="https://www.whistler.com"><img src="https://placehold.co/800x600" alt="Image Description"></a>
            <h3 class="tile__title">Ski &amp; 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 loaded">

            <span class="tile__label"><b>Oct</b>28-10<b>Nov</b></span>

            <img src="https://placehold.co/800x600" 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><!-- /.tile -->

    </div><!-- /.third -->

    <div class="third">

        <div class="tile tile--event loaded" data-rel="external">

            <span class="tile__label"><b>Every</b>Sunday</span>

            <img src="https://placehold.co/800x600" 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><!-- /.tile -->

    </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

View Details
Image Description

Whistler Olympic Experience Package from $659 per person

Valid for arrival from Feb 1 - Mar 30, 2014

View Details
Image Description

Whistler Romance Package from $177 per person, per night

Valud for arrivals from Feb 1 - Mar 30, 2014

View Details
View Code </> 


<div class="row">

    <div class="third">

        <div class="tile tile--package loaded">

            <img src="https://placehold.co/800x600" alt="Image Description">
            <h3 class="tile__title">4-Night, 3-Day Stay &amp; Ski Package from <b>$111</b> per person, per night</h3>
            <p>Plus Kids Stay, Rent &amp; 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 loaded">

            <img src="https://placehold.co/800x600" 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 loaded" data-rel="external">

            <img src="https://placehold.co/800x600" 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

Learn More?
Image Description
3 stars

Four Season Resort Whistler

Save Up To 20%, per night

Learn More
Image Description
3 stars

Four Season Resort Whistler

Save Up To 20%, per night

Learn More
View Code </> 


<div class="row" id="full-tiles">

    <div class="full">

        <div class="tile tile--package tile--full loaded" data-rel="external">

            <img src="https://placehold.co/800x600" alt="Image Description">

            <div class="tile__content">

                <img src="https://cdn.whistler.com/s3/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 class="tile__link" style="position: relative;">
                    <a href="./">Learn More?</a>
                </div><!-- /.tile__link -->

            </div><!-- /.tile__content -->

        </div><!-- /.tile -->

    </div><!-- /.full -->

    <div class="full">

        <div class="tile tile--package tile--full loaded" data-rel="external">

            <img src="https://placehold.co/800x600" alt="Image Description">

            <div class="tile__content">

                <img src="https://cdn.whistler.com/s3/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 class="tile__link" style="position: relative;">
                    <a href="./">Learn More</a>
                </div><!-- /.tile__link -->

            </div><!-- /.tile__content -->

        </div><!-- /.tile -->

    </div><!-- /.full -->

    <div class="full">

        <div class="tile tile--package tile--full loaded" data-rel="external">

            <img src="https://placehold.co/800x600" alt="Image Description">

            <div class="tile__content">

                <img src="https://cdn.whistler.com/s3/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 class="tile__link" style="position: relative;">
                    <a href="./">Learn More</a>
                </div><!-- /.tile__link -->

            </div><!-- /.tile__content -->

        </div><!-- /.tile -->

    </div><!-- /.full -->
	
</div><!-- /.row -->

Short Tiles

All tiles are capped at 560px 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 Details
View Code </> 


<div class="row">

    <div class="third">

        <div class="tile tile--event tile--short loaded">

            <span class="tile__label">Aug <b>28</b></span>

            <img src="https://placehold.co/800x600" alt="Image Description">
            <h3 class="tile__title">Ski &amp; 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 -->

Large Tiles

Single Full width tile, overlay can be flipped left or right (change css style from left to right as needed)

Image Description

FREE $50 ADVENTURE VOUCHER*

Use promo code SUMMER2020 at checkout


  • Change the width tag % to change the overlays width.
  • Change the width tag % to change the overlays width.
  • Change the width tag % to change the overlays width.
  • Change the width tag % to change the overlays width.
  • Change the width tag % to change the overlays width.
View Details


View Code </> 


<div class="row">

    <div class="tile tile--wide loaded">

        <img src="https://placehold.co/1200x550" alt="Image Description">
        <div class="tile_overlay" style="left: 0; width: 50%; "> 

            <h2 class="tile__title">FREE $50 ADVENTURE VOUCHER*</h2>
            <h3>Use promo code <b>SUMMER2020</b> at checkout</h3>
            <br/>
            <ul>
                <li>Change the width tag % to change the overlays width.</li>
                <li>Change the width tag % to change the overlays width.</li>
                <li>Change the width tag % to change the overlays width.</li>
                <li>Change the width tag % to change the overlays width.</li>
                <li>Change the width tag % to change the overlays width.</li>
            </ul>

            <div class="tile__link">
                <a href="./">View Details</a>
            </div><!-- /.tile__link -->

        </div><!-- /.tile__overlay -->

    </div><!-- /.tile -->

</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="//via.placeholder.com/385x220" alt="Image Description">
      <h3 class="tile__title">Ski &amp; 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="widget-new tile__widget">
        <!-- PASTE WIDGET HERE -->
      </div><!-- /.tile__widget -->
	  
    </div><!-- /.tile -->
	
  </div><!-- /.third -->
  
  <div class="third">
  
    <div class="tile tile--event">
	
      <img src="//via.placeholder.com/385x220" alt="Image Description">
      <h3 class="tile__title">Ski &amp; 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="widget-new tile__widget">
        <!-- PASTE WIDGET HERE -->
      </div><!-- /.tile__widget -->
	  
    </div><!-- /.tile -->
	
  </div><!-- /.third -->
  
  <div class="third">
  
    <div class="tile tile--event">
	
      <img src="//via.placeholder.com/385x220" alt="Image Description">
      <h3 class="tile__title">Ski &amp; 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="widget-new tile__widget">
        <!-- PASTE WIDGET HERE -->
      </div><!-- /.tile__widget -->
	  
    </div><!-- /.tile -->
	
  </div><!-- /.third -->
  
</div><!-- /.row -->

Image Tiles

Image Description
Heli Skiing
Image Description
Cat Skiing
Image Description
Terrain Parks
View Code </> 


<div class="row">

    <div class="third">

        <div class="tile tile--image loaded">

            <img src="https://placehold.co/800x600" 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 loaded">

            <img src="https://placehold.co/800x600" 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 loaded" data-rel="external">

            <img src="https://placehold.co/800x600" alt="Image Description">

            <div class="tile__link">
                <a href="./">Terrain Parks</a>
            </div><!-- /.tile__link -->

        </div><!-- /.tile -->

    </div><!-- /.third -->

</div><!-- /.row -->

Video Tiles

Summer Family Fun in Whistler
Olympic Plaza Grand Opening
Dog-Friendly Whistler
View Code </> 


<div class="row">

    <div class="third">

        <div class="tile tile--video loaded loaded1">

            <img src="https://placehold.co/800x600" alt="">

            <div class="tile__link">
                <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&amp;rel=0" class="fancybox.iframe">Summer Family Fun in Whistler</a>
            </div><!-- /.tile__link -->

            <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&amp;rel=0" class="video--icon fancybox.iframe"></a>

        </div><!-- /.tile -->

    </div><!-- /.third -->

    <div class="third">

        <div class="tile tile--video loaded loaded1">

            <img src="https://placehold.co/800x600" alt="">

            <div class="tile__link">
                <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&amp;rel=0" class="fancybox.iframe">Olympic Plaza Grand Opening</a>
            </div><!-- /.tile__link -->

            <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&amp;rel=0" class="video--icon fancybox.iframe"></a>

        </div><!-- /.tile -->

    </div><!-- /.third -->

    <div class="third">

        <div class="tile tile--video loaded loaded1">

            <img src="https://placehold.co/800x600" alt="">

            <div class="tile__link">
                <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&amp;rel=0" class="fancybox.iframe">Dog-Friendly Whistler</a>
            </div><!-- /.tile__link -->

            <a href="http://www.youtube.com/embed/cUtQUZ4e-h8?autoplay=1&amp;rel=0" class="video--icon fancybox.iframe"></a>
        </div><!-- /.tile -->

    </div><!-- /.third -->

</div><!-- /.row -->

Promo Tiles

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.

Read More
Whistler Skiing Secrets - 7 Top Spots and Stashes Insider Blog

Whistler Skiing Secrets - 7 Top Spots and Stashes

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.

Read More
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

Read More
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.

Read More
View Code </> 


<div class="row">

    <div class="quarter">

        <div class="tile tile--promo loaded">

            <img src="https://placehold.co/800x600" 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 loaded">

            <img src="https://placehold.co/800x600" 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>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 loaded">

            <img src="https://placehold.co/800x600" 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 loaded">

            <img src="https://placehold.co/800x600" 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

Offer tiles are png images, simply add or remove the tile--fade class to change the background color. Please use the psd template to create new tiles

View Code </> 


<div class="row">

	<div class="third">

		<a href="/summer-packages/peak-2-peak/" data-galabel="Offer 2: Peak to Peak Packages" class="home--tile tile--fade">
		
			<img src="//cdn.whistler.com/s3/images/banners/banner_2.png" alt="" class="">
			
		</a><!-- /tile--offer -->

	</div><!-- /.third -->
	
	<div class="third">

		<a href="/summer-packages/peak-2-peak/" data-galabel="Offer 2: Peak to Peak Packages" class="home--tile">
		
			<img src="//cdn.whistler.com/s3/images/banners/banner_1.png" alt="" class="">
			
		</a><!-- /tile--offer -->

	</div><!-- /.third -->
	
	<div class="third">

		<a href="/summer-packages/peak-2-peak/" data-galabel="Offer 2: Peak to Peak Packages" class="home--tile tile--fade">
		
			<img src="//cdn.whistler.com/s3/images/banners/banner_2.png" alt="" class="">
			
		</a><!-- /tile--offer -->

	</div><!-- /.third -->

</div><!-- /.row -->

Flip Tiles

Flip Tiles are used in a grid, with an image on one side and aditional copy on the back.

Card Title

Additional Copy

Card Title

Additional Copy

Card Title

Additional Copy

Card Title

Additional Copy

Card Title

Additional Copy

Card Title

Additional Copy

View Code </> 


<div class="row">

  <div class="full">
  

    <div class="cardFlip">

      <div class="cardContent">

        <div class="front" style="background-image: url(https://placehold.co/800x600);">
           <span>Card Title</span>
        </div>
        <div class="back"><p>Additional Copy</p></div>

      </div><!-- End cardContent -->

    </div><!-- End card -->
    

    <div class="cardFlip">

      <div class="cardContent">

        <div class="front" style="background-image: url(https://placehold.co/800x600);">
           <span>Card Title</span>
        </div>
        <div class="back"><p>Additional Copy</p></div>

      </div><!-- End cardContent -->

    </div><!-- End card -->
    

    <div class="cardFlip">

      <div class="cardContent">

        <div class="front" style="background-image: url(https://placehold.co/800x600);">
           <span>Card Title</span>
        </div>
        <div class="back"><p>Additional Copy</p></div>

      </div><!-- End cardContent -->

    </div><!-- End card -->
    

    <div class="cardFlip">

      <div class="cardContent">

        <div class="front" style="background-image: url(https://placehold.co/800x600);">
           <span>Card Title</span>
        </div>
        <div class="back"><p>Additional Copy</p></div>

      </div><!-- End cardContent -->

    </div><!-- End card -->
    

    <div class="cardFlip">

      <div class="cardContent">

        <div class="front" style="background-image: url(https://placehold.co/800x600);">
           <span>Card Title</span>
        </div>
        <div class="back"><p>Additional Copy</p></div>

      </div><!-- End cardContent -->

    </div><!-- End card -->
    

    <div class="cardFlip">

      <div class="cardContent">

        <div class="front" style="background-image: url(https://placehold.co/800x600);">
           <span>Card Title</span>
        </div>
        <div class="back"><p>Additional Copy</p></div>

      </div><!-- End cardContent -->

    </div><!-- End card -->
    

  </div><!-- End full -->

</div><!-- End row -->

Length Of Stay Banner

Created using code and not images, to allow the use of Tags.

You will also need to add a div with an id="exchangerate" in the header html to make the currency exchance work.

Stay Longer, Save More

Receive great value when you extend your stay

2-NIGHT STAYS STARTING FROM $135 PER NIGHT
4-NIGHT STAYS STARTING FROM $127 PER NIGHT + $50 Adventure Voucher
7-NIGHT STAYS STARTING FROM $109 PER NIGHT + $100 Adventure Voucher
View Code </> 


<!--<div class="row los--banner" style="border: 1px solid rgba(13,112,121,.5); margin: 30px;"> /with border option-->					  
<div class="row los--banner">

    <div class="full">
      <h2>Stay Longer, Save More</h2>
      <h3>Receive great value when you extend your stay</h3>
    </div><!-- /full -->

    <div class="third">

      <div class="los--tile">
        <span style="font-size: 180%; font-weight: 500; line-height: 130%;">2-NIGHT STAYS</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 160%;">STARTING FROM</span>
        <span style="font-size: 300%; font-weight: 600; line-height: 100%;" class="eprice" data-price="135">$135</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 160%;">PER NIGHT</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 100%;"></span> 
      </div><!-- /los--tile -->

    </div><!-- /third -->

    <div class="third">

      <div class="los--tile los_middle--tile">
        <span style="font-size: 180%; font-weight: 500; line-height: 130%;">4-NIGHT STAYS</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 160%;">STARTING FROM</span>
        <span style="font-size: 300%; font-weight: 600; line-height: 100%;" class="eprice" data-price="127">$127</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 160%;">PER NIGHT</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 100%;">+ $50 Adventure Voucher</span> 
      </div><!-- /los--tile -->

    </div><!-- /third -->

    <div class="third">

      <div class="los--tile">
        <span style="font-size: 180%; font-weight: 500; line-height: 130%;">7-NIGHT STAYS</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 160%;">STARTING FROM</span>
        <span style="font-size: 300%; font-weight: 600; line-height: 100%;" class="eprice" data-price="109">$109</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 160%;">PER NIGHT</span>
        <span style="font-size: 120%; font-weight: 300; line-height: 100%;">+ $100 Adventure Voucher</span> 
      </div><!-- /los--tile -->

    </div><!-- /third -->

</div><!-- /row los--banner -->

Fading Tiles

Can be used on wide and normal width pages, will auto adjust. Make sure copy doesn't overflow (resize browser to double check).
Simply change class="fade_tile_left" to class="fade_tile_right" to switch the side of the fade.

Adventure Differently in Whistler

We’ve developed tools and practices that allow us to keep our guests and community safe. See what we are doing for you and each other.

Learn More
View Code </> 


<div class="full">

    <div class="fading_tile">

        <div class="fade_tile_left">    

            <div class="fade_tile_text">

                <h2>Adventure Differently in Whistler</h2>
                <p>We’ve developed tools and practices that allow us to keep our guests and community safe. See what we are doing for you and each other.</p>

                <a href="/adventure-differently/" class="button button--turquoise" data-galabel="Feature: Adventure Differently">Learn More</a>

            </div><!-- /fade_tile_text -->

            <img class="fade_tile_desktop" src="//cdn.whistler.com/s3/images/summer2021/adventure-differently-fading-tile.jpg" alt="">
            <img class="fade_tile_mobile" src="//cdn.whistler.com/s3/images/summer2021/adventure-differently-fading-tile-mobile.jpg" alt="">

        </div><!-- /fade_tile_left -->

    </div><!-- /fading_tile -->

</div><!-- /full -->

Scrollers

"h3" and "span" tags can be removed if needed.
If more than one scroller is on a page change id="owl1" to owl2 and so on.

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here

Optional Header

Optional copy goes here
View Code </> 


<div id="owl1" class="owl-scroller">

<div class=" owl_scroller_nav_left"></div>

<div class=" owl_scroller_nav_right"></div>

<div class="owl-carousel">

    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>
    <div class="tile tile--plain"><h3>Optional Header</h3><img src="https://placehold.co/1000x800" alt=""><a href="" data-galabel=""><span>Optional copy goes here</span></a></div>

 </div><!-- /owl-carousel -->

</div><!-- /owl-scroller -->