Content Comparison

...

• Use <mat-card-footer> for the base of the card. This space is most frequently allocated for buttons, of which will be styled automatically once placed in this container.

Card Helper

Usage Rules

For default ‘blue’ card, use in cases where the amount of information required to output is deemed ‘too much’ to display within a Tooltip (decision of this use should be discussed among development team).

For warnings, ‘yellow’ card should be used.

Example

...

Structure

• Use <mat-card class="mat-card card-helper"> for default ‘blue’ helper card

• Use <mat-card class="mat-card card-helper card-helper-warning"> for default ‘yellow’ helper card