---
title: Cruise Landing Page
layout: tui-ssg-template-layout.hbs
bodyClass: cruise
---

{{>hero_responsive cruise-line.data.fields}}

<main class="main-content">
  <section class="tui-subnav-section">
    <div class="tui-container">
      {{>cruise_overview_sub_navigation cruise-overview}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      <div class="cruise-intro-text tui-text-contents preamble">{{{cruise-line.data.fields.preamble}}}</div>
    </div>
  </section>

  <section>
    <div class="tui-container">
      {{>tui_top_facts facts=cruise-overview.data.fields.content.topFacts cssClass='heading-only'}}
    </div>
  </section>

  <section id="{{slug (lowercase (getResource cruise-overview.data.fields.resource.fields.items 'subNavigationDestinations'))}}">
    <div class="tui-container">
      {{>list_header heading='Här kryssar vi'}}
      {{>cruise_map}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-3-cruise-regions.data.fields.components.0.fields}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      {{>content_card_group cruise-ccg-3 heading="Passa på"}}
    </div>
  </section>

  <section id="{{slug (lowercase (getResource cruise-overview.data.fields.resource.fields.items 'subNavigationCruiseLines'))}}">
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-5-cruise-lines.data.fields.components.0.fields heading='Rederier' text=null}}
    </div>
  </section>

  <section id="{{slug (lowercase (getResource cruise-overview.data.fields.resource.fields.items 'subNavigationIncluded'))}}">
    <div class="tui-container">
      {{>tui_top_facts facts=cruise-overview.data.fields.content.topFacts2 cssClass='heading-text' heading='Det här ingår alltid på kryssningar med TUI' text=''}}
    </div>
  </section>

  <section id="{{slug (lowercase (getResource data.fields.resource.fields.items 'subNavigationFaq'))}}">
    <div class="tui-container faq-accordion">
      {{>list_header heading=(getResource cruise-overview.data.fields.resource.fields.items 'faqHeading')}}
{{>accordion cruise-overview.data.fields.faq.fields resourceObject=cruise-overview.data.fields.resource.fields.items}}
    </div>
  </section>

</main>

<script>
  function downloadLocationMapAtOnload() {
    var element = document.createElement('script')
    element.async = true
    element.defer = true
    element.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBnY3TvI8MED2KO3KsEWI27y-kdWie0NbE&channel=Blue{{upcase
      market}}&callback=TuiCruiseMap.initMap'
    document.body.appendChild(element)
  }

  if (window.addEventListener) {
    window.addEventListener('load', downloadLocationMapAtOnload, false)
  }
  else if (window.attachEvent) {
    window.attachEvent('onload', downloadLocationMapAtOnload)
  }
  else {
    window.onload = downloadLocationMapAtOnload
  }
</script>