e8-card-body
Updated on Sep 18, 2025 4 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. | Array | Object | string | — |
| 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. |