---
title: Card collection
layout: tui-ssg-template-layout.hbs
---

{{>hero_responsive image-contentful.data.fields}}
<main class="main-content">
  <section>
    <div class="tui-container">
      <h1>Content Cards</h1>
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-1 heading="Content Cards - 1 Card"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-2 heading="Content Cards - 2 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-3 heading="Content Cards - 3 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-dc-3 heading="Content Cards - 3 Cards - display-card"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
{{>content_card_group ccg-3-link-modal heading="Content Cards - 3 Cards - link modal"}}
{{>button_group buttonGroup=button-group}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-4 heading="Content Cards - 4 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-5 heading="Content Cards - 5 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-6 heading="Content Cards - 6 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-7 heading="Content Cards - 7 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-1-video extraCssClass="reverse-order-light-blue" heading="Content Cards - 1 Card reverse order and light blue background"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-2 extraCssClass="reverse-order-light-blue" heading="Content Cards - 2 Cards reverse order and light blue background"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>content_card_group ccg-3 extraCssClass="reverse-order-light-blue" heading="Content Cards - 3 Cards reverse order and light blue background"}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      <h1>Navigation Cards</h1>
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-1.data.fields.components.0.fields heading="Navigation Cards - 1 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-2.data.fields.components.0.fields heading="Navigation Cards - 2 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-3.data.fields.components.0.fields heading="Navigation Cards - 3 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-3-focus-left.data.fields.components.0.fields heading="Navigation Cards - 3 cards focus-left"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-3-focus-right.data.fields.components.0.fields heading="Navigation Cards - 3 cards focus-right"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-4.data.fields.components.0.fields heading="Navigation Cards - 4 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-5.data.fields.components.0.fields heading="Navigation Cards - 5 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-5-focus-left.data.fields.components.0.fields heading="Navigation Cards - 5 cards focus-left"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-5-focus-right.data.fields.components.0.fields heading="Navigation Cards - 5 cards focus-right"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>navigation_card_group navigation-card-group-6.data.fields.components.0.fields heading="Navigation Cards - 6 Cards" numberOfCardsToDisplay=3 showAll=(getResource cruise-ship.data.fields.resource.fields.items 'showAllButtonLinkText') showMoreButton=true}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      <h1>Concept Cards</h1>
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>concept_card_group concg-1 heading="Concept Cards - 1 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>concept_card_group concg-2 heading="Concept Cards - 2 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>concept_card_group concg-3 heading="Concept Cards - 3 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>concept_card_group concg-4a heading="Concept Cards - 4 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>concept_card_group concg-5 heading="Concept Cards - 5 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>concept_card_group concg-6 heading="Concept Cards - 6 Cards"}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      <h1>Location Cards</h1>
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>location_card_group locationCards=lcg-5.data.fields.locations heading="Location Cards - 5 Cards"}}
    </div>
  </section>
  <section>
    <div class="tui-container">
      {{>location_card_group locationCards=country.data.fields.locations showAll=(getResource country.data.fields.resource.fields.items 'locationListShowAll') heading="Location Cards - 9 Cards"}}
    </div>
  </section>
</main>