Price based on

Dec 2024 (7 nights)Any guestsFrom Any departure locationEdit
Price from£60,000pp
Find accommodation

Buttons

Here are all the globally available CTA buttons for use across various platforms and implementations.

 <button class="c-btn">Button</button>
Link or Anchor <a href="#" class="c-btn">A Link</a>
 <button class="c-btn c-btn--outlined">A Link</button>
 <button class="c-btn ski-bg-color">A Link</button>
 <button class="c-btn walking-bg-color">A Link</button>
 <button class="c-btn lapland-bg-color">A Link</button>
  • <button class="c-btn c-btn--primary">Primary button</button>
  • <button class="c-btn c-btn--secondary">Secondary button</button>
  • <button class="c-btn c-btn--tertiary">Tertiary button</button>
  • <button class="c-btn c-btn--plain">Plain button</button>
  • <button class="c-btn c-btn--outlined">Outlined button</button>
  • <button class="c-btn c-btn--outlined-secondary">Outlined secondary button</button>
  • <button class="c-btn c-btn--white">White button</button>
  • <button class="c-btn c-btn--small">Small button</button>
  • <button class="c-btn c-btn--mid">Medium button</button>
  • <button class="c-btn c-btn--full">Full-width button</button> 
  • <button class="c-btn c-btn--icon c-btn--icon-left">Icon left button</button>
 <svg class="c-icon icon-{icon-name}" viewBox="0 0 1 1" aria-hidden="" role="img" title="Icon description title">
  <use xlink:href="/assets/img/icons.svg#{icon-name}"></use> 
 </svg>
</button>

  • <button class="c-btn c-btn--icon c-btn--icon-right">Icon right button</button>
 <svg class="c-icon icon-{icon-name}" viewBox="0 0 1 1" aria-hidden="" role="img" title="Icon description title">
  <use xlink:href="/assets/img/icons.svg#{icon-name}"></use> 
 </svg>
</button>
  • <button class="c-btn c-btn--link">Link button</button>
  • <button class="c-btn c-btn--unstyled">Unstyled button</button>
  • <button class="c-btn c-btn-cta c-btn--disabled">Disabled button</button>

Utility classes

Utility classes are single-purpose, reusable CSS classes designed to apply specific styles, such as margins, paddings, text alignment, or colors, directly to elements. They allow for quick and consistent styling without adding custom CSS, promoting modular and maintainable code. For example, u-margin-top-large adds a large top margin, while u-text-center centers text alignment.

Containers explained

The  .container class serves as the primary layout wrapper for large sections of your website. It ensures that content remains neatly structured within a maximum width of  1224px, preventing it from stretching too wide on larger screens. Despite this fixed width, it remains centered on the page to maintain a balanced and visually appealing layout.

This class is ideal for containing components within sections on controlled layouts.

This is a .container class with a max-width of 1224px

<div class="container"> 
 <p>This is a <code>.container</code> class with a max-width of <code>1224px</code></p> 
</div>

The  .u-contained class is a narrower content wrapper designed for sections that require a more compact layout compared to  .container. With a maximum width of  808px, it ensures that content remains more readable and does not stretch too wide on larger screens.

This makes it an ideal choice for wrapping components, articles, narrower than the container but remain centered as seen on the figma designs.

This is a .u-contained class with a max-width of 808px

<div class="u-contained"> 
 <p>This is a <code>.container</code> class with a max-width of <code>1224px</code></p> 
</div>

Colour Utility

Below are all available global colour utility classes across the various products such as, Walk and Lapland.

Below is a comprehensive list of global color utility classes tailored for different product themes, including Ski, Walking, and Lapland. These classes ensure consistent application of color schemes, aligning with the unique visual identity of each theme.

Aski-color
Aski-air-color
Aski-bg-color
Aski-air-bg-color
Awalking-color
Awalking-lime-color
Awalking-bg-color
Awalking-lime-bg-color
Alapland-color
Alapland-lilac-color
Alapland-bg-color
Alapland-lilac-bg-color

Theme Utility

Global color utility classes, prefixed with t-, are designed for product themes such as Ski, Walking, and Lapland. These classes provide a consistent way to apply theme-specific styles, ensuring each product maintains its unique visual identity. By using these utilities, you can easily implement cohesive and reusable designs tailored to the distinct aesthetic of each theme.

See the theme utility classes below
At-color-primary
At-color-primary-90
At-color-primary-75
At-color-primary-50
At-color-primary-25
At-color-primary-10
At-color-secondary
At-color-secondary-50
At-color-secondary-75
At-bg-color-primary
At-bg-color-primary-90
At-bg-color-primary-75
At-bg-color-primary-50
At-bg-color-primary-25
At-bg-color-primary-10
At-bg-color-secondary
At-bg-color-secondary-50
At-bg-color-secondary-75

Offset Utility

These utilities are designed to provide precise control over the vertical positioning of elements within your layout. By applying these classes, you can easily adjust the offset of components, ensuring they align perfectly with your design requirements.

The offset utilities are particularly useful for creating dynamic layouts where elements need to be positioned at specific distances from the top or bottom of their parent containers. This allows for greater flexibility in design, enabling you to achieve the desired visual hierarchy and spacing between components.

The offset utilities are available in various sizes, allowing you to choose the appropriate offset for your design needs. The available sizes include:

  • .u-off-top-sm: 24px offset top.
  • .u-off-top-md: 32px offset top.
  • .u-off-top-lg: 40px offset top.
  • .u-off-top-xl: 48px offset top.

Spacing Utility

Easily manage margins and paddings with dynamic strong spacing utility classes. These ensure consistent spacing across your design.

Global margins and paddings default to 60px; on desktop and 30px on mobile. Use global utilities (u-prefix) for page-wide spacing like  .u-margin-top-large    or  .u-padding-all-xs  .

Examples of Global utilities:

  • .u-margin-top-xs: 15px top margin (desktop), 15px (mobile).
  • .u-padding-all-small: 30px padding (desktop), 15px (mobile).
  • .u-margin-top: 60px top margin (desktop), 30px (mobile).
  • .u-margin-top-large: 120px top margin (desktop), 60px (mobile).

Component utilities: (c-prefix) customize spacing for elements like cards or buttons. Examples:

  • .c-margin-bottom-sm: 12px bottom margin (desktop), 12px (mobile).
  • .c-margin-bottom: 24px bottom margin (desktop), 16px (mobile).
  • .c-padding-right-md: 32px right padding (desktop), 24px (mobile).
  • .c-padding-right-lg: 48px right padding (desktop), 32px (mobile).

Remove spacing with-none, e.g.,  .u-margin-top-none.

These utilities keep your designs consistent and modular at both global and component levels.

See utility spacing use-case below:

<section class="c-section u-margin-top u-padding-top u-padding-bottom"> 
 <p>Content here</p> 
</section>

Margin top classes

0px top:  u-margin-top-none

15px top:  u-margin-top-xs

30px top:  u-margin-top-small

60px top:  u-margin-top

80px top:  u-margin-top-medium

120px top:  u-margin-top-large

Padding top classes

0px top:  u-padding-top-none

15px top:  u-padding-top-xs

30px top:  u-padding-top-small

60px top:  u-padding-top

80px top:  u-padding-top-medium

120px top:  u-padding-top-large

Margin bottom classes

0px bottom:  u-margin-bottom-none

15px bottom:  u-margin-bottom-xs

30px bottom:  u-margin-bottom-small

60px bottom:  u-margin-bottom

80px bottom:  u-margin-bottom-medium

120px bottom:  u-margin-bottom-large

Padding bottom classes

0px bottom:  u-padding-bottom-none

15px bottom:  u-padding-bottom-xs

30px bottom:  u-padding-bottom-small

60px bottom:  u-padding-bottom

80px bottom:  u-padding-bottom-medium

120px bottom:  u-padding-bottom-large

Margin left classes

0px left:  u-margin-left-none

15px left:  u-margin-left-xs

30px left:  u-margin-left-small

60px left:  u-margin-left

80px left:  u-margin-left-medium

120px left:  u-margin-left-large

Padding left classes

0px left:  u-padding-left-none

15px left:  u-padding-left-xs

30px left:  u-padding-left-small

60px left:  u-padding-left

80px left:  u-padding-left-medium

120px left:  u-padding-left-large

Margin right classes

0px right:  u-margin-right-none

15px right:  u-margin-right-xs

30px right:  u-margin-right-small

60px right:  u-margin-right

80px right:  u-margin-right-medium

120px right:  u-margin-right-large

Padding right classes

0px right:  u-padding-right-none

15px right:  u-padding-right-xs

30px right:  u-padding-right-small

60px right:  u-padding-right

80px right:  u-padding-right-medium

120px right:  u-padding-right-large

Margin all sides classes

0px margin all:  u-margin-all-none

15px margin all:  u-margin-all-xs

30px margin all:  u-margin-all-small

60px margin all:  u-margin-all

80px margin all:  u-margin-all-medium

120px margin all:  u-margin-all-large

Padding all sides classes

0px padding all:  u-padding-all-none

15px padding all:  u-padding-all-xs

30px padding all:  u-padding-all-small

60px padding all:  u-padding-all

80px padding all:  u-padding-all-medium

120px padding all:  u-padding-all-large

See component spacing use-case below:

<div class="c-section c-margin-top c-padding-top c-padding-bottom"> 
 <p>Content here</p> 
</div>

Margin top classes

0px top:  c-margin-top-none

8px top:  c-margin-top-xxs

12px top:  c-margin-top-xs

16px top:  c-margin-top-sm

24px top:  c-margin-top-md

32px top:  c-margin-top

48px top:  c-margin-top-lg

Padding top classes

0px top:  c-padding-top-none

8px top:  c-padding-top-xxs

12px top:  c-padding-top-xs

16px top:  c-padding-top-sm

24px top:  c-padding-top-md

32px top:  c-padding-top

48px top:  c-padding-top-lg

Margin bottom classes

0px bottom:  c-margin-bottom-none

8px bottom:  c-margin-bottom-xxs

12px bottom:  c-margin-bottom-xs

16px bottom:  c-margin-bottom-sm

24px bottom:  c-margin-buttom

32px bottom:  c-margin-bottom-md

48px bottom:  c-margin-bottom-lg

Padding bottom classes

0px bottom:  c-padding-bottom-none

8px bottom:  c-padding-bottom-xxs

12px bottom:  c-padding-bottom-xs

16px bottom:  c-padding-bottom-sm

24px bottom:  c-padding-buttom

32px bottom:  c-padding-bottom-md

48px bottom:  c-padding-bottom-lg

Margin left classes

0px left:  c-margin-left-none

8px left:  c-margin-left-xxs

12px left:  c-margin-left-xs

16px left:  c-margin-left-sm

24px left:  c-margin-left-md

32px left:  c-margin-left

48px left:  c-margin-left-lg

Padding left classes

0px left:  c-padding-left-none

8px left:  c-padding-left-xxs

12px left:  c-padding-left-xs

16px left:  c-padding-left-sm

24px left:  c-padding-left-md

32px left:  c-padding-left

48px left:  c-padding-left-lg

Margin right classes

0px right:  c-margin-right-none

8px right:  c-margin-right-xxs

12px right:  c-margin-right-xs

16px right:  c-margin-right-sm

24px right:  c-margin-right-md

32px right:  c-margin-right

48px right:  c-margin-right-lg

Padding right classes

0px right:  c-padding-right-none

8px right:  c-padding-right-xxs

12px right:  c-padding-right-xs

16px right:  c-padding-right-sm

24px right:  c-padding-right-md

32px right:  c-padding-right

48px right:  c-padding-right-lg

Margin all sides classes

0px margin all:  c-margin-all-none

8px margin all:  c-margin-all-xxs

12px margin all:  c-margin-all-xs

16px margin all:  c-margin-all-sm

24px margin all:  c-margin-all

32px margin all:  c-margin-all-md

48px margin all:  c-margin-all-lg

Padding all sides classes

0px padding all:  c-padding-all-none

8px padding all:  c-padding-all-xxs

12px padding all:  c-padding-all-xs

16px padding all:  c-padding-all-sm

24px padding all:  c-padding-all

32px padding all:  c-padding-all-md

48px padding all:  c-padding-all-lg

Section headings

Left heading

<div class="u-section-heading">
   <h3 class="c-heading-h3">Left heading</h3>
</div>

Centered heading

<div class="u-section-heading center">
   <h3 class="c-heading-h3">Centered heading</h3>
</div>

Right heading

<div class="u-section-heading right">
   <h3 class="c-heading-h3">Right heading</h3>
</div>

Justified heading

heading link / buttom 
<div class="u-section-heading justify">
   <h3 class="c-heading-h3">Justified heading</h3>
   <a href="#0" class="c-btn c-btn--outlined" data-module="teleport" data-teleport-breakpoint-1024="button345">Button / Link</a>
</div>
<div id="button345" class="u-section-heading__button">Destination @<=992</div>
Button above will moved  over here  =>    over here at the specified breakpoint

Bullet list

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 6

<ul class="c-list"></ul>

<ul class="c-list c-list--inghams"></ul>

<ul class="c-list c-list--checkmark"></ul>

<ul class="c-list c-list--arrowhead"></ul>

<ul class="c-list c-list--asterisk"></ul>

<ul class="c-list c-list--counter"></ul>

<ul class="c-list">
  <li class="c-list-item">List item 1</li>
  <li class="c-list-item">List item 2</li>
  <li class="c-list-item">List item 3</li>
</ul>

Tags

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 6
<ul class="c-tag-list">
  <li class="c-tag">List item 1</li>
  <li class="c-tag">List item 2</li>
  <li class="c-tag">List item 3</li>
</ul>

Trail master

Jira ticket(s)INW-2004INW-194INW-2003

Best for

Beginner

Intermediate

Advanced

Cross-country

Snowboard

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue pharetra, lobortis urna eu, bibendum mauris. Pellentesque mollis varius efficitu

Runs overview

Runs

Ski routes map
Green:42km
Blue:79km
Red:34km
Black: 4 runs (34km)
Ski area:
425km
Resort altitude:
2100m
Cross country routes:
275km
Ski altitude:
1735m - 3057m
Off-piste options:
Yes
Snow Cannons:
626
Snow park:
Yes (No halfpipe)
Ski lifts:
132 lifts, 25 baby drags
Lift ski lockers:
No
Glaciers:
1

Large countdown panel

Offer title looks something like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris auctor vitae dolor ac hendrerit. Praesent vitae magna massa.

Ckick here

JS - Toggle

Jira ticket(s)INW-2076
The background color of this target box should change when the button is clicked.
<div">
  <button class="c-btn" data-toggle-targets="#toggleTarget" data-toggle-class="t-bg-color-secondary">Click to toggle</button>
  <div class="c-padding-all-xs c-margin-left-xs" id="toggleTarget">this target box background-color should change when the button is clicked</div>
</div>

Targets can be specified as a comma-separated list (e.g., #target1, #target2, #target3) or as a single target (e.g.,#target1). The class to be toggled can be either a single class or multiple classes separated by spaces.

Additionally, you can toggle the trigger element’s class by including the data-toggle-trigger-class  attribute in the trigger element.

Trust Signals

This component provides key trust signals and assurances to users, enhancing credibility by highlighting expertise, protection, experience, and sustainability efforts

  • Expert local knowledge for every hotel package
  • Fully ABTA and ATOL protected
  • Snow Guarantee
  • 85 years of worldly knowledge at your fingertips
  • We support carbon removal projects 
<div class="c-badge-context splide" role="slider" data-config="carousel" data-module="splidey" data-option-type="slide" data-option-per-page="1" data-option-interval="5000" data-option-autoplay="true" data-option-auto-width="true" data-option-pagination="false" data-option-rewind="true" data-option-breakpoint-1024-per-page="4" data-option-breakpoint-1024-rewind="false" data-option-breakpoint-1024-autoplay="false">
  <div class="splide__track">
    <ul class="c-badge-context__items splide__list">
      <li class="c-card c-badge-context__item splide__slide">
        <svg class="c-icon icon-in-safe-hands" viewbox="0 0 1 1" aria-hidden="" role="img" title="user">
          <use xlink:href="/imgs/icons.svg#in-safe-hands"></use>
        </svg><span class="u-text-bold">Expert local knowledge for every hotel package</span>
      </li>
    </ul>
  </div>
</div>

Oval badges

Jira ticket(s)INW-2055 
<ul class="c-oval-badges">
 <li class="list-item">
   <a href="#">
     <svg class="c-icon icon-flag-andorra" viewBox="0 0 1 1" aria-hidden="" role="img" title="flag Andorra">
       <use xlink:href="/imgs/icons.svg#flag-andorra"></use>
     </svg>Andorra
   </a>
 </li>
</ul>

Outlined - on:hover  <ul class="c-oval-badges outline"></ul>

Filled - on:hover  <ul class="c-oval-badges fill"></ul>

8px border-radius - radius-sm  <ul class="c-oval-badges fill radius-sm"></ul>

Insider categories

<ul class="c-catblock">
  <li class="list-item"><a href="#0">Sustainability</a></li>
  <li class="list-item"><a href="#0">Ski levels</a></li>
</ul>

Outlined - on:hover  <ul class="c-catblock outline"></ul>

Filled - on:hover  <ul class="c-catblock fill"></ul>

Timeline

Centered timeline

  1. London St Pancras
  2. Paris Gare de Nord

    Metro transfer (2 stops)

  3. Paris Gare de Nord
  4. Zurich

    Change Station

  5. Zurich
  6. Chur
  7. St Moritzectetur

Right timeline

  1. St Moritz
  2. Chur
  3. Zurich

    Change Station

  4. Zurich
  5. Paris Gare de Nord

    Metro transfer (2 stops)

  6. Paris Gare de Nord
  7. London St Pancras
<ol class="c-timeline" aria-label="Train Journey Timeline">
  <li class="c-timeline__item" role="listitem">
    <time class="c-timeline__date" datetime="06:31" aria-label="Departure time at 06:31 GMT-12">06:31 GMT-12</time>
    <div class="c-timeline__station">
      <span>London St Pancras</span>
    </div>
  </li>
  <li class="c-timeline__item transfer" role="listitem">
    <time class="c-timeline__date" datetime="2024-11-08" aria-label="Date of transfer: 8th November 2024">08/11/2024</time>
    <div class="c-timeline__station">
      <span>Paris Gare de Nord</span>
      <p>Metro transfer (2 stops)</p>
    </div>
  </li>
  <li class="c-timeline__item change" role="listitem">
    <time class="c-timeline__date" datetime="18:38" aria-label="Change at Zurich station at 18:38">18:38</time>
    <div class="c-timeline__station">
      <span>Zurich</span>
      <p>Change Station</p>
    </div>
  </li>
  <li class="c-timeline__item terminus" role="listitem">
    <time class="c-timeline__date" datetime="22:00" aria-label="Arrival time at St Moritz at 22:00">22:00</time>
    <div class="c-timeline__station">
      <span>St Moritz</span>
    </div>
  </li>
</ol>

Right positioning will require appending the class right as shown below:

<ol class="c-timeline right" aria-label="Train Journey Timeline"></ol>

Highlight component

Included in Inghams ski holidays to St. Moritz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris auctor vitae dolor ac hendrerit. Praesent vitae magna massa.

  • List item 1
  • List item 2
  • List item 3
<div class="c-highlight">
  <span class="c-highlight-anchor">
    <svg class="c-icon icon-inghams-a" viewbox="0 0 1 1" aria-hidden="" role="img" title="user">
      <use xlink:href="/imgs/icons.svg#inghams-a"></use>
    </svg>
  </span>
  <div class="c-highlight-content">
    <h4>Included in Inghams ski holidays to St. Moritz</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris auctor vitae dolor ac hendrerit. Praesent vitae magna massa.</p>
    <ul class="c-list c-list--arrowhead c-margin-top-xs">
      <li class="c-list-item">List item 1</li>
      <li class="c-list-item">List item 2</li>
      <li class="c-list-item">List item 3 </li>
    </ul>
  </div>
</div>

Single column article

A scenic view of a landscape
Caption goes here

Labore ut proident culpa proident sed. Dolore, dolore, qui in qui ullamco, quis elit sunt ex. Duis commodo proident, fugiat duis, cillum, dolor ut est ad duis labore amet, consectetur. Incididunt nisi, elit, aliquip nostrud proident aute aliqua aliquip cupidatat pariatur id enim deserunt? Consequat dolore, sint cupidatat quis, adipiscing, sit dolor, ullamco in adipiscing ex veniam.

Sed nisi sint, laborum, dolor sit exercitation, dolore cillum fugiat aliqua, eiusmod et. Sit officia, ullamco in, ut quis voluptate, nostrud laborum lorem fugiat incididunt qui laboris esse. Officia anim magna do ad eiusmod ut lorem irure in cupidatat aliqua? Non aute incididunt sint, dolore enim ea magna qui? Dolor, in proident in sunt laboris dolor in quis, laborum esse qui labore ad laborum ut lorem?

Read more

Double Column article

A scenic view of a landscape
Caption goes here

Dolore non commodo non labore. Sint quis sed excepteur deserunt, ut amet, amet nostrud duis magna ut ea? Laborum laborum, eiusmod mollit magna consectetur laboris mollit, veniam, laborum, in? Labore irure id incididunt dolore anim, in, nulla dolore deserunt velit commodo?

A scenic view of a landscape
Caption goes here

Fugiat dolor, proident tempor proident magna pariatur et, ex culpa culpa voluptate? Esse, amet, irure duis in magna quis, non lorem aute proident. Fugiat, cillum, sit, sed magna consequat, do, adipiscing deserunt, eiusmod. In pariatur, nostrud duis, proident cupidatat aute?

Accordion

This is the content for Question

This is the content for Question

This is the content for Question

Sign up news

<div class="c-signup-panel">
  <span>Sign up for news &amp; exclusive offers</span>
  <a class="c-btn c-btn--small c-margin-all-none" href="#0">Sign up now</a>
</div>

Sliders

Jira ticket(s)INW-2060 
<div class="splide" id="splidey js-slider" role="slider" data-config="slider" data-module="splidey" data-option-arrows="false" data-option-breakpoint-1024-arrows="true" data-setup-breakpoint-1024-indicator="of" data-option-autoplay="true" data-option-per-page="1" data-option-pagination="true" data-option-breakpoint-1024-pagination="false" aria-labelledby="slider-heading">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
         <img src="https://images.pexels.com/photos/38242/pexels-photo-38242.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt="alt" />
      </li>
    </ul>
  </div>
</div>

Slider with a foot panel

Free child ski gear when you pre-book Optional Link
<div>
   <div class="splide js-slider" role="slider" data-config="slider" data-module="splidey" data-option-arrows="false" data-option-breakpoint-1024-arrows="true" data-setup-breakpoint-1024-indicator="of" data-option-autoplay="true" data-option-per-page="1" data-option-pagination="true" data-option-breakpoint-1024-pagination="false" aria-labelledby="slider-heading">
     <div class="splide__track">
       <ul class="splide__list">
        <li class="splide__slide">
           <img src="https://images.pexels.com/photos/38242/pexels-photo-38242.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt="alt" />
        </li>
       </ul>
     </div>
   </div>
   <div class="c-image-grid__foot">Free child ski gear when you pre-book <a href="#0">Optional Link</a></div>
</div>

Lead Image Grid

Jira ticket(s)INW-2069INW-1017INW-1498

The image grid component is a flexible component that can be used in different scenarios. It responds as a desktop grid that pops-up a slider and simple on mobile viewports.

Use the case buttons below to switch and test all the different use cases for the image grid component.

Image Altinghams choice
Free child ski gear when you pre-book Optional Link
Show all photos
inghams choice
  • Image Alt
  • Image Alt
  • Image Alt
  • Image Alt
  • Image Alt
<div class="c-image-grid-block">
  <!-- Desktop Grid -->
  <div class="c-image-grid-desktop">
    <div class="c-image-grid">
      <div class="c-image-grid-main">
        <img src="https://images.pexels.com/photos/38242/pexels-photo-38242.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt>
        <span class="c-image-grid-main__tag">
          <svg class="c-icon icon-flag-inghams-choice" viewBox="0 0 1 1" aria-hidden role="img" title="inghams choice">
            <use xlink:href="/imgs/icons.svg#flag-inghams-choice"></use>
          </svg>
        </span>
        <div class="c-image-grid__foot">Free child ski gear when you pre-book <a href="#0">Optional Link</a></div>
      </div>
      <div class="c-image-grid-side case-1">
        <div class="c-image-grid-item show-all">
          <a data-module="modal" href="#image-gallery-modal" data-modal-auto-create="true" data-self-close="true">Show all photos</a>
          <img src="https://images.pexels.com/photos/38242/pexels-photo-38242.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt>
        </div>
      </div>
    </div>
  </div>
  <!-- Mobile slider -->
  <div class="c-image-grid-mobile">
    <div class="splide" id="splidey" role="slider" data-config="slider" data-module="splidey" data-indicator="of" data-option-per-page="1" data-option-pagination="true" data-option-breakpoint-768-pagination="false" aria-labelledby="slider-heading">
       <span class="c-image-grid-main__tag">
         <svg class="c-icon icon-flag-inghams-choice" viewBox="0 0 1 1" aria-hidden role="img" title="inghams choice">
           <use xlink:href="/imgs/icons.svg#flag-inghams-choice"></use>
         </svg>
       </span>
       <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">
             <img src="https://images.pexels.com/photos/38242/pexels-photo-38242.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- Popup slider -->
<div id="image-gallery-modal-placeholder" hidden>
  <div id="image-gallery-modal">
    <div class="c-modal__head">
      <div class="c-modal__close">
        <svg class="c-icon icon-close" viewbox="0 0 1 1" aria-hidden role="img" title="close">
          <use xlink:href="/imgs/icons.svg#close"></use>
        </svg>
      </div>
    </div>
    <div class="c-modal__body">
      <div class="splide" id="splidey" role="slider" data-config="slider" data-module="splidey" data-indicator="of" data-option-per-page="1" data-option-pagination="false" aria-labelledby="slider-heading">
        <div class="splide__track">
          <ul class="splide__list">
            <li class="splide__slide">
               <img src="https://images.pexels.com/photos/38242/pexels-photo-38242.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

See case modifier classes below: <div class="c-image-grid-side case-1"></div>

case-1, case-2, case-3, case-4, case-5, case-6

Grid Block

The grid-block component is a multipurpose component that can be used in different scenarios as rendered below in multiple cases.

Use the case buttons below to switch and test all the different use cases for this component.

Below are all case classes: case-1, case-2-1, case-3, case-3-1, case-4, case-4-1, case-4-2, case-4-3, case-5-1, fixed center, fixed right

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

  • Last minute ski deals
    Save up to £255pp
  • Last minute walking deals
    Save up to £255pp
  • Last minute lapland deals
    Save up to £255pp
    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

  • Last minute ski deals
    Save up to £255pp
  • Last minute ski deals
    Save up to £255pp
  • Last minute walking deals
    Save up to £255pp
  • Last minute lapland deals
    Save up to £255pp
    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

    • Article tag

    Article title

<ul class="c-grid-block case-4">
  <li class="c-grid-block__item">
    Content here
  </li>
  <li class="c-grid-block__item">
    Content here
  </li>
</ul>

JS - Modal

Jira ticket(s)INW-2077

Open local div content

This example demonstrates how to open a modal that dynamically displays content that is already present on the same page but initially hidden. The modal is triggered by an element with an href anchor, which references the id of the hidden content.

Open modal 
<a class="c-btn" 
   href="#modal-popup" 
   data-module="jsModal" 
   data-modal-classes="js-modal image-viewer" 
>Open modal</a>

Open local page content

This example demonstrates how to open a modal that dynamically loads content from the same domain using a relative URL reference. Specifically, it fetches content from /regions.html and extracts elements matching the .c-geography-context__glance class selector. This method allows for efficient loading of specific sections of a webpage without requiring a full page reload.

Open modal 
<botton class="c-btn" 
   data-module="jsModal" 
   data-modal-classes="js-modal" 
   data-modal-title="Graubunden Ski Region at a glance" 
   data-modal-url="/regions.html" 
   data-modal-content-class="c-geography-context__glance-content" 
>Open modal</botton>

Open remote div content

This example demonstrates how to open a modal that dynamically loads remote content from Inghams Travel Advice. The modal fetches the webpage and extracts content specifically from elements matching the .c-page-content class selector.

Open Travel Advice 
<botton class="c-btn" 
   data-module="jsModal" 
   data-modal-classes="js-modal" 
   data-modal-title="Travel Advice" 
   data-modal-url="https://www.inghams.co.uk/travel-advice" 
   data-modal-content-class="c-page-content" 
>Open Travel Advice</botton>

Vue.js component

This component is available in Vuejs with the options below:

  1. Modal content target: targetId
  2. Modal title: title
  3. Modal URL to fetch content from an external domain url
  4. Modal Content class is relative to Modal URL, this will target a specific div by class contentClass
  5. Additional class to be applied to the modal container containerClass
  6. Callback on-modal-close to be applied to the modal container @onModalClose
<template>
  <JsModal 
    contentClass="c-page-content"
    containerClasses="js-modal"
    title="Travel Advice"
    url="https://www.inghams.co.uk/travel-advice"
    @onModalClose=""
  >Open Travel Advice</JsModal>
</template>
<script setup>
  import JsModal from "@Components/global/JsModal.vue";
</script>

JS - LazyImage Loader

Jira ticket(s)22382247

Lazyload images / div background

The image below will load when the user scrolls to the content. It relies on MutationObserver to detect when the component is in the viewport, and then the image can successfully render, thus reducing resource consumption on page load.

<!-- Lazy Loaded Image -->
<img data-module="lazyImage"
   data-src="high-res-image.jpg"
   data-placeholder="/imgs/pixel-holder.png"
   alt="Lazy Loaded Image">

<!-- Lazy Loaded Background -->
<div data-module="lazyImage"
   data-bg-src="high-res-bg.jpg"
   data-bg-placeholder="/imgs/pixel-holder.png">
</div>

Vue.js component

This component is available in Vuejs components/global directory. Using the src attribute will return an image while the bgSrc returns a div with image background

<template>
  <LazyImage src="image-source.jpg" placeholder="/imgs/pixel-holder.png" alt="Alt text" @onLoaded="" />
  <LazyImage bgSrc="image-source.jpg" placeholder="/imgs/pixel-holder.png" alt="Alt text" @onLoaded="" />
</template>
<script setup>
  import LazyImage from "@Components/global/LazyImage.vue";
</script>

Heroes

Jira ticket(s)22382247

There are multiple varients of the hero banner and various positioning classes to configure the hero layout as seen below:

Full-bleed Hero

Full-bleed Hero - Inverted

Offset Hero with Widget

Offset Hero with Widget - Inverted

Offset Hero with Widget

Offset Hero with Widget

Compact Hero - contained

Compact Hero - Full bleed

Heroes explained

The bracketed classes are modifiers that control layout and positioning, determining banner types andn content positioning.

  • hero-banner--full-bleed full-bleed banner with contained widget .
  • hero-banner--offset banner with offset widget.
  • invert reverses banner and widget order to alternate layout.

The banner-content section sits on top of the background media (image/video) and holds all textual content, including static headings, animated text, promotional offers, and a CTA button as seen on the code sample below, the bracketed modifiers will determine positioning.

  • center, right content is centered or aligned to the right.
  • middle, bottom content is vertically aligned to the middle or bottom.
<div class="c-heroes [hero-banner--full-bleed hero-banner--offset hero-banner--compact hero-banner--split] [invert]">
  <div class="banner-wrapper">
    <div class="banner-video">
      <!-- Image start -->
      <div class="banner-image" data-module="lazyImage"
             data-bg-placeholder="/imgs/pixel-holder.png"
             data-bg-src="https://s3-alpha-sig.figma.com/img/8f75/2bff/da9e6c5939f4c121928a174332190b4d?Expires=1740355200&amp;Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&amp;Signature=MWIN-QZ6ZE04Ih4EKOJ2MqGBtLrVwGfCLl-iVaO3fVCvRWHNLuItU562~c6HySTTAAhrLrS-Q0286LtOJec4JaC0vsRWRJ4D8uK5GKKhEVkVWdhgEE4DgUusN7vJrTB9wlvabCYqsndSd7QyZYVuyxn8hJVPMF0bO9cXDcESdbBQAmGcvp~XCc98Zg-qTYTcc2p-iVl4vlhV3dt5B-73JmdGbQ1dG31hlWuIWAn-pCxuLf6W-VLfXk8t~Epx41DNDDeF0tlKEoMY~2D7SPxtHst707O8mKZJBl8XCjRgbxni7Sl44-cSrXhbmOW4M7TFUFd8MESKgWg5IMOl2NCFcg__"
             alt="Skiing in Graubunden Ski Region">
      </div>
      <!-- Image end -->
      <!-- Video start -->
      <video id="background-video" loop="true" muted="true" autoplay="true" playsinline="true" 
             poster="https://res.cloudinary.com/dpnwz5k9v/image/upload/c_scale,w_auto,dpr_auto,q_auto/v1/InghamsV2-testupgrade/media/in4dm3fa/291a0817.jpg" 
             alt="Hero Banner Background Video or Image">
        <source src="https://res.cloudinary.com/dqc68ksfw/video/upload/v1681287926/Inghams/Inghams-homepage-video-apri-2023.mp4" type="video/mp4">
      </video>
      <!-- Video end -->
    </div>
    <div class="banner-content overlay [center right] [middle bottom]">
       <!-- Static hero text -->
       <div class="banner-heading">
         SKIING IN GRAUBUNDEN <span class="ski">SKI</span> REGION
       </div>
       <!-- Static hero text -->
       <!-- Animated hero text -->
       <div class="banner-heading"
            data-config-delay="100"
            data-module="typewriter"
            data-config-keyword="#animatehere"
            data-ski="Ski,100,2500"
            data-walking="Walking,50,2000"
            data-lapland="Lapland,200,1500">
         <span>Find your next #animatehere Adventure</span>
       </div>
       <!-- Animated hero text -->
       <!-- Marketing hero text -->
       <div class="banner-heading">BLACK FRIDAY OFFER 25% OFF</div>
       <div class="banner-description">
         <p>This is an optional sales message</p>
       </div>
       <a class="c-btn c-btn--secondary" href="#0">See all offers</a>
       <!-- Marketing hero text -->
    </div>
  </div>
  <div class="widget-holder">
    <!-- Insert search widget here -->
    <div class="dummy-widget-block"></div>
    <!-- Insert search widget here -->
  </div>
</div>

Travel Info

Jira ticket(s)2277

Fly to Zurich Airport (ZRH)

Our flights depart Sundays for 7 or 14 nights.
Transfers are included in your trip.

Depart from
London Gatwick, East Midlands, Newcastle & Glasgow

Transfers
Transfer approx. 20 minutes by coach.

Car hire available: No

Evening resort bus service: Yes

Parking available: No

Resort Ski bus available: Yes

Travel to St. Moritz railway station

Take the Eurostar from St. Pancras, changing at Paris, Zurich, Interlaken Ost & Lauterbrunnen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Transfers
Transfer approx. 10 minutes by shuttle bus.

Transfers
Transfer approx. 20 minutes by coach.

Car hire available: No

Evening resort bus service: Yes

Parking available: No

<div class="c-travel-info js-grid p-content u-text-medium" data-module="responsiveGrid" data-grid-options="1,2,3">
  <div class="c-travel-info__item grid__item">
    <h4 class="iconic-heading">
      <svg class="c-icon icon-plane-out-filled" viewBox="0 0 1 1" aria-hidden="" role="img" title="plane">
        <use xlink:href="/imgs/icons.svg#plane-out-filled"></use>
      </svg><span>Fly to Zurich Airport (ZRH)</span>
    </h4>
    <p>Our flights depart Sundays for 7 or 14 nights.<br>Transfers are included in your trip.</p>
    <p><strong>Depart from</strong><br>London Gatwick, East Midlands, Newcastle &amp; Glasgow</p>
    <p><strong>Transfers</strong><br>Transfer approx. 20 minutes by coach.</p>
    <p><strong>Car hire available:</strong> No</p>
    <p><strong>Evening resort bus service:</strong> Yes</p>
  </div>
  <div class="c-travel-info__item grid__item">
    <h4 class="iconic-heading">
      <svg class="c-icon icon-rail" viewBox="0 0 1 1" aria-hidden="" role="img" title="rail">
        <use xlink:href="/imgs/icons.svg#rail"></use>
      </svg><span>Travel to St. Moritz railway station</span>
    </h4>
    <p>Take the Eurostar from St. Pancras, changing at Paris, Zurich, Interlaken Ost &amp; Lauterbrunnen.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><strong>Transfers</strong><br>Transfer approx. 10 minutes by shuttle bus.</p>
    <p><strong>Transfers</strong><br>Transfer approx. 20 minutes by coach.</p>
    <p><strong>Car hire available:</strong> No</p>
  </div>
</div>

The Travel Info component is a flexible component that can be used in different scenarios. This grid is driven by Javascript and can be configured via the data-grid-options attribute with comma-separated values for the number of columns in the grid. The default is 1 column on mobile, 2 columns on tablet, and 3 columns on desktop.

Responsive Grid Component

The responsive grid component is a flexible mobile-first component that can be used in different scenarios.

You can set a single value or 2 values and the component will use the first value for mobile and the second value for tablet and desktop. For example, data-grid-options="1,2" will create a grid with 1 column on mobile and 2 columns on tablet and desktop. You can also set 3 values for mobile, tablet, and desktop respectively (e.g., data-grid-options="1,2,3")

The component will automatically adjust the number of columns based on the screen size. The grid items will stack on top of each other on mobile and will be displayed in a grid layout on larger screens.

<div class="js-grid" data-module="responsiveGrid" data-grid-options="1,2,3">
  <div class="grid__item">
  </div>
  <div class="grid__item">
  </div>
</div>
Components   ⇾