nuxt-x-cards
Hero Fullscreen
Full-viewport hero card with cinematic image filter, gradient overlay, and CTA buttons.
Hero Fullscreen
The XCardHeroFullscreen component renders a full-viewport hero section. The gradient overlay is the primary contrast layer — no heavy blur panels are used on text content. Filter and overlay fall back to the layer-wide defaults from useXCards().
Components
<XCardHeroFullscreen />
<XCardHeroFullscreen
title="Move in perfect silence."
title-accent="Every step recorded."
subtitle="Advanced health tracking designed around your life, not the other way around."
pretitle="Introducing Gen 4"
image-url="/images/hero-product.jpg"
filter="cinematic"
overlay="bottom-fade"
theme="dark"
height="full"
:primary-cta="{ label: 'Shop Now', to: '/shop' }"
:secondary-cta="{ label: 'Learn More', to: '/about' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Main headline text |
titleAccent | string | — | Accent line rendered below title in serif italic |
subtitle | string | — | Supporting paragraph below the headline |
pretitle | string | — | Small blurred badge label above the headline |
imageUrl | string | required | Background image URL |
imageAlt | string | — | Alt text for the background image |
theme | 'dark' | 'light' | 'dark' | Text color theme — dark uses white, light uses neutral-950 |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none' | global default | CSS filter applied to the background image |
overlay | 'bottom' | 'bottom-fade' | 'bottom-blur' | 'top' | 'full' | 'cinematic' | 'oura' | 'none' | global default | Gradient overlay style for text contrast |
height | 'full' | 'tall' | 'medium' | 'full' | Min height — full = 100vh, tall = 85vh, medium = 65vh |
primaryCta | { label: string; to?: string; href?: string } | — | Primary pill button (solid). Use to for internal links, href for external. |
secondaryCta | { label: string; to?: string; href?: string } | — | Secondary pill button (outline). Use to for internal links, href for external. |
loading | 'eager' | 'lazy' | 'eager' | Native <img> loading hint for the background image. |
AI Context
component: XCardHeroFullscreen
package: "@xenterprises/nuxt-x-cards"
category: HeroCards
use-when: >
Use XCardHeroFullscreen for full-screen cinematic landing hero sections
above the fold. Falls back to global filter and overlay defaults from
useXCards() when those props are omitted.
notes:
- titleAccent renders in a serif italic style for brand emphasis
- pretitle renders as a small blurred badge above the headline
- filter and overlay props are optional — omit to use layer-wide defaults