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

<main class="main-content">
  {{>hero_responsive_hotel cruise-ship.data.fields.content resourceObject=data.fields.resource.fields.items hideHeart=true heroSplash=data.fields.heroSplash}}
  <section class="product-header-section">
      {{>product_header cruise-ship hideBookingButton=true hidePriceInfo="true"}}

    <div class="product-header tui-container">
      {{>tui_top_facts facts=cruise-ship.data.fields.content.usps cssClass='heading-text heading-text-inverse' heading=(getResource cruise-ship.data.fields.resource.fields.items 'topFactsHeading')}}
    </div>
  </section>

  <div class="tui-container tui-subnav-section">
    {{>cruise_ship_sub_navigation cruise-ship}}
  </div>


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

  <section id="{{slug (lowercase (getResource cruise-ship.data.fields.resource.fields.items 'subNavigationDestinations'))}}">
    <div class="tui-container">
      {{>list_header heading='Kryssningar i Medelhavet' text=''}}
      <div class="img-map-two-columns clearfix">
        <div class="img-map-left-column">
          {{>overview_image country.data}}
        </div>
        <div class="img-map-right-column">
          {{>overview_map country.data market=country.meta.market}}
        </div>
      </div>
    </div>
  </section>

  {{>content_not_found h3_text="Kryssningarna verkar ha gått på semester" text="Just nu har vi inga kryssningar med Hooola baloola ship." button_href="/test/" button_text="Hitta fler kryssningar"}}

  <section>
    <div class="tui-container">
      {{>list_header heading='Kryssningar i Karibien' text=''}}
      <div class="img-map-two-columns clearfix">
        <div class="img-map-left-column">
          {{>overview_image cruise-ship.data}}
        </div>
        <div class="img-map-right-column">
          {{>overview_map cruise-ship.data market=country.meta.market}}
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="tui-container">
      <div class="cruise-multi-column background-tui-blue-50">
{{>multi_column cruise-ship heading='Kryssa runt bland Karibiens pärlor på en flytande lyxresort' text=''}}
      </div>
    </div>
  </section>

  <section id="{{slug (lowercase (getResource cruise-ship.data.fields.resource.fields.items 'subNavigationAboutTheShip'))}}">
    <div class="tui-container">
      <div class="cruise-about-ship">
        <div class="internal-image-map img-map-left-column">
          {{>list_header heading='Om fartyget'}}
          {{>image_responsive_card image-url=cruise-ship.data.fields.content.images.1.url}}
        </div>
        <div class="about-ship-facts img-map-right-column">
          {{>list_header heading='Om fartyget'}}
          {{>list_key_value valueList=cruise-ship.data.fields.content.facts className='grid-triple cruise-key-value'}}
        </div>
      </div>
    </div>
  </section>

  <section id="{{slug (lowercase (getResource cruise-ship.data.fields.resource.fields.items 'subNavigationGoodToKnow'))}}">
    <div class="tui-container">
      {{>list_header heading='Bra att veta'}}
      <div class="hotel-facts cruise-facts background-tui-beige-25">
        {{#withGroup cruise-ship.data.fields.content.goodToKnow (ceil (divide cruise-ship.data.fields.content.goodToKnow.length 2))}}
          <ul class="tui-accordion facts-accordion">
            {{#each this}}
{{>facts_accordion resourceObject=@root/cruise-ship.data.fields.resource.fields.items}}
            {{/each}}
          </ul>
        {{/withGroup}}
      </div>
    </div>
  </section>

  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-3-cruise-ship.data.fields.components.0.fields heading="Fler utvalda fartyg med Royal Caribbean"}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      {{>tui_top_facts facts=cruise-landing.data.fields.content.topFacts2 cssClass='heading-text' heading='Det här ingår alltid på kryssningar med TUI'}}
    </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=TuiLocationMap.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>

<script async src="https://www.tui.se/heart.se.js"></script>

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