@vendasta/store/header-container/header-container.component.html

<div class="header-container">
  <mat-card class="va-mat-card">
    <div class="product-overview">
      <div class="product-id">

        <va-icon [iconUrl]="iconUrl" [name]="title" [diameter]="120"></va-icon>

        <div class="product-id-text">

          <h1 [ngClass]="{'stencil-title shimmer': !title, 'product-title': title}">
            {{ title }}
          </h1>

          <span [ngClass]="{'stencil-tagline shimmer': !title && !tagline, 'tagline': tagline}">
            {{ tagline }}
          </span>

          <mat-chip-list>
            <mat-chip *ngFor="let chip of chipLabels">{{ chip }}</mat-chip>
          </mat-chip-list>

        </div>
      </div>

      <div class="pricing">

        <button *ngIf="showAction" mat-raised-button class="app-enable-button" [disabled]="!actionEnabled" (click)="onActionSelected()">
          {{ actionLabel }}
        </button>

        <mat-card *ngIf="prerequisiteLabel" class="addon-enable" (click)="onPrerequisiteSelected()">
          Enabled with {{prerequisiteLabel}}
        </mat-card>

        <div *ngIf="showPricing" class="price-box">
          <div *ngIf="pricing?.prices?.length" class="wholesale-price">{{ pricingLabel }}</div>
          <va-pricing [pricing]="pricing"></va-pricing>
        </div>

      </div>

    </div>
  </mat-card>
</div>