ImageCard

A polaroid-style image display card: the image area locks its geometry with a fixed aspect ratio, while the label footer renders as a solid theme-colored band separated by a thick black rule. The whole card lifts on hover with a hard, blur-free shadow, following the library's unified interaction language.

Preview

Preview

基础拍立得相框

Field Record 001

悬浮时整卡上浮，投影保持硬边无模糊。

宽高比与底栏色族

Aspect 4:3

Aspect Video

Aspect Square

自定义底栏插槽

Archive / 1998[ CONFIDENTIAL ]

Installation

pnpm dlx brutx-vue@latest add image-card

Usage

Basic Usage

<script setup>
import { ImageCard } from 'brutx-ui-vue'
</script>

<template>
    <ImageCard
        class="max-w-xs"
        src="/images/field-record.jpg"
        alt="Field record photo"
        title="Field Record 001"
        description="The whole card lifts on hover with a hard shadow."
    />
</template>

Aspect Ratio & Footer Accent

aspect locks the image geometry; accent picks the footer color family.

<template>
    <ImageCard
        src="/images/archive.jpg"
        alt="Archived material"
        aspect="square"
        accent="destructive"
        title="Aspect Square"
    />
</template>

Custom Footer Slot

The default slot replaces the title/description structure for free-form footer content.

<template>
    <ImageCard src="/images/archive.jpg" alt="Archived material">
        <div class="flex items-center justify-between font-mono text-xs font-bold uppercase">
            <span>Archive / 1998</span>
            <span>[ CONFIDENTIAL ]</span>
        </div>
    </ImageCard>
</template>

API Reference

ImageCard — Props

Name	Type	Default	Description
src Required	string	—	The resource URL used by the image element.
Details Declared type string Default value details Not declared — Source ImageCard.vue:12 packages/ui/src/components/image-card/ImageCard.vue
alt	string | undefined	""	Alternative text for the image; an empty string marks it as decorative.
Details Declared type string | undefined Default value details Declaration '' Source: packages/ui/src/components/image-card/ImageCard.vue Resolved value "" Source ImageCard.vue:14 packages/ui/src/components/image-card/ImageCard.vue
aspect	ImageCardAspect | undefined	undefined	Sets the image area ratio: video is 16:9, square is 1:1, and 4/3 is 4:3.
Details Declared type ImageCardAspect | undefined Literal values "4/3" "square" "video" Referenced types ImageCardAspect Type definition — ImageCardAspect type ImageCardAspect = '4/3' | 'video' | 'square' Default value details Declaration undefined Source: packages/ui/src/components/image-card/ImageCard.vue Resolved value undefined Source ImageCard.vue:16 packages/ui/src/components/image-card/ImageCard.vue
accent	ImageCardAccent | undefined	undefined	Sets the theme color family used by the footer.
Details Declared type ImageCardAccent | undefined Literal values "accent" "destructive" "info" "muted" "primary" "secondary" "success" Referenced types ImageCardAccent Type definition — ImageCardAccent type ImageCardAccent = 'primary' | 'secondary' | 'accent' | 'destructive' | 'success' | 'info' | 'muted' Default value details Declaration undefined Source: packages/ui/src/components/image-card/ImageCard.vue Resolved value undefined Source ImageCard.vue:18 packages/ui/src/components/image-card/ImageCard.vue
title	string | undefined	undefined	The title text displayed in the footer.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/image-card/ImageCard.vue Resolved value undefined Source ImageCard.vue:20 packages/ui/src/components/image-card/ImageCard.vue
description	string | undefined	undefined	The description text displayed alongside the footer title.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/image-card/ImageCard.vue Resolved value undefined Source ImageCard.vue:22 packages/ui/src/components/image-card/ImageCard.vue
class Nullable	ClassValue	undefined	Custom CSS class values added to the image card root element.
Details Declared type ClassValue Literal values false null true Default value details Declaration undefined Source: packages/ui/src/components/image-card/ImageCard.vue Resolved value undefined Source ImageCard.vue:24 packages/ui/src/components/image-card/ImageCard.vue

ImageCard — Slots

Name	Signature or type	Description
#default	{}	Replaces the default footer content. When title, description, and slot content are all absent, the footer is omitted and only the image is shown.
Details Declared type {} Source ImageCard.vue packages/ui/src/components/image-card/ImageCard.vue

Frameless-footer mode

When neither title nor description is provided and no default slot content exists, <figcaption> is skipped and the component degrades to a pure framed image.

Accessibility

• Alternative text: informative images must provide alt; pass an empty string for purely decorative images so screen readers skip them.
• Semantic structure: the root is a <figure> and the footer a <figcaption>, preserving native image/caption semantics.
• Motion degradation: the hover lift transition is the only animation and follows the global reduced-motion policy.