Hero Cards
HeroSplit
Split-layout hero with image on one side and editorial text on the other.
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
<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
category: HeroCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardHeroSplit
use-when: >
Use XCardHeroSplit for editorial split-screen layouts where image and text
share equal visual weight. Falls back to global filter defaults from
useXCards() when the filter prop is omitted.
notes:
- titleAccent renders in a serif italic style for brand emphasis
- pretitle renders as small section-label text above the headline
- filter prop is optional — omit to use layer-wide defaults