CngxCardAccent

Directivev0.1.0WCAG AA

projects/common/card/card-accent.directive.ts

Import#

import { CngxCardAccent } from '@cngx/common/card'

Description#

Adds a color-coded severity accent to a card.

Renders as a colored top border + tinted background to communicate status visually. Differentiates by both color and border width (not just color - WCAG 1.4.1).

<cngx-card cngxCardAccent="warning">
  <header cngxCardHeader>
    <h3 cngxCardTitle>Blutzucker</h3>
  </header>
</cngx-card>

https://cngxjs.github.io/cngx/examples/#/common/card/severity-accent

Metadata#

Selector: [cngxCardAccent]

Host#

Bound classes: cngx-card--accent ← true cngx-card--accent-info ← severity() === "info" cngx-card--accent-success ← severity() === "success" cngx-card--accent-warning ← severity() === "warning" cngx-card--accent-danger ← severity() === "danger" cngx-card--accent-neutral ← severity() === "neutral"

Index#

Inputs

severity

HostBindings

class.cngx-card--accent class.cngx-card--accent-info class.cngx-card--accent-success class.cngx-card--accent-warning class.cngx-card--accent-danger class.cngx-card--accent-neutral

Inputs#

severity#"info" | "success" | "warning" | "danger" | "neutral"

input()

Severity level controlling the accent color.

default 'neutral', { alias: 'cngxCardAccent', }

HostBindings#

Binding	Expression
`[class.cngx-card--accent]`	`true`
`[class.cngx-card--accent-info]`	`severity() === "info"`
`[class.cngx-card--accent-success]`	`severity() === "success"`
`[class.cngx-card--accent-warning]`	`severity() === "warning"`
`[class.cngx-card--accent-danger]`	`severity() === "danger"`
`[class.cngx-card--accent-neutral]`	`severity() === "neutral"`