nuxt-x-cards
Hero Cards
Full-viewport and split-layout hero components for above-the-fold sections.
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) |
<XCardHeroSplit />
A split two-column hero that places an image on one side and editorial text on the other. The image column supports zoom-in on hover and cinematic filters. Useful for editorial landing sections where breathing room around the text matters.
<XCardHeroSplit
title="Engineered for"
title-accent="every body."
description="The most advanced health sensor we've ever built, wrapped in the most comfortable form we've ever designed."
pretitle="The Science"
image-url="/images/hero-split.jpg"
variant="left-image"
filter="golden"
theme="light"
:cta="{ label: 'Explore the research', to: '/science' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Main headline text (required) |
titleAccent | string | — | Accent line rendered below title in serif italic style |
description | string | — | Body paragraph below the headline |
pretitle | string | — | Small section-label text above the headline |
imageUrl | string | — | Image URL (required) |
imageAlt | string | — | Alt text for the image |
variant | 'left-image' | 'right-image' | 'left-image' | Which column the image occupies |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'none' | global default | CSS filter applied to the image |
cta | { label: string; to: string } | — | Single CTA button (outline, pill style) |
theme | 'dark' | 'light' | 'light' | Background and text color scheme |
AI Context
package: "nuxt-x-cards"
prefix: XCard
components:
- XCardHeroFullscreen
- XCardHeroSplit
use-when: >
Use XCardHeroFullscreen for full-screen cinematic landing hero sections.
Use XCardHeroSplit for editorial split-screen layouts where image and text
share equal visual weight. Both components fall 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