e8-card-header
Updated on Sep 18, 2025 3 minutes to readA flexible header section for the card component with support for text, background, border, and color variants.
Overview
e8-card-header is designed to display the top section of a card.
It can show simple text via the header prop or accept custom content through slots.
You can apply background, border, and text color variants to match your design system.
This component is typically used inside e8-card.
<e8-card>
<e8-card-header
header="Custom Header"
header-bg-variant="primary"
header-text-variant="white"
header-border-variant="dark"
>
<template #default>
<div>
<strong>Custom content:</strong> This header uses a slot instead of plain text.
</div>
</template>
</e8-card-header>
<e8-card-body>
<p>This is the card body content.</p>
</e8-card-body>
</e8-card>
🔽 Show more
Custom content: This header uses a slot instead of plain text.
This is the card body content.
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| header | Header text content. | string | — |
| header-bg-variant | Background color variant for the header. | E8BackgroundColorVariants | — |
| header-border-variant | Border color variant for the header. | E8BorderColorVariants | — |
| header-class | Custom classes for the header section. | Array | Object | string | — |
| header-tag | HTML tag for the header container. | string | 'div' |
| header-text-variant | Text color variant for the header. | E8TextColorVariants | — |
Slots
| Slot | Description |
|---|---|
| default | Slot for custom content inside the card header. |