e8-card-img
Updated on Sep 18, 2025 3 minutes to readA flexible image component specifically designed for use inside e8-card.
Supports different placements (top, bottom, left, right), custom sizing, CSS classes, and icon overlays.
Overview
e8-card-img renders images inside a card layout with optional alignment and size control.
You can specify the image source type (url, icon), alt text, dimensions, and additional styling classes.
When using icons (sourceType="icon"), the iconVariant property allows you to apply color variants.
This component is typically used inside e8-card but can also be used standalone for flexible card designs.
<e8-card header="Top Image">
<e8-card-img
src="/assets/app_641cb0dad1fe4/public/__Articles__/assets/cardImage.jpeg"
top
/>
<p>The image is displayed at the top of the card.</p>
</e8-card>The image is displayed at the top of the card.
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| alt | Alt text for the card image. | string | — |
| bottom | Places the image at the bottom of the card. | boolean | false |
| end | Aligns the image to the end (right) in flex layout. | boolean | false |
| height | Sets a fixed height for the image. | string | 'auto' |
| icon-variant | Icon variant displayed on the image (if applicable). | E8TextColorVariants | — |
| img-class | Custom classes for the card image. | Array | Object | string | — |
| left | Aligns the image to the left in flex layout. | boolean | false |
| right | Aligns the image to the right in flex layout. | boolean | false |
| src | Image source URL or path. | string | — |
| source-type | Source type for the image (default is URL). | E8ImageSourceTypes | 'url' |
| start | Aligns the image to the start (left) in flex layout. | boolean | false |
| top | Places the image at the top of the card. | boolean | false |
| width | Sets a fixed width for the image. | number | string | — |
| thumbnail-size | Optional size to use for thumbnails (in pixels). | number | 50 |