---
title: Destination Card
layout: common-ux-layout.hbs
---

<div style="margin-bottom: 40px;">
  <h3>One large</h3>
  {{>destination_cards cards=(first destination-card.data.cards 1) resourceObject=destination-card.data.fields.resource.fields.items}}
</div>

<h3>2 cards</h3>
<div class="destination-card-container" style="margin-bottom: 40px;">
  {{>destination_cards cards=(first destination-card.data.cards 2) resourceObject=destination-card.data.fields.resource.fields.items}}
</div>

<h3>3 cards</h3>
<div class="destination-card-container cols-odd" style="margin-bottom: 40px;">
  {{>destination_cards cards=(first destination-card.data.cards 3) resourceObject=destination-card.data.fields.resource.fields.items}}
</div>

<h3>4 cards</h3>
<div class="destination-card-container multi-line cols-even" style="margin-bottom: 40px;">
  {{>destination_cards cards=(first destination-card.data.cards 4) resourceObject=destination-card.data.fields.resource.fields.items}}
</div>

<h3>5 cards</h3>
<div class="destination-card-container multi-line cols-odd" style="margin-bottom: 40px;">
  {{>destination_cards cards=(first destination-card.data.cards 5) resourceObject=destination-card.data.fields.resource.fields.items}}
</div>

<h3>6 cards</h3>
<div class="destination-card-container multi-line" style="margin-bottom: 40px;">
  {{>destination_cards cards=(first destination-card.data.cards 6) resourceObject=destination-card.data.fields.resource.fields.items}}
</div>