## 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.

- Basic example
- Card with selectable color indicator
- Disabled card
- Card with selectable color indicator, disabled state and focus state combined
- Horizontal card
- Card with hover and pressed styling
- Card with hover and pressed styling without indicator
- Best Practice card layout

### Example

Optional Title 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>`

Optional Title 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>`

Optional Title 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>`

Optional Title 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>`

Optional Title 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>`

Optional Title Ticket Title

### Card Layout