Big Fact Card: With Icon 

<ul class="fact-cards">
    <template>
        <li class="fact-card">
            <div class="fact-card__inner">
                <h3 class="fact-card__title"></h3>
                <p class="fact-card__description"></p>
            </div>
        </li>
    </template>
    <li class="fact-card">
        <div class="fact-card__inner">
            <h3 class="fact-card__title">14</h3>
            <p class="fact-card__description">Daily flights</p>
        </div>
    </li>
    <li class="fact-card">
        <div class="fact-card__inner">
            <h3 class="fact-card__title">6hr</h3>
            <p class="fact-card__description">Cycle friendly</p>
        </div>
    </li>
    <li class="fact-card">
        <div class="fact-card__inner">
            <h3 class="fact-card__title">$124</h3>
            <p class="fact-card__description">Train available</p>
        </div>
    </li>
</ul>
 
<ul class="fact-cards">
    <template>
    {{> @cp-big-fact-card}}
    </template>
    {{#each cards}}
    {{> @cp-big-fact-card}}
    {{/each}}
</ul>
 
{
  "cards": [
    {
      "iconUrl": "/media/icons/purple/plane.svg",
      "title": "14",
      "description": "Daily flights"
    },
    {
      "iconUrl": "/media/icons/purple/cycle.svg",
      "title": "6hr",
      "description": "Cycle friendly"
    },
    {
      "iconUrl": "/media/icons/purple/train.svg",
      "title": "$124",
      "description": "Train available"
    }
  ]
}

There are no notes for this item.