<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<div style="padding: 10px; border: 1px solid #ccc;">
    <strong>Feature Cards</strong>
    <f:if condition="{data.variant}">
        <br />Layout: <f:if condition="{data.variant} == 'above'">Icon above text</f:if><f:if condition="{data.variant} == 'beside'">Icon beside text</f:if>
    </f:if>
    <f:if condition="{data.icon_size}"><br />Icon size: {data.icon_size}</f:if>
    <f:if condition="{data.cards}">
        <f:then>
            <f:for each="{data.cards}" as="card" iteration="it">
                <br />Card {it.cycle}: <f:if condition="{card.title}">{card.title -> f:format.crop(maxCharacters: 25)}</f:if><f:else>—</f:else>
                <f:if condition="{card.icon_iconify}"> (Iconify: {card.icon_iconify})</f:if>
                <f:if condition="{card.icon_file.0}"> (custom icon)</f:if>
            </f:for>
        </f:then>
        <f:else>
            <br />No cards added.
        </f:else>
    </f:if>
</div>

</html>
