A card can be used to display content and actions on a single topic. They should be easy to understand. Elements must be clearly placed so that the hierarchy is easily identifiable as text or photo.
A card with a top indicator which can be integrated via the "bciCardColorState" directive. In addition you can
select the color yourself. You can select between blue, green, yellow, red, neutral and an empty state (no color).
The empty string has the same effect like using the card without the directive (see above example).
<mat-card [bciCardColorState]="'{{cardColorState}}'"></mat-card>
A disabled card with the bciCardColorState directive extended by optional inputs bciCardDisabled and
bciCardDisabledWithBorder. Notice that the bciCardColorState directive is required to apply the correct directive
and styling.
<mat-card bciCardColorState [bciCardDisabled]="{{showDisabledCard}}" [bciCardDisabledWithBorder]="{{
showDisabledBorder }}"></mat-card>
A card with a top indicator and the possibility to disable it. Here you can use the disabled color indicator as
well. The indicator with disabled color should only be used together with the disabled state of the card.
<mat-card [bciCardColorState]="'{{cardColorStateDisabled}}'" [bciCardDisabled]="{{cardDisabledState}}"
[bciCardDisabledWithBorder]="{{cardDisabledStateWithBorder}}" [attr.focus]=" {{focusCard ? 'focus' : null
}}"></mat-card>
A card with a top indicator and the possibility to disable it. Here you can use the disabled color indicator as
well. The indicator with disabled color should only be used together with the disabled state of the card.
<mat-card [bciCardColorState]="'{{cardHorizontalColorStateDisabled}}'"
[bciCardDisabled]="'{{cardHorizontalDisabledState}}'"
[bciCardDisabledWithBorder]="{{cardHorizontalDisabledStateWithBorder}}" [bciCardHorizontal]="true"
[bciCardHoverPressed]="{{cardHorizontalHoverPressedStyling}}" [attr.focus]="{{focusCardHorizontal ? 'focus'
:'null' }}"></mat-card>
A card with with a styled hover and pressed state (user interaction).
<mat-card bciCardColorState="yellow"
[bciCardHoverPressed]="{{cardHoverPressedStyling}}"></mat-card>
A card with with a styled hover and pressed state without an indicator (user interaction).
<mat-card bciCardColorState bciCardHoverPressed="true"></mat-card>