<div class="plugin-how-to-use uk-container uk-container-large uk-section">
  <h3 class="uk-h2 uk-margin-large-bottom">
    {{pluginObject.title}}
  </h3>
  <div class="uk-padding" uk-height-match=".title">
    <div class="uk-padding uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-grid-large" uk-grid
         uk-height-match=".description">
      <ng-container *ngFor="let card of pluginObject.cardInfoArray">
        <ng-container *ngIf="card.show">
          <div class="uk-flex uk-flex-column uk-flex-middle">
            <div class="uk-card uk-card-default uk-card-body">
              <icon [name]="'description'" [type]="'outlined'" [ratio]="3" [flex]="true"></icon>
            </div>
            <h5 class="title">
              {{card.title}}
            </h5>
            <div class="uk-text-center uk-margin-bottom description">
              {{card.description}}
            </div>
            <a *ngFor="let url of card.urlsArray" [href]="card.url" [class.uk-hidden]="!(url.url && url.url.length > 0)"
               class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default"
               [target]="url.target">
              {{url.linkText}}
            </a>
          </div>
        </ng-container>
      </ng-container>
    </div>
  </div>
</div>
