Skip to main content
cngx-src documentation

CngxCardBadge

Directivev0.1.0

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

GitHub

Import#

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

Description#

Positions a badge element at a corner of its parent card and projects intent + size variants onto the host class so a bare element renders a usable pill without any inline styles.

<cngx-card>
  <span cngxCardBadge position="top-end" intent="danger" size="md">P</span>
  <header cngxCardHeader>Pflegeplan</header>
</cngx-card>

Empty content collapses to a fixed-diameter dot via :empty (status indicator pattern). Theme via the --cngx-card-badge-* tokens on card.component.css; fallbacks chain through --cngx-badge-* then the foundation palette.

https://cngxjs.github.io/cngx/examples/#/common/card/card-with-badge

Related#

Metadata#

Selector
[cngxCardBadge]

Host#

Class
cngx-card__badge
Bound classes
cngx-card__badge--top-start ← position() === "top-start" cngx-card__badge--top-end ← position() === "top-end" cngx-card__badge--bottom-start ← position() === "bottom-start" cngx-card__badge--bottom-end ← position() === "bottom-end" cngx-card__badge--intent-primary ← intent() === "primary" cngx-card__badge--intent-danger ← intent() === "danger" cngx-card__badge--intent-warning ← intent() === "warning" cngx-card__badge--intent-success ← intent() === "success" cngx-card__badge--intent-neutral ← intent() === "neutral" cngx-card__badge--size-sm ← size() === "sm" cngx-card__badge--size-md ← size() === "md" cngx-card__badge--size-lg ← size() === "lg"

Index#

Inputs

intentpositionsize

HostBindings

class.cngx-card__badge--top-startclass.cngx-card__badge--top-endclass.cngx-card__badge--bottom-startclass.cngx-card__badge--bottom-endclass.cngx-card__badge--intent-primaryclass.cngx-card__badge--intent-dangerclass.cngx-card__badge--intent-warningclass.cngx-card__badge--intent-successclass.cngx-card__badge--intent-neutralclass.cngx-card__badge--size-smclass.cngx-card__badge--size-mdclass.cngx-card__badge--size-lg

Inputs#

intent#"primary" | "danger" | "warning" | "success" | "neutral"
input()

Tone of the badge surface. Resolves to --cngx-card-badge-<intent>-bg / -color; cascades through --cngx-badge-<intent>-bg then --cngx-color-<system>.

default 'primary'
position#"top-start" | "top-end" | "bottom-start" | "bottom-end"
input()

Corner position using logical properties.

default 'top-end'
size#"sm" | "md" | "lg"
input()

Pill diameter and font-size. Empty content always renders as a fixed dot at the sm token regardless of this input (:empty fallback for status indicators).

default 'md'

HostBindings#

BindingExpression
[class.cngx-card__badge--top-start]position() === "top-start"
[class.cngx-card__badge--top-end]position() === "top-end"
[class.cngx-card__badge--bottom-start]position() === "bottom-start"
[class.cngx-card__badge--bottom-end]position() === "bottom-end"
[class.cngx-card__badge--intent-primary]intent() === "primary"
[class.cngx-card__badge--intent-danger]intent() === "danger"
[class.cngx-card__badge--intent-warning]intent() === "warning"
[class.cngx-card__badge--intent-success]intent() === "success"
[class.cngx-card__badge--intent-neutral]intent() === "neutral"
[class.cngx-card__badge--size-sm]size() === "sm"
[class.cngx-card__badge--size-md]size() === "md"
[class.cngx-card__badge--size-lg]size() === "lg"
Enter to selectArrow Down Arrow Up to navigateEsc to close