CngxCardMedia

Directivev0.1.0WCAG AA

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

Import#

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

Description#

Structural slot directive for the card media region (images, videos, icons).

When decorative is true (default), the media is hidden from screen readers via aria-hidden. Set to false when the image carries meaningful information.

<cngx-card>
  <img cngxCardMedia [decorative]="false" alt="Photo of patient" />
</cngx-card>

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

Metadata#

Selector: [cngxCardMedia]

Host#

Class: cngx-card__media
Static attributes: [attr.aria-hidden]decorative() || null
[attr.loading]"lazy"
Bound styles: aspect-ratio ← aspectRatio() !== "auto" ? aspectRatio() : null

Index#

Inputs

aspectRatio decorative

HostBindings

style.aspect-ratio attr.aria-hidden attr.loading

Inputs#

aspectRatio#'16/9' | '4/3' | '1/1' | 'auto'

input()

Aspect ratio applied via CSS aspect-ratio property.

default 'auto'

decorative#boolean