File

packages/components/eui-content-card/eui-content-card-body/eui-content-card-body-top.ts

Description

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

<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

<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

<ng-content/>