Hero Cards
HeroFullscreen
Full-viewport hero with gradient overlay, cinematic image filter, and CTA buttons.
Hero Cards
Hero components designed for above-the-fold impact. Both components respect globally configured filter and overlay defaults from useXCards(), while allowing per-instance overrides.
Components
<XCardHeroFullscreen />
A full-viewport hero card that places a background image behind a gradient overlay, with bottom-justified editorial text and optional CTA buttons. The gradient overlay is the primary contrast layer — no heavy blur panels are used on the text content. Supports cinematic image filters and multiple overlay styles.
<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 | — | Main headline text (required) |
titleAccent | string | — | Accent line rendered below title in serif italic style |
subtitle | string | — | Supporting paragraph below the headline |
pretitle | string | — | Small badge label rendered above the headline |
imageUrl | string | — | Background image URL (required) |
imageAlt | string | — | Alt text for the background image |
theme | 'dark' | 'light' | 'dark' | Controls text color — dark uses white, light uses neutral-950 |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'none' | global default | CSS filter applied to the background image |
overlay | 'bottom' | 'bottom-fade' | 'top' | 'full' | 'cinematic' | 'oura' | 'none' | global default | Gradient overlay style for text contrast |
height | 'full' | 'tall' | 'medium' | 'full' | Minimum height: full = 100vh, tall = 85vh, medium = 65vh |
primaryCta | { label: string; to: string } | — | Primary button (solid, pill style) |
secondaryCta | { label: string; to: string } | — | Secondary button (outline, pill style) |
AI Context
category: HeroCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardHeroFullscreen
use-when: >
Use XCardHeroFullscreen for full-screen cinematic landing hero sections.
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