# EuiContentCardMediaComponent

**Type:** component

<p>Container for media content (images, videos, or graphics) displayed at the start of the card. Provides a visual anchor for the card content.</p>
<h3>Image</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-media&gt;
    &lt;img src=&quot;/assets/card-image.jpg&quot; alt=&quot;Descriptive text&quot;/&gt;
&lt;/eui-content-card-media&gt;</code></pre></div><h3>Icon or Graphic</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-media&gt;
    &lt;eui-icon-svg icon=&quot;document&quot; size=&quot;xl&quot;/&gt;
&lt;/eui-content-card-media&gt;</code></pre></div><h3>Avatar</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-media&gt;
    &lt;eui-avatar src=&quot;/user.jpg&quot; size=&quot;l&quot;/&gt;
&lt;/eui-content-card-media&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Always provide alt text for images</li>
<li>Use empty alt=&quot;&quot; for decorative images</li>
<li>Ensure icons have appropriate labels when conveying information</li>
<li>Consider color contrast for overlaid text</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Positioned at the start of the card before header content</li>
<li>Optional component - only include when visual media enhances the card</li>
<li>Automatically sized and positioned for optimal layout</li>
<li>Supports images, icons, avatars, or custom graphics</li>
</ul>


**Selector:** `eui-content-card-media`

**Standalone:** false
