eui documentation
  1. Components
  2. EuiContentCardMediaComponent

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
HostBindings

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 ""