{namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
<div class="card card-size-fixed-small">
    <div class="card-image">
        <f:link.action action="show" controller="Distribution" arguments="{extension:distribution}" class="distribution-image">
            <typo3-extensionmanager-distribution-image
                image="{distribution.distributionImage}"
                fallback="{f:uri.image(src: 'EXT:extensionmanager/Resources/Public/Images/Distribution.svg')}"
                alt="{distribution.title}"
                title="{distribution.title}"/>
        </f:link.action>
        <f:if condition="{distribution.dependencies}">
            <div class="card-image-badge">
                <em:typo3Dependency extension="{distribution}" />
            </div>
        </f:if>
        <f:if condition="{official}">
            <div class="distribution-official-badge">
                <f:image
                    src="EXT:extensionmanager/Resources/Public/Images/OfficialBadge.svg" alt="{distribution.title}"
                    height="64"
                    width="64"
                />
            </div>
        </f:if>
    </div>
    <div class="card-header">
        <h3 class="card-title">
            <f:link.action action="show" controller="Distribution" arguments="{extension:distribution}">
                {distribution.title}
            </f:link.action>
        </h3>
        <span class="card-subtitle">
            {distribution.extensionKey}
        </span>
    </div>
    <div class="card-body">
        <p class="card-text">
            {distribution.description -> f:format.crop(maxCharacters: 150)}
        </p>
    </div>
    <div class="card-footer">
        <f:form.button form="installDistributionForm" type="submit" name="extension" value="{distribution}" class="btn btn-default t3-button-action-installdistribution">
            <core:icon identifier="actions-system-extension-import" /> <f:translate key="extensionList.installDistribution">Install</f:translate>
        </f:form.button>
        <f:link.action action="show" controller="Distribution" arguments="{extension:distribution}" class="btn btn-link">
            <f:translate key="button.details">Show Details</f:translate>
        </f:link.action>
    </div>
</div>