Hero

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

Hero Full Width Image no widget or overlay

<div class="hero hero--text">
  <img class="header-image cld-responsive" data-src="https://res.cloudinary.com/whistler/image/upload/w_auto,c_scale,f_auto,dpr_auto,q_auto/v1/s3/images/header/header-1800x700.jpg" alt="Descr" src="//cdn.whistler.com/s3/images/transparent.gif" />
</div><!-- /.hero -->

Hero Full Width Image with widget

<div class="hero hero--text">
  <img class="header-image cld-responsive" data-src="https://res.cloudinary.com/whistler/image/upload/w_auto,c_scale,f_auto,dpr_auto,q_auto/v1/s3/images/header/header-1800x700.jpg" alt="Descr" src="//cdn.whistler.com/s3/images/transparent.gif" />
    <div class="widget-holder">
    <!-- PASTE WIDGET HERE -->
      </div><!-- /.widget-new -->
    </div><!-- /.hero -->

Hero Full Width Image with overlay & widget

<div class="hero hero--text">
<div class="overlay">
<div class="overlay-content">
<p class="overlay-line1">SPRING</p>
<p class="overlay-line2">IN WHISTLER</p><br/>
<p class="overlay-line3">ROOMS FROM</p>
<p class="overlay-line4">$139</p>
<p class="overlay-line5">+ FREE APRÈS</p>
</div>
</div>
  <img class="header-image cld-responsive" data-src="https://res.cloudinary.com/whistler/image/upload/w_auto,c_scale,f_auto,dpr_auto,q_auto/v1/s3/images/header/header-1800x700.jpg" alt="Descr" src="//cdn.whistler.com/s3/images/transparent.gif" />
    <div class="widget-holder">
    <!-- PASTE WIDGET HERE -->
      </div><!-- /.widget-new -->
    </div><!-- /.hero -->

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

<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

<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

1. List Item One
2. Link Item Two
3. 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.

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

<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

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

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

Button Submit button Link button

<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

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

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

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

Banners

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

Summer Itineraries

• Adrenaline Adventure
• Soft Adventure
• Family friendly Activities
• Fitness & Recreation
• On The Water
• Iconic Whistler Sightseeing
• Arts & Culture
• Food & Drink

View All Itineraries

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.

<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

<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

Aug 28

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

What's on This Weekend

Adult ski or snowboard lessons

View Listings

EverySunday

Summer Will Be Awesome

Whistler switches into summer mode

View Summer Activities

<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

View Details

Whistler Olympic Experience Package from $659 per person

Valid for arrival from Feb 1 - Mar 30, 2014

View Details

Whistler Romance Package from $177 per person, per night

Valud for arrivals from Feb 1 - Mar 30, 2014

View Details

<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

...

Four Season Resort Whistler

Save Up To 20%, per night

Learn More?

Four Season Resort Whistler

Save Up To 20%, per night

Learn More

Four Season Resort Whistler

Save Up To 20%, per night

Learn More

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

Short Tiles

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

Aug 28

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

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

Check Availability

Search

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

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

Search

<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

Heli Skiing

Cat Skiing

Terrain Parks

<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

...

Summer Family Fun in Whistler

Olympic Plaza Grand Opening

Dog-Friendly Whistler

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

Read More

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.

Read More

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

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

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

Offer Tiles

...

View Offer

View Offer

View Offer

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

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.

<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

Forms

...