e8-card-footer
Updated on Sep 18, 2025 4 minutes to readA flexible and lightweight footer section for the card component with support for background, border, and text styling.
Overview
e8-card-footer is designed to display footer content for a card.
It supports optional text via the footer prop or custom content through the default slot.
Background, border, and text variants can be applied to match your design system, and custom classes can be added for additional styling.
This component is typically used inside e8-card but can also be used standalone if needed.
<e8-card>
<e8-card-body
body-bg-variant="light"
body-text-variant="dark"
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-footer
footer-bg-variant="dark"
footer-text-variant="white"
>
<p>
This is the footer content of the card. You can include summary information, action links, or custom content
here.
</p>
</e8-card-footer>
</e8-card>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
This is the footer content of the card. You can include summary information, action links, or custom content here.
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| footer | Text content for the footer. | string | '' |
| footer-bg-variant | Background color variant for the footer. | E8BackgroundColorVariants | '' |
| footer-border-variant | Border color variant for the footer. | E8BorderColorVariants | '' |
| footer-class | Custom classes to apply to the footer. | string | array | object | '' |
| footer-tag | HTML tag to use for the footer wrapper. | string | 'div' |
| footer-text-variant | Text color variant for the footer. | E8TextColorVariants | '' |
Slots
| Slot | Description |
|---|---|
| default | Custom content to render inside the footer. |