Разработка таблицы материалов в соответствии с дизайном

Question

Мне дали следующий дизайн:

У меня есть составленная таблица материалов с отображением необходимой информации. Однако я не смог придать этому стиль, который соответствует дизайну.

    <mat-table
  multiTemplateDataRows
  [dataSource]="imagesData"
  class="material-images">
  <ng-container matColumnDef="Image">
    <mat-cell *matCellDef="let element" (click)="imageSelected(element.id)" [attr.rowspan]="3">
      <img src="{{element.url}}" alt="No image found" class="image" style="height: 10rem">
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Title">
    <mat-cell *matCellDef="let element">
      <h4 class="leadingLabel">Title: </h4>
      <p class="leadingLabel">{{element.title || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Time">
    <mat-cell *matCellDef="let element">
      <h4>Time: </h4>
      <p>{{element.timestamp || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Created By">
    <mat-cell *matCellDef="let element">
      <h4 class="leadingLabel">Created By: </h4>
      <p class="leadingLabel">{{element.createdBy || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Output">
    <mat-cell *matCellDef="let element">
      <h4>Output: </h4>
      <p>{{element.output || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Description">
    <mat-cell *matCellDef="let element">
      <h4 class="leadingLabel">Description: </h4>
      <p class="leadingLabel">{{element.description || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <mat-row *matRowDef="let row; columns: ['Image','Title', 'Time'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Created By', 'Output'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Description'];"></mat-row>

</mat-table>

Есть ли какие-нибудь CSS гуру, которые могли бы мне помочь? Я, честно говоря, даже не знаю, с чего начать.

Answer 1

Поместите другой класс для ваших элементов.

Вы пробовали что-то вроде: .leadingLabel {color: red;} в ваших css стилях (style. css).

или

<style>
.leadingLabel{color:red;}
</style>

Извините, если я не понимаю вашего вопроса!