Card

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.

Example

Ticket Title

Card with selectable indicator color

None Blue Green Yellow Red Neutral

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>

Ticket Title

Disabled card

Disable card Show disabled indicator

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>

Ticket Title

Card with selectable color and disabled state

None Blue Green Yellow Red Neutral Disable card Add disabled border Focus 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>

Ticket Title

Horizontal Card

None Blue Green Yellow Red Neutral Disable card Add disabled border Focus card Hover and Pressed styling

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>


Card with hover and pressed styling

Disable hover and pressed styling

A card with with a styled hover and pressed state (user interaction).
<mat-card bciCardColorState="yellow" [bciCardHoverPressed]="{{cardHoverPressedStyling}}"></mat-card>

Ticket Title

Card with hover and pressed styling (without an indicator)

A card with with a styled hover and pressed state without an indicator (user interaction).
<mat-card bciCardColorState bciCardHoverPressed="true"></mat-card>

Ticket Title

Card Layout