e8-card
Updated on Sep 18, 2025 99 minutes to readA versatile card component for displaying content, images, headers, and footers with full styling and layout control.
Supports flexible layouts with optional image overlays, header/footer sections, and body customization.
Overview
e8-card allows you to create cards with structured sections, including header, body, footer, and images.
You can customize each section’s background, border, text styles, and optionally overlay images over the body.
Slots are available for header, body, footer, and custom content insertion.
<e8-card>
<template #header>
<div style="display: flex; align-items: center; justify-content: space-between;">
<h3 style="margin: 0;">Card Title</h3>
<e8-button variant="primary" size="small">Action</e8-button>
</div>
</template>
<div>
<p>This is the main content of the card. You can place text, lists, or even nested components here.</p>
<ul>
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
</ul>
</div>
<template #footer>
<div style="text-align: right;">
<e8-button variant="secondary" size="small">Cancel</e8-button>
<e8-button variant="success" size="small">Confirm</e8-button>
</div>
</template>
</e8-card>Card Title
This is the main content of the card. You can place text, lists, or even nested components here.
- Detail 1
- Detail 2
- Detail 3
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| align | Sets text alignment inside the card. | string | — |
| bg-variant | Applies a background color variant to the card. | E8BackgroundColorVariants | — |
| 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 | — |
| border-variant | Applies a border color variant to the card. | E8BorderColorVariants | — |
| footer | Footer text content. | 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 for the footer section. | Array | Object | string | — |
| footer-tag | HTML tag for the footer container. | string | 'div' |
| footer-text-variant | Text color variant for the footer. | E8TextColorVariants | — |
| 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 | — |
| img-alt | Alt text for the card image. | string | — |
| img-bottom | Places the image at the bottom of the card. | boolean | false |
| img-class | Custom classes for the card image. | Array | Object | string | — |
| img-end | Aligns the image to the end (right) in flex layout. | boolean | false |
| img-height | Sets a fixed height for the image. | string | 'auto' |
| img-icon-variant | Icon variant displayed on the image (if applicable). | E8TextColorVariants | — |
| img-left | Aligns the image to the left in flex layout. | boolean | false |
| img-right | Aligns the image to the right in flex layout. | boolean | false |
| img-src | Image source URL or path. | string | — |
| img-source-type | Source type for the image (default is URL). | E8ImageSourceTypes | 'url' |
| img-start | Aligns the image to the start (left) in flex layout. | boolean | false |
| img-top | Places the image at the top of the card. | boolean | false |
| img-width | Sets a fixed width for the image. | number | string | — |
| no-body | If true, omits the body section of the card. | boolean | false |
| 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 |
| tag | Specifies the HTML tag for the card container. | string | 'div' |
| text-variant | Text color variant for the card. | E8TextColorVariants | — |
| title | Title text displayed in the card body. | string | — |
| title-tag | HTML tag for the title. | string | 'h4' |
| visible | Controls the card visibility. | boolean | true |
Properties Details
Align
Sets the text alignment inside the card. Accepts standard CSS text alignment values: left, center, right, justify.
Default: —
Bg Variant
Applies a background color variant to the entire card.
Default: —
<div class="mb-4">
<div>
<e8-card-group deck>
<e8-card bg-variant="primary" text-variant="white" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card bg-variant="secondary" text-variant="white" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card bg-variant="success" text-variant="white" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card bg-variant="info" text-variant="white" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card bg-variant="warning" text-variant="white" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card bg-variant="danger" text-variant="white" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card bg-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card bg-variant="dark" header="Dark" text-variant="white">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Body Bg Variant
Applies a background color variant specifically to the card body. This does not affect the header or footer sections.
Default: —
<div class="mb-4">
<div>
<e8-card-group deck>
<e8-card body-bg-variant="primary" body-text-variant="white" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-bg-variant="secondary" body-text-variant="white" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-bg-variant="success" body-text-variant="white" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card body-bg-variant="info" body-text-variant="white" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-bg-variant="warning" body-text-variant="white" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-bg-variant="danger" body-text-variant="white" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card body-bg-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-bg-variant="dark" header="Dark" body-text-variant="white">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Body Border Variant
Applies a border color variant to the card body.
Default: —
<div>
<div>
<e8-card-group deck>
<e8-card body-border-variant="primary" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-border-variant="secondary" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-border-variant="success" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card body-border-variant="info" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-border-variant="warning" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-border-variant="danger" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck class="mb-3">
<e8-card body-border-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-border-variant="dark" header="Dark">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Body Class
Custom classes for the card body. Accepts string, array, or object.
Default: —
<e8-card :body-class="['p-3', 'shadow']" header="Body class">
Card body with custom padding and shadow
</e8-card>Body Tag
Custom classes for the card body. Accepts string, array, or object.
Default: 'div'
Body Text Variant
Applies a text color variant to the card body.
Default: —
<div class="mb-4">
<div>
<e8-card-group deck>
<e8-card body-text-variant="primary" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-text-variant="secondary" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-text-variant="success" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card body-text-variant="info" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-text-variant="warning" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-text-variant="danger" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card body-text-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-text-variant="dark" header="Dark">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card body-text-variant="white" body-bg-variant="dark" header="White">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card body-text-variant="muted" header="Muted">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Border Variant
Applies a border color variant to the entire card.
Default: —
<div>
<div>
<e8-card-group deck>
<e8-card border-variant="primary" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card border-variant="secondary" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card border-variant="success" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card border-variant="info" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card border-variant="warning" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card border-variant="danger" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck class="mb-3">
<e8-card border-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card border-variant="dark" header="Dark">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Footer
Content for the card footer. Can be plain text or use the footer slot.
Default: —
<e8-card footer="Footer text"></e8-card>Footer Bg Variant
Sets a background color variant for the footer.
Default: —
<div class="mb-4">
<div>
<e8-card-group deck>
<e8-card footer-bg-variant="primary" footer-text-variant="white" footer="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-bg-variant="secondary" footer-text-variant="white" footer="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-bg-variant="success" footer-text-variant="white" footer="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card footer-bg-variant="info" footer-text-variant="white" footer="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-bg-variant="warning" footer-text-variant="white" footer="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-bg-variant="danger" footer-text-variant="white" footer="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card footer-bg-variant="light" footer="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-bg-variant="dark" footer="Dark" footer-text-variant="white">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Footer Border Variant
Applies a border color variant to the footer.
Default: —
<div>
<div>
<e8-card-group deck>
<e8-card footer-border-variant="primary" footer="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-border-variant="secondary" footer="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-border-variant="success" footer="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card footer-border-variant="info" footer="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-border-variant="warning" footer="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-border-variant="danger" footer="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck class="mb-3">
<e8-card footer-border-variant="light" footer="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-border-variant="dark" footer="Dark">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Footer Class
Custom classes for the footer. Accepts string, array, or object.
Default: —
<e8-card
:footer-class="['text-center', 'p-2']"
footer="Footer with centered text and padding"
>
</e8-card>Footer Tag
Specifies the HTML tag for the footer.
Default: 'div'
Footer Text Variant
Applies a text color variant to the footer.
Default: —
<div class="mb-4">
<div>
<e8-card-group deck>
<e8-card footer-text-variant="primary" footer="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-text-variant="secondary" footer="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-text-variant="success" footer="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card footer-text-variant="info" footer="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-text-variant="warning" footer="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-text-variant="danger" footer="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card footer-text-variant="light" footer="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-text-variant="dark" footer="Dark">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer-text-variant="white" footer-bg-variant="dark" footer="White">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card footer-text-variant="muted" footer="Muted">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card footer="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Header
Content for the card header. Can be plain text or use the header slot.
Default: —
<e8-card header="Header text"></e8-card>Header Bg Variant
Sets a background color variant for the header.
Default: —
<div class="mb-4">
<div>
<e8-card-group deck>
<e8-card header-bg-variant="primary" header-text-variant="white" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-bg-variant="secondary" header-text-variant="white" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-bg-variant="success" header-text-variant="white" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card header-bg-variant="info" header-text-variant="white" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-bg-variant="warning" header-text-variant="white" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-bg-variant="danger" header-text-variant="white" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card header-bg-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-bg-variant="dark" header="Dark" header-text-variant="white">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Header Border Variant
Applies a border color variant to the header.
Default: —
<div>
<div>
<e8-card-group deck>
<e8-card header-border-variant="primary" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-border-variant="secondary" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-border-variant="success" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card header-border-variant="info" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-border-variant="warning" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-border-variant="danger" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck class="mb-3">
<e8-card header-border-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-border-variant="dark" header="Dark">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Header Class
Custom classes for the header. Accepts string, array, or object.
Default: —
<e8-card
:header-class="['text-center', 'p-3']"
header="Header with centered text and padding"
>
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>Header Tag
Specifies the HTML tag for the header.
Default: 'div'
Header Text Variant
Applies a text color variant to the header.
Default: —
<div class="mb-4">
<div>
<e8-card-group deck>
<e8-card header-text-variant="primary" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-text-variant="secondary" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-text-variant="success" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card header-text-variant="info" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-text-variant="warning" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-text-variant="danger" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card header-text-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-text-variant="dark" header="Dark">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header-text-variant="white" header-bg-variant="dark" header="White">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card header-text-variant="muted" header="Muted">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Img Alt
Alternative text for the card image.
Default: —
Img Bottom
Displays the image at the bottom of the card.
Default: false
⚠️ Only when using img-bottom does the card preserve the header. In other image positions (img-top, img-left, img-right), the header is not rendered.
<e8-card
header="Image Bottom"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
img-bottom
>
<e8-card-text>Text is positioned above the bottom image.</e8-card-text>
</e8-card>Img Class
Custom classes for the card image. Accepts string, array, or object.
Default: —
<e8-card
:img-class="['rounded', 'shadow-lg', 'border', 'border-primary']"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
>
<e8-card-text>
The image now has a large shadow, rounded corners, and a primary-colored border for a more pronounced visual effect.
</e8-card-text>
</e8-card>Img End
Positions the image at the end (right) of the card using flex layout.
Default: false
<e8-card
header="Image End"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
img-end
>
<e8-card-text>Text flows before the end image based on text direction.</e8-card-text>
</e8-card>Img Height
Positions the image at the end (right) of the card using flex layout.
Default: —
<e8-card
header="Image Height"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
img-height="100px"
>
<e8-card-text>The image height is fixed at 100px.</e8-card-text>
</e8-card>Img Icon Variant
Defines the color style applied to the icon when img-source-type="icon".
Default: —
<e8-card
header="Image Icon"
img-source-type="icon"
img-src="cloud"
img-icon-variant="primary"
img-height="150px"
>
<e8-card-text>The icon "cloud" is displayed with a primary color and height of 150px.</e8-card-text>
</e8-card>Img Left
Positions the image at the left of the card using flex layout.
Default: —
<e8-card
header="Image Left"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
img-left
>
<e8-card-text>Text is positioned to the right of the image.</e8-card-text>
</e8-card>Img Right
Positions the image at the right of the card using flex layout.
Default: —
<e8-card
header="Image Right"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
img-right
>
<e8-card-text>Text is positioned to the left of the image.</e8-card-text>
</e8-card>Img Src
Specifies the image or icon to display in the card.
The expected value depends on the img-source-type property:
url→ string with an image path or URL (e.g.,/assets/photo.png,https://example.com/image.jpg).icon→ string corresponding to anE8IconNamefrom the icon collection (e.g.,"star","calendar").image→E8ScriptAliasreferencing image metadata.file→ fileid.
Default: —
Img Source Type
Type of image source.
Default: 'url'
Img Start
Positions the image at the start (left) of the card using flex layout.
Default: false
<e8-card
header="Image Start"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
img-start
>
<e8-card-text>Text flows after the start image based on text direction.</e8-card-text>
</e8-card>Img Top
Positions the image at the top of the card.
Default: false
<e8-card
header="Image Top"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
img-top
>
<e8-card-text>Text is positioned below the top image.</e8-card-text>
</e8-card>Img Width
Width of the card image. Accepts number (px) or string with units.
Default: 'auto'
<e8-card
header="Image Width"
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
img-width="150px"
>
<e8-card-text>The image width is fixed at 150px.</e8-card-text>
</e8-card>Min Height
Sets the minimum height of the card.
Default: 'auto'
<e8-card
header="Fixed Height Card"
min-height="200px"
>
<e8-card-text>
This card has a minimum height of 200px, ensuring consistent layout regardless of content size.
</e8-card-text>
</e8-card>No Body
Disables the automatic card body wrapper, allowing custom content without <e8-card-body>.
Default: false
<e8-card-group deck>
<e8-card class="text-center">
<div class="bg-secondary text-light">
This is some content within the default <samp><b-card-body></samp> block of the
<samp><b-card></samp> component. Notice the padding between the card's border and this
gray <samp><div></samp>.
</div>
</e8-card>
<e8-card no-body class="text-center">
<div class="bg-secondary text-light h-100">
This is some content without the default <samp><b-card-body></samp> section. Notice the
lack of padding between the card's border and this gray <samp><div></samp>.
</div>
</e8-card>
</e8-card-group>
This is some content within the default <b-card-body> block of the
<b-card> component. Notice the padding between the card's border and this
gray <div>.
This is some content without the default <b-card-body> section. Notice the
lack of padding between the card's border and this gray <div>.
Overlay
Enables overlay mode, placing the card body on top of the image.
Default: false
<e8-card
overlay
img-src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImageOverlay.jpeg"
img-alt="Card Image"
text-variant="white"
title="Image Overlay"
sub-title="Subtitle"
>
<e8-card-text>
Some quick example text to build on the card and make up the bulk of the card's content.
</e8-card-text>
</e8-card>Sub Title
Text for a subtitle displayed under the card title.
Default: false
<e8-card
header="Card header"
title="Card Title"
sub-title="Card Subtitle"
>
<e8-card-text>
Content
</e8-card-text>
</e8-card>Sub Title Tag
HTML tag used for the subtitle.
Default: h6
Sub Title Text Variant
Text color variant for the subtitle.
Default: 'muted'
Tag
HTML tag for the card container.
Default: 'div'
Text Variant
Applies a text color variant to the card content.
Default: —
<div class="mb-4">
<div>
<e8-card-group deck>
<e8-card text-variant="primary" header="Primary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card text-variant="secondary" header="Secondary">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card text-variant="success" header="Success">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card text-variant="info" header="Info">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card text-variant="warning" header="Warning">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card text-variant="danger" header="Danger">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card text-variant="light" header="Light">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card text-variant="dark" header="Dark">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card text-variant="white" bg-variant="dark" header="White">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
<div class="mt-3">
<e8-card-group deck>
<e8-card text-variant="muted" header="Muted">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
<e8-card header="Default">
<e8-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e8-card-text>
</e8-card>
</e8-card-group>
</div>
</div>Title
Text for the card title.
Default: —
<e8-card
header="Card header"
title="Card Title"
sub-title="Card Subtitle"
>
<e8-card-text>
Content
</e8-card-text>
</e8-card>Title Tag
HTML tag used for the title.
Default: 'h4'
Visible
Controls visibility of the card.
Default: true
Slots Details
Slot: Default
Main slot for rendering custom card body content.
If no-body is false, content will be wrapped inside <e8-card-body>.
If no-body is true, content is rendered directly without a wrapper.
<e8-card title="Card Title">
<p>This is the default body slot content.</p>
</e8-card>This is the default body slot content.
Slot: Header
Custom slot for replacing or extending the header section.
<e8-card>
<template #header>
<div class="d-flex justify-content-between align-items-center">
<span>Custom Header</span>
<e8-button size="small">Action</e8-button>
</div>
</template>
</e8-card>
Custom Header
Action
Slot: Footer
Custom slot for replacing or extending the footer section.
<e8-card>
<template #footer>
<small class="text-muted">Custom Footer</small>
</template>
</e8-card>