# EuiContentCardBodyTopComponent

**Type:** component



Container for content at the top of the card body. Used for highlighted information, alerts, or content that needs visual separation from the main body.

### Alert Message
```html
<eui-content-card-body-top>
    <div class="eui-u-bg-warning-light eui-u-p-s">
        <strong>Notice:</strong> This item requires attention
    </div>
</eui-content-card-body-top>
```

### Summary Information
```html
<eui-content-card-body-top>
    <dl class="eui-u-flex eui-u-flex-gap-m">
        <div><dt>Status:</dt><dd>Active</dd></div>
        <div><dt>Progress:</dt><dd>75%</dd></div>
    </dl>
</eui-content-card-body-top>
```

### Accessibility
- Use appropriate semantic elements for content type
- Ensure alerts have proper ARIA roles when needed
- Maintain color contrast for all content

### Notes
- Positioned at the top of the body with visual separation
- Optional component - only use when content needs emphasis
- Commonly used for alerts, summaries, or key metrics
- Automatically styled with appropriate spacing


**Selector:** `eui-content-card-body-top`