Small Fact Card: Four Cards 

<div data-module="factCardSmall" class="fact-cards-small">
    <div class="grid-x fact-cards-small__title spacer-xs">
        <h4>Transfer times to city centre</h4>
    </div>
    <div class="fact-cards-small__list grid-x grid-margin-x">
        <div class="fact-card-small medium-auto cell">
            <div class="fact-card-small__inner">
                <div class="fact-card-small__icon" style="background-image:url(/media/icons/purple/car.svg);"></div>
                <div class="fact-card-small__caption">29 minutes tax drive</div>
            </div>
        </div>
        <div class="fact-card-small medium-auto cell">
            <div class="fact-card-small__inner">
                <div class="fact-card-small__icon" style="background-image:url(/media/icons/purple/surf.svg);"></div>
                <div class="fact-card-small__caption">Surfer&#x27;s paradise</div>
            </div>
        </div>
        <div class="fact-card-small medium-auto cell">
            <div class="fact-card-small__inner">
                <div class="fact-card-small__icon" style="background-image:url(/media/icons/purple/culture.svg);"></div>
                <div class="fact-card-small__caption">Cultural point of interest</div>
            </div>
        </div>
        <div class="fact-card-small medium-auto cell">
            <div class="fact-card-small__inner">
                <div class="fact-card-small__icon" style="background-image:url(/media/icons/purple/star.svg);"></div>
                <div class="fact-card-small__caption">Must see location</div>
            </div>
        </div>
    </div>
</div>
 
<div data-module="factCardSmall" class="fact-cards-small{{#if dynamic}} fact-cards-small--dynamic{{/if}}">
    {{#if title}}
    <div class="grid-x fact-cards-small__title spacer-xs">
        <h4>{{title}}</h4>
    </div>
    {{/if}}
    <div class="fact-cards-small__list grid-x grid-margin-x">
        {{#each cards}}
            <div class="fact-card-small medium-auto cell">
                <div class="fact-card-small__inner">
                    {{#if iconUrl}} <div class="fact-card-small__icon" style="background-image:url({{iconUrl}});"></div>{{/if}}
                    {{#if description}}<div class="fact-card-small__caption">{{description}}</div>{{/if}}
                </div>
            </div>
        {{/each}}
    </div>
</div>
 
{
  "title": "Transfer times to city centre",
  "cards": [
    {
      "iconUrl": "/media/icons/purple/car.svg",
      "description": "29 minutes tax drive"
    },
    {
      "iconUrl": "/media/icons/purple/surf.svg",
      "description": "Surfer's paradise"
    },
    {
      "iconUrl": "/media/icons/purple/culture.svg",
      "description": "Cultural point of interest"
    },
    {
      "iconUrl": "/media/icons/purple/star.svg",
      "description": "Must see location"
    }
  ]
}

There are no notes for this item.