e8-card-body
Updated on Sep 18, 2025 15 minutes to readA flexible and lightweight body section for the card component with support for titles, subtitles, background variants, and text styling.
Overview
e8-card-body is designed to contain the main content of a card.
It supports optional title and sub-title fields, background and text variants, as well as overlay mode for placing content over images.
This component is typically used inside e8-card, but can also be used standalone when needed.
Use background, border, and text variants to match your design system and maintain a consistent look across cards.
<e8-card>
<e8-card-body
body-bg-variant="success"
body-text-variant="white"
title="Card Title"
sub-title="Supporting subtitle text"
>
<p>
This is the main content of the card body. You can place <strong>text</strong>, lists, or even nested
components here.
</p>
<ul>
<li>First detail item</li>
<li>Second detail item</li>
<li>Third detail item</li>
</ul>
</e8-card-body>
</e8-card>
🔽 Show more
This is the main content of the card body. You can place text, lists, or even nested components here.
- First detail item
- Second detail item
- Third detail item
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| body-bg-variant | Applies a background color variant to the card body. | E8BackgroundColorVariants | — |
| body-border-variant | Applies a border color variant to the card body. | E8BorderColorVariants | — |
| body-class | Custom classes for the card body. | E8CssClassType | — |
| body-tag | HTML tag for the card body container. | string | 'div' |
| body-text-variant | Text color variant for the card body. | E8TextColorVariants | — |
| overlay | If true, card content overlays the image. | boolean | false |
| sub-title | Subtitle text displayed in the card body. | string | — |
| sub-title-tag | HTML tag for the subtitle. | string | 'h6' |
| sub-title-text-variant | Text color variant for subtitle. | E8TextColorVariants | muted |
| title | Title text displayed in the card body. | string | — |
| title-tag | HTML tag for the title. | string | 'h4' |
Slots
| Slot | Description |
|---|---|
| default | Default slot for inserting custom content into the card body. |