File

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

Description

Container for the main content area of the card. Supports optional top section for highlighted content. Content is hidden when the card is collapsed.

Basic Body

<eui-content-card-body>
    <p>Main card content goes here</p>
</eui-content-card-body>

With Top Section

<eui-content-card-body>
    <eui-content-card-body-top>
        <div class="eui-u-bg-info-light eui-u-p-s">
            Important notice or highlighted content
        </div>
    </eui-content-card-body-top>
    <p>Regular card content follows</p>
</eui-content-card-body>

Accessibility

• Use semantic HTML elements for content structure
• Ensure proper heading hierarchy within body content
• Maintain sufficient color contrast for all text
• Make interactive elements keyboard accessible

Notes

• Primary content container for the card
• Automatically hidden when parent card is collapsed
• Can contain any HTML content or components
• Use body-top for content that needs visual separation