Media Cards
Media Cards
Components built around full-bleed imagery. XCardMedia is for editorial and content grid use; XCardImageFilter is a demonstration component for showcasing the available CSS filter presets.
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 |
<XCardImageFilter />
A demonstration card that shows a single image in its filtered state by default, then reveals the original on hover. Intended for design system documentation pages or filter showcase sections. All five filter presets are supported; the cssValues prop documents the raw CSS filter string displayed beneath the image.
<XCardImageFilter
title="Cinematic"
description="High-contrast, slightly desaturated look inspired by cinema color grading."
image-url="/images/sample.jpg"
filter="cinematic"
css-values="contrast(1.1) saturate(0.85) brightness(0.95)"
/>
<!-- Show all five filters in a grid -->
<XCardGrid :columns="3" gap="md">
<XCardImageFilter
v-for="preset in filterPresets"
:key="preset.filter"
:title="preset.title"
:description="preset.description"
:image-url="previewImage"
:filter="preset.filter"
:css-values="preset.cssValues"
/>
</XCardGrid>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | — | Image URL (required) |
imageAlt | string | — | Alt text for the image |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | — | Filter preset to apply (required) |
title | string | — | Filter name or card headline (required) |
description | string | — | Short description of the filter effect (required) |
cssValues | string | — | Raw CSS filter string displayed in a monospace code block (required) |
Behavior: Hovering the image area toggles the filter off to reveal the original. A UBadge in the top-left corner switches between the filter name and "Original" to indicate the current state.
AI Context
package: "nuxt-x-cards"
prefix: XCard
components:
- XCardMedia
- XCardImageFilter
use-when: >
Use XCardMedia for editorial image grids, featured content sections, and
anywhere full-bleed imagery with overlay text is needed. Use XCardImageFilter
only on design system or documentation pages to showcase the available
cinematic filter presets.
notes:
- XCardMedia filter/overlay/aspectRatio all fall back to useXCards() global defaults
- XCardImageFilter requires all five props; filter does not accept 'none'
- The bottom-blur overlay variant is unique to XCardMedia (not available on hero components)