pas/theme/packages/starterkit/src/app/pages/starter/starter.component.html

<!-- ============================================================== -->
<!-- Simple four boxes Row -->
<!-- ============================================================== -->
<mat-card class="cardWithShadow">
  <mat-card-content>
    <mat-card-title>Sample Page</mat-card-title>
    <mat-card-subtitle class=" m-b-10"
      >This is test page</mat-card-subtitle
    >

    <div class="d-flex flex-wrap gap-10">
      <button mat-flat-button>Primary</button>
      <button mat-flat-button class="bg-success">Success</button>
      <button mat-flat-button class="bg-secondary">Secondary</button>
      <button mat-flat-button class="bg-warning">Warning</button>
      <button mat-flat-button class="bg-error">Error</button>
      <button mat-flat-button class="bg-light-primary text-primary">
        Light Primary
      </button>
      <button mat-flat-button class="bg-light-success text-success">
        Light Success
      </button>
      <button mat-flat-button class="bg-light-secondary text-secondary">
        Light Secondary
      </button>
      <button mat-flat-button class="bg-light-warning text-warning">
        Light Warning
      </button>
      <button mat-flat-button class="bg-light-error text-error">
        Light Error
      </button>
    </div>

    <div class="d-flex flex-wrap gap-10 m-t-12">
      <button mat-raised-button>Basic</button>
      <button mat-stroked-button>Basic</button>
      <button mat-button>Basic</button>
      <button
        mat-icon-button
        aria-label="Example icon button with a vertical three dot icon"
      >
        <mat-icon>more_vert</mat-icon>
      </button>
      <button mat-fab aria-label="Example icon button with a delete icon">
        <mat-icon>delete</mat-icon>
      </button>
      <button mat-mini-fab aria-label="Example icon button with a menu icon">
        <mat-icon>menu</mat-icon>
      </button>
      <button mat-fab extended>
        <mat-icon>favorite</mat-icon>
        Basic
      </button>
    </div>
  </mat-card-content>
</mat-card>

<mat-card class="cardWithShadow">
  <mat-card-header>
    <mat-card-title class="m-b-0">Ordrinary Form</mat-card-title>
  </mat-card-header>
  <mat-card-content class="b-t-1">
    <p>this is test</p>
    <form>
      <!-- input -->
      <mat-label class=" f-w-500 m-b-8 d-block">Email</mat-label>
      <mat-form-field appearance="outline" class="w-100" color="primary">
        <input matInput />
        <mat-hint> We'll never share your email with anyone else.</mat-hint>
      </mat-form-field>
      <!-- input -->
      <mat-label class=" f-w-500 m-b-8 d-block m-t-12"
        >Password</mat-label
      >
      <mat-form-field appearance="outline" class="w-100" color="primary">
        <input matInput type="password" />
      </mat-form-field>
      <!-- input -->
      <mat-checkbox color="primary">Check Me Out!</mat-checkbox>
      <div class="m-t-12">
        <button mat-flat-button color="primary">Submit</button>
      </div>
    </form>
  </mat-card-content>
</mat-card>

<mat-card class="cardWithShadow">
  <mat-card-content>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

      <!-- Position Column -->
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef>No.</th>
        <td mat-cell *matCellDef="let element">{{ element.position }}</td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef>Weight</th>
        <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef>Symbol</th>
        <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </mat-card-content>
</mat-card>

<mat-card class="cardWithShadow">
  <mat-card-header>
    <mat-card-title class="m-b-0">Chip</mat-card-title>
  </mat-card-header>
  <mat-card-content class="b-t-1">
    <mat-chip-set aria-label="Dog selection">
      <mat-chip>
        <img
          matChipAvatar
          src="https://material.angular.io/assets/img/examples/shiba1.jpg"
          alt="Photo of a Shiba Inu"
        />
        Dog one
      </mat-chip>
      <mat-chip>
        <img
          matChipAvatar
          src="https://material.angular.io/assets/img/examples/shiba1.jpg"
          alt="Photo of a Shiba Inu"
        />
        Dog two
      </mat-chip>
      <mat-chip>
        <img
          matChipAvatar
          src="https://material.angular.io/assets/img/examples/shiba1.jpg"
          alt="Photo of a Shiba Inu"
        />
        Dog three
      </mat-chip>
    </mat-chip-set>
  </mat-card-content>
</mat-card>