<div class="quicklinks-tiles">
    <div class="category" ng-repeat="category in vm.webpart.categories" ng-if="category.links.length > 0">
        <h3 class="category__name" ng-if="vm.webpart.categories.length > 1">
            {{category.name | translate}}
        </h3>
        <ul class="category__items">
            <li class="item" ng-repeat="item in category.links" ng-style="{backgroundColor:item.backgroundColor, color:item.fontColor ? item.fontColor : '#fff'}">
                <a
                   href="{{item.smarturl}}"
                   target="{{item.openInNewWindow?'_blank':'_self'}}"
                   title="{{item.description}}"
                   ng-style="{color:item.fontColor ? item.fontColor : '#fff'}">
                    <div class="item__media">
                        <div ng-if="!item.useIcon">
                            <img ng-if="!item.isRound && item.imageUrl" class="image" ng-src="{{item.imageUrl}}">
                            <img ng-if="item.isRound && item.imageUrl" class="image image--rounded" ng-src="{{item.imageUrl}}">
                        </div>
                        <div ng-if="item.useIcon" class="icon-styling" style="font-size: 50px" ng-class="item.iconName.icon"></div>
                    </div>
                    <div class="item__name">
                        {{item.smartname}}
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>