### File

`packages/components/eui-content-card/eui-content-card-media/eui-content-card-media.component.ts`

### Description

Container for media content (images, videos, or graphics) displayed at the start of the card. Provides a visual anchor for the card content.

### Image

Example :

    <eui-content-card-media>
        <img src="/assets/card-image.jpg" alt="Descriptive text"/>
    </eui-content-card-media>

### Icon or Graphic

Example :

    <eui-content-card-media>
        <eui-icon-svg icon="document" size="xl"/>
    </eui-content-card-media>

### Avatar

Example :

    <eui-content-card-media>
        <eui-avatar src="/user.jpg" size="l"/>
    </eui-content-card-media>

### Accessibility

- Always provide alt text for images
- Use empty alt="" for decorative images
- Ensure icons have appropriate labels when conveying information
- Consider color contrast for overlaid text

### Notes

- Positioned at the start of the card before header content
- Optional component - only include when visual media enhances the card
- Automatically sized and positioned for optimal layout
- Supports images, icons, avatars, or custom graphics

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-content-card-media`

template

    <ng-content/>

styleUrl | `./eui-content-card-media.scss`

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

class
Type : `string`
Default value : `'eui-content-card-media'`
Binds the class to the component.

### Properties

string
Type : `string`
Default value : `'eui-content-card-media'`
Decorators : `@HostBinding('class')`
Binds the class to the component.

# results matching ""

# No results matching ""