Media Cards
Media
Immersive full-bleed media card with gradient overlay, cinematic filter, and reveal animations.
Media Cards
Components built around full-bleed imagery. XCardMedia is for editorial and content grid use.
Components
<XCardMedia />
An immersive card where the image fills the entire card surface. Text content sits in the lower portion of the card, layered on a gradient overlay for contrast. The card supports entrance animations (card-text-reveal) and staggered delays on description and CTA. Filter, overlay, and aspect ratio all fall back to the useXCards() global defaults when omitted.
<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 | — | Card headline (required) |
description | string | — | Supporting body text, max-width constrained |
imageUrl | string | — | Full-bleed image URL (required) |
imageAlt | string | — | Alt text for the image |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'none' | global default | CSS filter applied to the image |
overlay | 'bottom' | 'bottom-fade' | 'bottom-blur' | 'cinematic' | 'oura' | 'none' | global default | Gradient overlay variant for text contrast |
cta | { label: string; to: string } | — | Optional CTA button (outline, pill style) |
aspectRatio | 'cinematic' | 'landscape' | 'square' | 'portrait' | global default | Card aspect ratio |
size | 'sm' | 'md' | 'lg' | 'md' | Internal padding size |
Size padding reference (4px grid):
| Value | Mobile | Desktop |
|---|---|---|
sm | 16px | 24px |
md | 24px | 32px |
lg | 32px | 48px |
AI Context
category: MediaCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardMedia
use-when: >
Use XCardMedia for editorial image grids, featured content sections, and
anywhere full-bleed imagery with overlay text is needed.
notes:
- XCardMedia filter/overlay/aspectRatio all fall back to useXCards() global defaults
- The bottom-blur overlay variant is unique to XCardMedia (not available on hero components)