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

Example :

    <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

Example :

    <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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-content-card-body-top`

template

    <ng-content/>

styleUrl | `./eui-content-card-body-top.scss`

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

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

### Properties

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

# results matching ""

# No results matching ""