nuxt-x-cards
Media Card
Immersive full-bleed media card with gradient overlay, cinematic filter, and reveal animations.
Media Card
The XCardMedia component renders an immersive card where the image fills the entire card surface. Text content sits in the lower portion, layered on a gradient overlay for contrast. Filter, overlay, and aspect ratio all fall back to the useXCards() global defaults when omitted.
Components
<XCardMedia />
<XCardMedia
title="Restorative Sleep"
description="Track every stage of your sleep to understand what recovery really looks like."
image-url="/images/sleep.jpg"
filter="moody"
overlay="bottom-fade"
aspect-ratio="landscape"
size="md"
:cta="{ label: 'Explore sleep tracking', to: '/features/sleep' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Card headline |
imageUrl | string | required | Full-bleed image URL |
description | string | — | Supporting body text, max-width constrained |
imageAlt | string | — | Alt text for the image |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none' | global default | CSS filter applied to the image |
overlay | 'bottom' | 'bottom-fade' | 'bottom-blur' | 'top' | 'full' | 'cinematic' | 'oura' | 'none' | global default | Gradient overlay variant for text contrast |
cta | { label: string; to?: string; href?: string } | — | Optional CTA button (outline, pill style). Use to for internal links, href for external. |
aspectRatio | 'cinematic' | 'landscape' | 'square' | 'portrait' | global default | Card aspect ratio |
size | 'sm' | 'md' | 'lg' | 'md' | Internal padding size |
loading | 'eager' | 'lazy' | 'lazy' | Native <img> loading hint for the media image. |
Size padding reference (4px grid):
| Value | Mobile | Desktop |
|---|---|---|
sm | 16px | 24px |
md | 24px | 32px |
lg | 32px | 48px |
AI Context
component: XCardMedia
package: "@xenterprises/nuxt-x-cards"
category: MediaCards
use-when: >
Use XCardMedia for editorial image grids, featured content sections, and
anywhere full-bleed imagery with overlay text is needed.
notes:
- filter, overlay, and aspectRatio all fall back to useXCards() global defaults
- the bottom-blur overlay variant is unique to XCardMedia (not available on hero components)